diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.tsx
index 1caa9f0fa9..4e871a8f21 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.tsx
@@ -1,6 +1,4 @@
 import { Box, Button, styled } from '@mui/material';
-import Input from '../../../common/Input/Input.tsx';
-import GeneralSelect from '../../../common/GeneralSelect/GeneralSelect.tsx';
 
 export const StyledContainer = styled('div')(() => ({
     maxWidth: '400px',
@@ -12,27 +10,6 @@ export const StyledForm = styled('form')(() => ({
     height: '100%',
 }));
 
-export const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
-export const StyledSelectInput = styled(GeneralSelect)(({ theme }) => ({
-    marginBottom: theme.spacing(2),
-    minWidth: '400px',
-    [theme.breakpoints.down('sm')]: {
-        minWidth: '379px',
-    },
-}));
-
-export const StyledInputDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
-export const StyledInputLabel = styled('label')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
 export const CancelButton = styled(Button)(({ theme }) => ({
     marginLeft: theme.spacing(3),
 }));
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx
index 464be7eda0..161bfbafea 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx
@@ -1,10 +1,8 @@
 import { TokenType } from '../../../../../interfaces/token.ts';
 import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
 import type React from 'react';
-import {
-    StyledInputDescription,
-    StyledSelectInput,
-} from '../ApiTokenForm.styles';
+import { FormField } from 'component/common/FormField/FormField';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 
 interface IEnvironmentSelectorProps {
@@ -31,21 +29,19 @@ export const EnvironmentSelector = ({
               }));
 
     return (
-        <>
-            <StyledInputDescription>
-                Which environment should the token have access to?
-            </StyledInputDescription>
-            <StyledSelectInput
+        <FormField
+            label='Environment'
+            description='Which environment should the token have access to?'
+        >
+            <GeneralSelect
                 disabled={type === TokenType.ADMIN}
                 options={selectableEnvs}
                 value={environment}
                 onChange={setEnvironment}
-                label='Environment'
-                id='api_key_environment'
                 name='environment'
                 IconComponent={KeyboardArrowDownOutlined}
                 fullWidth
             />
-        </>
+        </FormField>
     );
 };
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/ProjectSelector.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/ProjectSelector.tsx
index 02f19b465a..7baefc924f 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/ProjectSelector.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/ProjectSelector.tsx
@@ -1,7 +1,7 @@
 import { SelectProjectInput } from './SelectProjectInput/SelectProjectInput.tsx';
 import { TokenType } from '../../../../../interfaces/token.ts';
 import type React from 'react';
-import { StyledInputDescription } from '../ApiTokenForm.styles';
+import { FormField } from 'component/common/FormField/FormField';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import type { ApiTokenFormErrorType } from '../useApiTokenForm.ts';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
@@ -33,10 +33,10 @@ export const ProjectSelector = ({
     }
 
     return (
-        <>
-            <StyledInputDescription>
-                Which project do you want to give access to?
-            </StyledInputDescription>
+        <FormField
+            label='Projects'
+            description='Which projects do you want to give access to?'
+        >
             <SelectProjectInput
                 disabled={type === TokenType.ADMIN}
                 options={selectableProjects}
@@ -45,6 +45,6 @@ export const ProjectSelector = ({
                 error={errors?.projects}
                 onFocus={() => clearErrors('projects')}
             />
-        </>
+        </FormField>
     );
 };
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.test.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.test.tsx
index 61d91c5dbe..9bb3bac3e8 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.test.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.test.tsx
@@ -54,7 +54,7 @@ describe('SelectProjectInput', () => {
             screen.getByLabelText(/all current and future projects/i),
         ).not.toBeChecked();
 
-        expect(screen.getByLabelText('Projects')).toBeEnabled();
+        expect(screen.getByRole('combobox')).toBeEnabled();
 
         await user.click(screen.getByTestId('select-all-projects'));
 
@@ -62,7 +62,7 @@ describe('SelectProjectInput', () => {
             screen.getByLabelText(/all current and future projects/i),
         ).toBeChecked();
 
-        expect(screen.getByLabelText('Projects')).toBeDisabled();
+        expect(screen.getByRole('combobox')).toBeDisabled();
     });
 
     it('renders with autocomplete enabled if default value is not a wildcard', () => {
@@ -84,7 +84,7 @@ describe('SelectProjectInput', () => {
         it('selects and deselects all options', async () => {
             const user = userEvent.setup();
             render(<SelectProjectInput {...mockProps} defaultValue={[]} />);
-            await user.click(screen.getByLabelText('Projects'));
+            await user.click(screen.getByRole('combobox'));
 
             let button = screen.getByRole('button', {
                 name: /select all/i,
@@ -118,7 +118,7 @@ describe('SelectProjectInput', () => {
                     ]}
                 />,
             );
-            await user.click(screen.getByLabelText('Projects'));
+            await user.click(screen.getByRole('combobox'));
 
             const button = screen.queryByRole('button', {
                 name: /select all/i,
@@ -141,7 +141,7 @@ describe('SelectProjectInput', () => {
                 ]}
             />,
         );
-        const input = await screen.findByLabelText('Projects');
+        const input = await screen.findByRole('combobox');
         await user.type(input, 'alp');
 
         await waitFor(() => {
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.tsx
index 420627190c..d938d72775 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectProjectInput.tsx
@@ -45,6 +45,8 @@ export interface ISelectProjectInputProps {
     onChange: (value: string[]) => void;
     onFocus?: () => void;
     error?: string;
+    id?: string;
+    'aria-describedby'?: string;
 }
 
 export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
@@ -54,6 +56,8 @@ export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
     disabled,
     error,
     onFocus,
+    id,
+    'aria-describedby': ariaDescribedby,
 }) => {
     const [projects, setProjects] = useState<string[]>(
         typeof defaultValue === 'string' ? [defaultValue] : defaultValue,
@@ -123,10 +127,16 @@ export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <TextField
             {...params}
+            slotProps={{
+                ...params.slotProps,
+                htmlInput: {
+                    ...params.slotProps.htmlInput,
+                    'aria-describedby': ariaDescribedby,
+                },
+            }}
             error={Boolean(error)}
             helperText={error}
             variant='outlined'
-            label='Projects'
             placeholder='Select one or more projects'
             onFocus={onFocus}
             data-testid='select-input'
@@ -134,8 +144,8 @@ export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
     );
 
     return (
-        <Box sx={{ mt: -1, mb: 3 }}>
-            <Box sx={{ mt: 1, mb: 0.25, ml: 1.5 }}>
+        <Box>
+            <Box sx={{ mb: 0.25, ml: 1.5 }}>
                 <FormControlLabel
                     disabled={disabled}
                     data-testid='select-all-projects'
@@ -149,6 +159,7 @@ export const SelectProjectInput: FC<ISelectProjectInputProps> = ({
                 />
             </Box>
             <Autocomplete
+                id={id}
                 disabled={disabled || isWildcardSelected}
                 multiple
                 limitTags={2}
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/TokenInfo/TokenInfo.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/TokenInfo/TokenInfo.tsx
index 0cf13d479a..7811e08b30 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/TokenInfo/TokenInfo.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/TokenInfo/TokenInfo.tsx
@@ -1,5 +1,6 @@
 import type React from 'react';
-import { StyledInput, StyledInputDescription } from '../ApiTokenForm.styles';
+import { TextField } from '@mui/material';
+import { FormField } from 'component/common/FormField/FormField';
 import type { ApiTokenFormErrorType } from '../useApiTokenForm.ts';
 
 interface ITokenInfoProps {
@@ -16,20 +17,20 @@ export const TokenInfo = ({
     clearErrors,
 }: ITokenInfoProps) => {
     return (
-        <>
-            <StyledInputDescription>
-                What would you like to call this token?
-            </StyledInputDescription>
-            <StyledInput
+        <FormField
+            label='Token name'
+            description='What would you like to call this token?'
+        >
+            <TextField
+                fullWidth
                 value={tokenName}
                 name='tokenName'
                 onChange={(e) => setTokenName(e.target.value)}
-                label='Token name'
                 error={errors.tokenName !== undefined}
-                errorText={errors.tokenName}
+                helperText={errors.tokenName}
                 onFocus={() => clearErrors('tokenName')}
                 autoFocus
             />
-        </>
+        </FormField>
     );
 };
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/TokenTypeSelector/TokenTypeSelector.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/TokenTypeSelector/TokenTypeSelector.tsx
index 0d37e8457c..2e9f954771 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/TokenTypeSelector/TokenTypeSelector.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/TokenTypeSelector/TokenTypeSelector.tsx
@@ -1,12 +1,11 @@
-import { StyledContainer, StyledInputLabel } from '../ApiTokenForm.styles';
 import {
     Box,
-    FormControl,
     FormControlLabel,
     Radio,
     RadioGroup,
     Typography,
 } from '@mui/material';
+import { FormField } from 'component/common/FormField/FormField';
 import type { TokenType } from 'interfaces/token';
 
 export type SelectOption = {
@@ -27,53 +26,51 @@ export const TokenTypeSelector = ({
     apiTokenTypes,
 }: ITokenTypeSelectorProps) => {
     return (
-        <StyledContainer>
-            <FormControl sx={{ mb: 2, width: '100%' }}>
-                <StyledInputLabel id='token-type'>
-                    What do you want to connect?
-                </StyledInputLabel>
-                <RadioGroup
-                    aria-labelledby='token-type'
-                    defaultValue='CLIENT'
-                    name='radio-buttons-group'
-                    value={type}
-                    onChange={(_, value) => setType(value as TokenType)}
-                >
-                    {apiTokenTypes.map(
-                        ({ key, label, title, enabled: hasAccess }) => (
-                            <FormControlLabel
-                                key={key}
-                                value={key}
-                                sx={{ mb: 1 }}
-                                disabled={!hasAccess}
-                                control={
-                                    <Radio
-                                        sx={{
-                                            ml: 0.75,
-                                            alignSelf: 'flex-start',
-                                        }}
-                                    />
-                                }
-                                label={
+        <FormField
+            label='Token type'
+            description='What do you want to connect?'
+        >
+            <RadioGroup
+                aria-label='Token type'
+                defaultValue='CLIENT'
+                name='radio-buttons-group'
+                value={type}
+                onChange={(_, value) => setType(value as TokenType)}
+            >
+                {apiTokenTypes.map(
+                    ({ key, label, title, enabled: hasAccess }) => (
+                        <FormControlLabel
+                            key={key}
+                            value={key}
+                            sx={{ mb: 1 }}
+                            disabled={!hasAccess}
+                            control={
+                                <Radio
+                                    sx={{
+                                        ml: 0.75,
+                                        alignSelf: 'flex-start',
+                                    }}
+                                />
+                            }
+                            label={
+                                <Box>
                                     <Box>
-                                        <Box>
-                                            <Typography>{label}</Typography>
-                                            <Typography
-                                                variant='body2'
-                                                sx={{
-                                                    color: 'text.secondary',
-                                                }}
-                                            >
-                                                {title}
-                                            </Typography>
-                                        </Box>
+                                        <Typography>{label}</Typography>
+                                        <Typography
+                                            variant='body2'
+                                            sx={{
+                                                color: 'text.secondary',
+                                            }}
+                                        >
+                                            {title}
+                                        </Typography>
                                     </Box>
-                                }
-                            />
-                        ),
-                    )}
-                </RadioGroup>
-            </FormControl>
-        </StyledContainer>
+                                </Box>
+                            }
+                        />
+                    ),
+                )}
+            </RadioGroup>
+        </FormField>
     );
 };
diff --git a/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
index 94e6729d36..d22cbee854 100644
--- a/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
+++ b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
@@ -121,7 +121,7 @@ export const AutoCreateForm = ({
                         style={{ width: '400px' }}
                         rows={2}
                         variant='outlined'
-                        size='small'
+                        size='large'
                     />
                 </Grid>
             </Grid>
diff --git a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
index 5220b3e6d8..653b585beb 100644
--- a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
+++ b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
@@ -181,7 +181,7 @@ export const OidcAuth = () => {
                             disabled={!data.enabled || oidcConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
-                            size='small'
+                            size='large'
                         />
                     </Grid>
                 </Grid>
@@ -199,7 +199,7 @@ export const OidcAuth = () => {
                             disabled={!data.enabled || oidcConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
-                            size='small'
+                            size='large'
                             required
                         />
                     </Grid>
@@ -220,7 +220,7 @@ export const OidcAuth = () => {
                             disabled={!data.enabled || oidcConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
-                            size='small'
+                            size='large'
                             required
                         />
                     </Grid>
@@ -315,7 +315,7 @@ export const OidcAuth = () => {
                             disabled={!data.enabled || oidcConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
-                            size='small'
+                            size='large'
                         />
                     </Grid>
                 </Grid>
@@ -338,7 +338,7 @@ export const OidcAuth = () => {
                             disabled={!data.enabled}
                             style={{ width: '400px' }}
                             variant='outlined'
-                            size='small'
+                            size='large'
                             placeholder='custom_scope1 custom_scope2'
                         />
                     </Grid>
diff --git a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
index b72e898da6..ba125f9d9a 100644
--- a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
+++ b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
@@ -165,7 +165,7 @@ export const SamlAuth = () => {
                             disabled={!data.enabled || samlConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
-                            size='small'
+                            size='large'
                             required
                         />
                     </Grid>
@@ -187,7 +187,7 @@ export const SamlAuth = () => {
                             disabled={!data.enabled || samlConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
-                            size='small'
+                            size='large'
                             required
                         />
                     </Grid>
@@ -212,7 +212,7 @@ export const SamlAuth = () => {
                             rows={14}
                             maxRows={14}
                             variant='outlined'
-                            size='small'
+                            size='large'
                             required
                             slotProps={{
                                 input: {
@@ -243,7 +243,7 @@ export const SamlAuth = () => {
                             disabled={!data.enabled || samlConfiguredThroughEnv}
                             style={{ width: '400px' }}
                             variant='outlined'
-                            size='small'
+                            size='large'
                         />
                     </Grid>
                 </Grid>
@@ -269,7 +269,7 @@ export const SamlAuth = () => {
                             rows={14}
                             maxRows={14}
                             variant='outlined'
-                            size='small'
+                            size='large'
                             slotProps={{
                                 input: {
                                     style: {
diff --git a/frontend/src/component/admin/auth/SsoGroupSettings.tsx b/frontend/src/component/admin/auth/SsoGroupSettings.tsx
index 5e33f44a13..d3154c784b 100644
--- a/frontend/src/component/admin/auth/SsoGroupSettings.tsx
+++ b/frontend/src/component/admin/auth/SsoGroupSettings.tsx
@@ -79,7 +79,7 @@ export const SsoGroupSettings = ({
                         disabled={!data.enableGroupSyncing || disabled}
                         style={{ width: '400px' }}
                         variant='outlined'
-                        size='small'
+                        size='large'
                         required
                     />
                 </Grid>
diff --git a/frontend/src/component/admin/banners/BannerModal/BannerForm.tsx b/frontend/src/component/admin/banners/BannerModal/BannerForm.tsx
index 4645548e3f..bc52a6efeb 100644
--- a/frontend/src/component/admin/banners/BannerModal/BannerForm.tsx
+++ b/frontend/src/component/admin/banners/BannerModal/BannerForm.tsx
@@ -195,7 +195,7 @@ export const BannerForm = ({
                         What type of banner is it?
                     </StyledInputDescription>
                     <StyledSelect
-                        size='small'
+                        size='large'
                         value={variant}
                         onChange={(variant) =>
                             setVariant(variant as BannerVariant)
@@ -208,7 +208,7 @@ export const BannerForm = ({
                         What icon should be displayed on the banner?
                     </StyledInputDescription>
                     <StyledSelect
-                        size='small'
+                        size='large'
                         value={iconOption}
                         onChange={(iconOption) => {
                             setIconOption(iconOption as IconOption);
@@ -312,7 +312,7 @@ export const BannerForm = ({
                         What action should be available in the banner?
                     </StyledInputDescription>
                     <StyledSelect
-                        size='small'
+                        size='large'
                         value={linkOption}
                         onChange={(linkOption) => {
                             setLinkOption(linkOption as LinkOption);
diff --git a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx
index 2dc4d83daf..d60f64bb3f 100644
--- a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx
+++ b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersSelect/GroupFormUsersSelect.tsx
@@ -21,6 +21,10 @@ const StyledOption = styled('div')(({ theme }) => ({
 
 const StyledTags = styled('div')(({ theme }) => ({
     paddingLeft: theme.spacing(1),
+    minWidth: 0,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
 }));
 
 const StyledGroupFormUsersSelect = styled('div')(({ theme }) => ({
@@ -112,7 +116,7 @@ export const GroupFormUsersSelect: FC<IGroupFormUsersSelectProps> = ({
         <StyledGroupFormUsersSelect>
             <AutocompleteVirtual
                 data-testid={UG_USERS_ID}
-                size='small'
+                size='large'
                 limitTags={1}
                 openOnFocus
                 multiple
diff --git a/frontend/src/component/admin/impact-metrics/ImpactMetricsAdmin.tsx b/frontend/src/component/admin/impact-metrics/ImpactMetricsAdmin.tsx
index 92ecdefbc2..9a485f7ec8 100644
--- a/frontend/src/component/admin/impact-metrics/ImpactMetricsAdmin.tsx
+++ b/frontend/src/component/admin/impact-metrics/ImpactMetricsAdmin.tsx
@@ -277,7 +277,7 @@ const ImpactMetricsPage = () => {
                         }
                         disabled={loading || saving}
                         fullWidth
-                        size='small'
+                        size='large'
                         type={hasCredentials && !showUrl ? 'password' : 'text'}
                         slotProps={{
                             input: {
diff --git a/frontend/src/component/admin/license/LicenseForm.tsx b/frontend/src/component/admin/license/LicenseForm.tsx
index 5eb1e7b935..63a4287bb3 100644
--- a/frontend/src/component/admin/license/LicenseForm.tsx
+++ b/frontend/src/component/admin/license/LicenseForm.tsx
@@ -148,7 +148,7 @@ export const LicenseForm = () => {
                         value={token}
                         style={{ width: '100%' }}
                         variant='outlined'
-                        size='small'
+                        size='large'
                         multiline
                         rows={6}
                         required
diff --git a/frontend/src/component/admin/users/AccessOverview/AccessOverviewSelect.tsx b/frontend/src/component/admin/users/AccessOverview/AccessOverviewSelect.tsx
index f4ef50a2d1..27bed33cb3 100644
--- a/frontend/src/component/admin/users/AccessOverview/AccessOverviewSelect.tsx
+++ b/frontend/src/component/admin/users/AccessOverview/AccessOverviewSelect.tsx
@@ -22,7 +22,7 @@ export const AccessOverviewSelect = <T,>({
         renderInput={(params) => (
             <TextField {...params} label={label} fullWidth />
         )}
-        size='small'
+        size='large'
         fullWidth
         {...rest}
     />
diff --git a/frontend/src/component/admin/users/AccessOverview/ProjectAccess/ProjectAccessSection.tsx b/frontend/src/component/admin/users/AccessOverview/ProjectAccess/ProjectAccessSection.tsx
index 64f12c09c4..70691bf959 100644
--- a/frontend/src/component/admin/users/AccessOverview/ProjectAccess/ProjectAccessSection.tsx
+++ b/frontend/src/component/admin/users/AccessOverview/ProjectAccess/ProjectAccessSection.tsx
@@ -98,7 +98,7 @@ export const ProjectAccessSection = ({
                             setSelectedProjectIds(e.target.value as string[])
                         }
                         renderValue={() => projectSelectorLabel}
-                        size='small'
+                        size='large'
                         sx={{ minWidth: 150, maxWidth: 200, flexShrink: 0 }}
                         displayEmpty
                         MenuProps={{
@@ -138,7 +138,7 @@ export const ProjectAccessSection = ({
                             }
                         }}
                         renderValue={() => environmentSelectorLabel}
-                        size='small'
+                        size='large'
                         sx={{ minWidth: 150, maxWidth: 200, flexShrink: 0 }}
                         displayEmpty
                         MenuProps={{
diff --git a/frontend/src/component/admin/users/UsersList/AccessRequestsTable/RoleSelectCell.tsx b/frontend/src/component/admin/users/UsersList/AccessRequestsTable/RoleSelectCell.tsx
index bcbd70cbd9..414c34777a 100644
--- a/frontend/src/component/admin/users/UsersList/AccessRequestsTable/RoleSelectCell.tsx
+++ b/frontend/src/component/admin/users/UsersList/AccessRequestsTable/RoleSelectCell.tsx
@@ -21,7 +21,7 @@ export const RoleSelectCell = ({
 }: IRoleSelectCellProps) => (
     <TextCell>
         <StyledSelect
-            size='small'
+            size='large'
             value={selectedRoleId}
             onChange={(e) => onChange(e.target.value as number)}
             variant='outlined'
diff --git a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
index 991c60332b..0efb6b9025 100644
--- a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
+++ b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
@@ -122,7 +122,7 @@ const ChangePassword = ({
                     helperText={error}
                     onChange={updateField}
                     variant='outlined'
-                    size='small'
+                    size='large'
                 />
                 <TextField
                     label='Confirm password'
@@ -131,7 +131,7 @@ const ChangePassword = ({
                     value={data.confirm}
                     onChange={updateField}
                     variant='outlined'
-                    size='small'
+                    size='large'
                 />
                 <PasswordMatcher
                     started={Boolean(data.password && data.confirm)}
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx
index b27c74d973..835b1ac27a 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx
@@ -200,7 +200,7 @@ export const ChangeRequestAddRequestedApprovers: FC<{
         <StyledBox sx={{ mb: 4 }}>
             <AutocompleteVirtual
                 sx={{ ml: 'auto', width: theme.spacing(40) }}
-                size='small'
+                size='large'
                 limitTags={3}
                 openOnFocus
                 multiple
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/DraftChangeRequestActions/DraftChangeRequestActions.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/DraftChangeRequestActions/DraftChangeRequestActions.tsx
index 8cb6f24d44..a650625215 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/DraftChangeRequestActions/DraftChangeRequestActions.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/DraftChangeRequestActions/DraftChangeRequestActions.tsx
@@ -137,7 +137,7 @@ export const DraftChangeRequestActions: FC<{
         <>
             <AutocompleteVirtual
                 sx={{ ml: 'auto', width: theme.spacing(40) }}
-                size='small'
+                size='large'
                 limitTags={3}
                 openOnFocus
                 multiple
diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
index dce0671e0a..169070a59c 100644
--- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
+++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
@@ -111,7 +111,7 @@ export const AutocompleteBox = ({
                 renderInput={renderCustomInput}
                 getOptionLabel={(value) => value.label}
                 disabled={disabled}
-                size='small'
+                size='large'
                 multiple
             />
         </StyledContainer>
diff --git a/frontend/src/component/common/DateTimePicker/DateTimePicker.tsx b/frontend/src/component/common/DateTimePicker/DateTimePicker.tsx
index f359f8881d..71bf4c0068 100644
--- a/frontend/src/component/common/DateTimePicker/DateTimePicker.tsx
+++ b/frontend/src/component/common/DateTimePicker/DateTimePicker.tsx
@@ -42,7 +42,7 @@ export const DateTimePicker = ({
     return (
         <TextField
             type={inputType}
-            size='small'
+            size='large'
             variant='outlined'
             label={label}
             error={error}
diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx
index c2cb200683..07b97aed49 100644
--- a/frontend/src/component/common/Dialogue/Dialogue.tsx
+++ b/frontend/src/component/common/Dialogue/Dialogue.tsx
@@ -135,7 +135,7 @@ export const Dialogue: React.FC<IDialogue> = ({
                     <ConditionallyRender
                         condition={Boolean(onClose)}
                         show={
-                            <Button onClick={onClose}>
+                            <Button variant='outlined' onClick={onClose}>
                                 {secondaryButtonText || 'No, take me back'}
                             </Button>
                         }
diff --git a/frontend/src/component/common/FormField/FormField.test.tsx b/frontend/src/component/common/FormField/FormField.test.tsx
new file mode 100644
index 0000000000..cf53bd88a5
--- /dev/null
+++ b/frontend/src/component/common/FormField/FormField.test.tsx
@@ -0,0 +1,52 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { expect, test } from 'vitest';
+import { FormField } from './FormField.tsx';
+
+test('associates the static label with the control', () => {
+    render(
+        <FormField label='Email'>
+            <input />
+        </FormField>,
+    );
+
+    // getByLabelText resolves the <label htmlFor> → the id FormField injects
+    // onto the control, so the control is programmatically named.
+    expect(screen.getByLabelText('Email')).toBe(screen.getByRole('textbox'));
+});
+
+test('renders the description and wires it via aria-describedby', () => {
+    render(
+        <FormField label='API token' description='Paste your API token'>
+            <input />
+        </FormField>,
+    );
+
+    const input = screen.getByRole('textbox');
+    const description = screen.getByText('Paste your API token');
+
+    expect(description).toBeInTheDocument();
+    expect(input.getAttribute('aria-describedby')).toContain(description.id);
+});
+
+test("preserves the control's own aria-describedby", () => {
+    render(
+        <FormField label='Email' description='We never share it'>
+            <input aria-describedby='external-help' />
+        </FormField>,
+    );
+
+    expect(
+        screen.getByRole('textbox').getAttribute('aria-describedby'),
+    ).toContain('external-help');
+});
+
+test('forwards data-testid to the field container', () => {
+    render(
+        <FormField label='Email' data-testid='email-field'>
+            <input />
+        </FormField>,
+    );
+
+    expect(screen.getByTestId('email-field')).toBeInTheDocument();
+});
diff --git a/frontend/src/component/common/FormField/FormField.tsx b/frontend/src/component/common/FormField/FormField.tsx
new file mode 100644
index 0000000000..2bfbe37980
--- /dev/null
+++ b/frontend/src/component/common/FormField/FormField.tsx
@@ -0,0 +1,93 @@
+import { Children, cloneElement, isValidElement, useId } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { styled } from '@mui/material';
+
+const StyledFormField = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: theme.spacing(2),
+    width: '100%',
+}));
+
+const StyledLabel = styled('label')(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+    color: theme.palette.text.primary,
+}));
+
+const StyledDescription = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.secondary,
+}));
+
+// Gap before the control; label + description stay flush together above it.
+const StyledControl = styled('div')(({ theme }) => ({
+    marginTop: theme.spacing(1),
+}));
+
+interface IFormFieldProps {
+    /** The field's property name — bold, shown above the control. */
+    label: ReactNode;
+    /** Optional helper/description text shown under the label, above the control. */
+    description?: ReactNode;
+    /** The control. Its `label` prop (floating label) should be omitted. */
+    children: ReactElement;
+    /** Optional test id on the field container (e.g. for e2e click targets). */
+    'data-testid'?: string;
+}
+
+/**
+ * A form field with a static label above the control (replacing MUI's floating
+ * label), an optional description, and the control itself. Wires `htmlFor`/`id`
+ * and `aria-describedby` so the label and description are associated with the
+ * control for accessibility.
+ */
+/**
+ * The label's element id, derived from the control's `id`. A `<label htmlFor>`
+ * names native inputs, but not the non-labelable element a MUI `Select` /
+ * radio group / switch exposes (e.g. a `div[role=combobox]`); those controls
+ * point their `aria-labelledby` at this id instead. Keep in sync with how
+ * controls derive it (see `GeneralSelect`).
+ */
+export const formFieldLabelId = (controlId: string) => `${controlId}-label`;
+
+export const FormField = ({
+    label,
+    description,
+    children,
+    'data-testid': dataTestId,
+}: IFormFieldProps) => {
+    const id = useId();
+    const descriptionId = description ? `${id}-description` : undefined;
+
+    const child = Children.only(children);
+    const control = isValidElement(child)
+        ? cloneElement(child as ReactElement<Record<string, unknown>>, {
+              id,
+              'aria-describedby':
+                  [
+                      descriptionId,
+                      (child.props as Record<string, unknown>)[
+                          'aria-describedby'
+                      ],
+                  ]
+                      .filter(Boolean)
+                      .join(' ') || undefined,
+          })
+        : child;
+
+    return (
+        <StyledFormField data-testid={dataTestId}>
+            <StyledLabel id={formFieldLabelId(id)} htmlFor={id}>
+                {label}
+            </StyledLabel>
+            {description ? (
+                <StyledDescription id={descriptionId}>
+                    {description}
+                </StyledDescription>
+            ) : null}
+            <StyledControl>{control}</StyledControl>
+        </StyledFormField>
+    );
+};
diff --git a/frontend/src/component/common/FormGroup/FormGroup.tsx b/frontend/src/component/common/FormGroup/FormGroup.tsx
new file mode 100644
index 0000000000..db3dd97685
--- /dev/null
+++ b/frontend/src/component/common/FormGroup/FormGroup.tsx
@@ -0,0 +1,22 @@
+import { styled } from '@mui/material';
+
+/**
+ * A bordered, slightly elevated container that visually groups related form
+ * controls (e.g. a repeatable "add value" block with its inputs, action button
+ * and the resulting items). Wrap `FormField`s and their output inside it.
+ */
+export const FormGroup = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    padding: theme.spacing(1.5),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadiusMedium,
+    backgroundColor: theme.palette.background.elevation1,
+    // Spacing between members is owned by `gap`; drop members' own bottom
+    // margins (e.g. FormField's) so it isn't doubled up. Doubled selector
+    // raises specificity above the child's own rule.
+    '&& > *': {
+        marginBottom: 0,
+    },
+}));
diff --git a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
index 61e896f01b..0a3a9f92fb 100644
--- a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
+++ b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
@@ -13,6 +13,7 @@ import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutl
 import type { SxProps } from '@mui/system';
 import type { Theme } from '@mui/material/styles';
 import { visuallyHidden } from '@mui/utils';
+import { formFieldLabelId } from 'component/common/FormField/FormField';
 
 export interface ISelectOption {
     key: string;
@@ -47,12 +48,18 @@ export interface IGeneralSelectProps<T extends string = string>
     defaultValue?: string;
     visuallyHideLabel?: boolean;
     variant?: 'outlined' | 'filled' | 'standard';
+    /** Shown (muted) when no option is selected. */
+    placeholder?: string;
 }
 
 const StyledFormControl = styled(FormControl)({
     maxWidth: '100%',
 });
 
+const StyledPlaceholder = styled('span')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+}));
+
 const toMenuItem = (option: ISelectOption) => (
     <MenuItem
         sx={option.sx}
@@ -80,17 +87,43 @@ function GeneralSelect<T extends string = string>({
     fullWidth,
     visuallyHideLabel,
     labelId,
+    placeholder,
     ...rest
 }: IGeneralSelectProps<T>) {
+    // MUI names the combobox via `labelId` (a `<label htmlFor>` can't name the
+    // `div[role=combobox]`). When wrapped in a FormField the label has no own
+    // `label` text here, so point `labelId` at FormField's label element,
+    // derived from the injected `id`. An explicit `labelId` still wins.
+    const resolvedLabelId = labelId ?? (id ? formFieldLabelId(id) : undefined);
     const onSelectChange = (event: SelectChangeEvent) => {
         event.preventDefault();
         onChange(String(event.target.value) as T);
     };
 
+    const flatOptions = isSelectOptionGroup(options)
+        ? options.flatMap((group) => group.options)
+        : options;
+    const renderValue = placeholder
+        ? (selected: unknown) => {
+              // Show the placeholder only when nothing is actually selected.
+              // Keying off the matched option (not its label) avoids treating a
+              // genuinely-selected option that happens to have no `label` as empty.
+              const selectedOption = flatOptions.find(
+                  (option) => option.key === String(selected),
+              );
+              return selectedOption ? (
+                  selectedOption.label
+              ) : (
+                  <StyledPlaceholder>{placeholder}</StyledPlaceholder>
+              );
+          }
+        : undefined;
+
     return (
         <StyledFormControl
             variant={variant}
-            size='small'
+            // old MUI `small` (~40px) maps to `large` (32px) on the v2 control scale
+            size='large'
             classes={classes}
             fullWidth={fullWidth}
         >
@@ -98,7 +131,7 @@ function GeneralSelect<T extends string = string>({
                 <InputLabel
                     sx={visuallyHideLabel ? visuallyHidden : null}
                     htmlFor={id}
-                    id={labelId}
+                    id={resolvedLabelId}
                 >
                     {label}
                 </InputLabel>
@@ -112,8 +145,10 @@ function GeneralSelect<T extends string = string>({
                 id={id}
                 value={value ?? ''}
                 autoWidth
+                displayEmpty={Boolean(placeholder)}
+                renderValue={renderValue}
                 IconComponent={KeyboardArrowDownOutlined}
-                labelId={labelId}
+                labelId={resolvedLabelId}
                 {...rest}
             >
                 {isSelectOptionGroup(options)
diff --git a/frontend/src/component/common/Input/Input.tsx b/frontend/src/component/common/Input/Input.tsx
index e3c37eda5f..622f462762 100644
--- a/frontend/src/component/common/Input/Input.tsx
+++ b/frontend/src/component/common/Input/Input.tsx
@@ -29,7 +29,8 @@ const Input = ({
     className,
     value,
     onChange,
-    size = 'small',
+    // old MUI `small` (~40px) maps to `large` (32px) on the v2 control scale
+    size = 'large',
     slotProps,
     ...rest
 }: IInputProps) => {
diff --git a/frontend/src/component/common/InputListField/InputListField.tsx b/frontend/src/component/common/InputListField/InputListField.tsx
index a8991d29a2..7845578095 100644
--- a/frontend/src/component/common/InputListField/InputListField.tsx
+++ b/frontend/src/component/common/InputListField/InputListField.tsx
@@ -46,7 +46,7 @@ export const InputListField: FC<IInputListFieldProps> = ({
             onChange={handleChange}
             style={{ width: '100%' }}
             variant='outlined'
-            size='small'
+            size='large'
         />
     );
 };
diff --git a/frontend/src/component/common/MultipleRoleSelect/MultipleRoleSelect.tsx b/frontend/src/component/common/MultipleRoleSelect/MultipleRoleSelect.tsx
index 974a18412b..e9ed73f00e 100644
--- a/frontend/src/component/common/MultipleRoleSelect/MultipleRoleSelect.tsx
+++ b/frontend/src/component/common/MultipleRoleSelect/MultipleRoleSelect.tsx
@@ -28,6 +28,8 @@ interface IMultipleRoleSelectProps
     value: IRole[];
     setValue: (role: IRole[]) => void;
     required?: boolean;
+    /** Floating label. Pass '' to suppress it (e.g. when wrapped in FormField). */
+    label?: string;
 }
 
 function sortItems<T extends { name: string; type: string }>(items: T[]): T[] {
@@ -54,6 +56,7 @@ export const MultipleRoleSelect = ({
     value,
     setValue,
     required,
+    label = 'Role',
     slotProps,
     ...rest
 }: IMultipleRoleSelectProps) => {
@@ -91,12 +94,13 @@ export const MultipleRoleSelect = ({
                             },
                         },
                     },
+                    chip: { size: 'small' },
                     ...slotProps,
                 }}
                 multiple
                 disableCloseOnSelect
                 openOnFocus
-                size='small'
+                size='large'
                 value={value}
                 groupBy={(option) => {
                     return option.type === 'project'
@@ -108,7 +112,11 @@ export const MultipleRoleSelect = ({
                 renderOption={renderRoleOption}
                 getOptionLabel={(option) => option.name}
                 renderInput={(params) => (
-                    <TextField {...params} label='Role' required={required} />
+                    <TextField
+                        {...params}
+                        label={label || undefined}
+                        required={required}
+                    />
                 )}
                 {...rest}
             />
diff --git a/frontend/src/component/common/PasswordField/PasswordField.tsx b/frontend/src/component/common/PasswordField/PasswordField.tsx
index cc82b59cdb..a624e32caa 100644
--- a/frontend/src/component/common/PasswordField/PasswordField.tsx
+++ b/frontend/src/component/common/PasswordField/PasswordField.tsx
@@ -24,7 +24,7 @@ const PasswordField: FC<TextFieldProps> = ({ ...rest }) => {
     return (
         <StyledAutofillTextField
             variant='outlined'
-            size='small'
+            size='large'
             type={showPassword ? 'text' : 'password'}
             slotProps={{
                 input: {
diff --git a/frontend/src/component/common/ProjectSelect/ProjectSelect.tsx b/frontend/src/component/common/ProjectSelect/ProjectSelect.tsx
index d5df5bff17..0c2fff03ec 100644
--- a/frontend/src/component/common/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/component/common/ProjectSelect/ProjectSelect.tsx
@@ -100,21 +100,19 @@ export const ProjectSelect: FC<IProjectSelectProps> = forwardRef(
 
         return (
             <Autocomplete
+                id='projects'
                 {...props}
                 ref={ref}
                 disablePortal
-                id='projects'
                 limitTags={limitTags}
                 multiple={!isAllProjects}
                 options={projectsOptions}
                 sx={sx}
-                renderInput={(params) => (
-                    <TextField {...params} label='Projects' />
-                )}
+                renderInput={(params) => <TextField {...params} />}
                 renderOption={renderOption}
                 getOptionLabel={({ label }) => label}
                 disableCloseOnSelect
-                size='small'
+                size='large'
                 disabled={disabled}
                 value={
                     isAllProjects
diff --git a/frontend/src/component/common/RoleSelect/RoleSelect.tsx b/frontend/src/component/common/RoleSelect/RoleSelect.tsx
index f7a276b27e..9a51ff939f 100644
--- a/frontend/src/component/common/RoleSelect/RoleSelect.tsx
+++ b/frontend/src/component/common/RoleSelect/RoleSelect.tsx
@@ -50,7 +50,7 @@ export const RoleSelect = ({
         <>
             <Autocomplete
                 openOnFocus
-                size='small'
+                size='large'
                 value={value}
                 onChange={(_, role) => setValue(role || null)}
                 options={roles}
diff --git a/frontend/src/component/common/SteadyWidthText/SteadyWidthText.tsx b/frontend/src/component/common/SteadyWidthText/SteadyWidthText.tsx
new file mode 100644
index 0000000000..2ff6a739dc
--- /dev/null
+++ b/frontend/src/component/common/SteadyWidthText/SteadyWidthText.tsx
@@ -0,0 +1,44 @@
+import { styled } from '@mui/material';
+import type { FC, ReactNode } from 'react';
+
+const Stack = styled('span')({
+    display: 'inline-grid',
+});
+
+// Invisible bold copy that reserves the width. Always the heaviest weight the
+// text can take, so the box never needs to grow when the visible text bolds.
+const Ghost = styled('span')({
+    gridArea: '1 / 1',
+    visibility: 'hidden',
+});
+
+// The text that actually shows; inherits whatever weight the surrounding
+// context applies (e.g. 500 normally, 700 when a tab is selected).
+const Visible = styled('span')({
+    gridArea: '1 / 1',
+});
+
+interface ISteadyWidthTextProps {
+    children: ReactNode;
+    /** Weight to reserve horizontal space for. Defaults to bold (700). */
+    reserveWeight?: number;
+}
+
+/**
+ * Renders text so its box is always sized for its bold width, regardless of the
+ * weight actually applied by the surrounding context. Prevents the layout shift
+ * that happens when font-weight toggles (active tabs, nav items, segmented
+ * controls, …). The text stays content-width — it only reserves its own bold
+ * width, nothing is hard-coded.
+ */
+export const SteadyWidthText: FC<ISteadyWidthTextProps> = ({
+    children,
+    reserveWeight = 700,
+}) => (
+    <Stack>
+        <Ghost aria-hidden style={{ fontWeight: reserveWeight }}>
+            {children}
+        </Ghost>
+        <Visible>{children}</Visible>
+    </Stack>
+);
diff --git a/frontend/src/component/common/select.tsx b/frontend/src/component/common/select.tsx
index aabb1a7bd0..5dcebe540b 100644
--- a/frontend/src/component/common/select.tsx
+++ b/frontend/src/component/common/select.tsx
@@ -7,6 +7,7 @@ import {
     type SelectChangeEvent,
 } from '@mui/material';
 import { SELECT_ITEM_ID } from 'utils/testIds';
+import { formFieldLabelId } from 'component/common/FormField/FormField';
 
 export interface ISelectOption {
     key: string;
@@ -15,7 +16,9 @@ export interface ISelectOption {
 }
 export interface ISelectMenuProps {
     name: string;
-    id: string;
+    // Optional: when wrapped in a FormField the id is injected at runtime; the
+    // label/`labelId` wiring below tolerates an absent id.
+    id?: string;
     value?: string;
     label?: string;
     options: ISelectOption[];
@@ -40,6 +43,11 @@ const SelectMenu: React.FC<ISelectMenuProps> = ({
     formControlStyles = {},
     ...rest
 }) => {
+    // MUI names the combobox via `labelId`, not a `<label htmlFor>` on the
+    // combobox div. Point it at the label element (the own InputLabel below, or
+    // a wrapping FormField's label, both derived from `id`). Guard against a
+    // falsy `id` so we don't emit a dangling `aria-labelledby`.
+    const labelId = id ? formFieldLabelId(id) : undefined;
     const renderSelectItems = () =>
         options.map((option) => (
             <MenuItem
@@ -55,18 +63,23 @@ const SelectMenu: React.FC<ISelectMenuProps> = ({
     return (
         <FormControl
             variant='outlined'
-            size='small'
+            size='large'
             classes={classes}
             style={formControlStyles}
         >
-            <InputLabel htmlFor={id}>{label}</InputLabel>
+            {label ? (
+                <InputLabel id={labelId} htmlFor={id}>
+                    {label}
+                </InputLabel>
+            ) : null}
             <Select
                 name={name}
                 disabled={disabled}
                 onChange={onChange}
                 className={className}
-                label={label}
+                label={label || undefined}
                 id={id}
+                labelId={labelId}
                 value={value}
                 {...rest}
             >
diff --git a/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx b/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
index 1c7d0fc26e..e2cd3c4070 100644
--- a/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
+++ b/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
@@ -8,11 +8,11 @@ const StyledContainer = styled('ul')(({ theme }) => ({
     gap: theme.spacing(1),
     padding: theme.spacing(2),
     margin: 0,
-    marginBottom: '1rem !important',
     maxHeight: '412px',
     overflow: 'auto',
     borderRadius: theme.shape.borderRadiusMedium,
     border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
     '&:empty': {
         display: 'none',
     },
diff --git a/frontend/src/component/context/ContextForm/ContextForm.tsx b/frontend/src/component/context/ContextForm/ContextForm.tsx
index 3316d6c916..1325d59d32 100644
--- a/frontend/src/component/context/ContextForm/ContextForm.tsx
+++ b/frontend/src/component/context/ContextForm/ContextForm.tsx
@@ -5,9 +5,10 @@ import {
     Switch,
     Typography,
     styled,
-    type Theme,
     Link,
 } from '@mui/material';
+import { FormField } from 'component/common/FormField/FormField';
+import { FormGroup } from 'component/common/FormGroup/FormGroup';
 import type React from 'react';
 import { useState, useEffect } from 'react';
 import Add from '@mui/icons-material/Add';
@@ -43,24 +44,17 @@ const StyledForm = styled('form')({
     height: '100%',
 });
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
-const styledInput = (theme: Theme) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-});
-
-const StyledTagContainer = styled('div')(({ theme }) => ({
+const StyledValueRow = styled('div')(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: '1fr auto',
+    gridTemplateColumns: '1fr 2fr auto',
     gap: theme.spacing(1),
-    marginBottom: theme.spacing(2),
-}));
-
-const StyledInputHeader = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(0.5),
+    // Top-align so a field's error text extends downward without nudging its
+    // neighbours out of line.
+    alignItems: 'start',
+    // members align via the grid; drop their own bottom margins (FormField's)
+    '&& > *': {
+        marginBottom: 0,
+    },
 }));
 
 const StyledSwitchContainer = styled('div')({
@@ -157,115 +151,136 @@ export const ContextForm: React.FC<IContextForm> = ({
     return (
         <StyledForm onSubmit={onSubmit}>
             <div>
-                <StyledInputDescription>
-                    What is your context name?
-                </StyledInputDescription>
-                <Input
-                    sx={styledInput}
+                <FormField
                     label='Context name'
-                    value={contextName}
-                    disabled={mode === 'Edit'}
-                    onChange={(e) => setContextName(e.target.value.trim())}
-                    error={Boolean(errors.name)}
-                    errorText={errors.name}
-                    onFocus={() => clearErrors('name')}
-                    onBlur={validateContext}
-                    autoFocus
-                />
-                <StyledInputDescription>
-                    What is this context for?
-                </StyledInputDescription>
-                <TextField
-                    sx={styledInput}
-                    label='Context description (optional)'
-                    variant='outlined'
-                    multiline
-                    maxRows={4}
-                    value={contextDesc}
-                    size='small'
-                    onChange={(e) => setContextDesc(e.target.value)}
-                />
-                <StyledInputDescription>
-                    Which values do you want to allow?
-                </StyledInputDescription>
-                <StyledTagContainer>
-                    <TextField
-                        label='Legal value (optional)'
-                        name='value'
-                        sx={{ gridColumn: 1 }}
-                        value={value}
-                        error={Boolean(errors.tag)}
-                        helperText={errors.tag}
-                        variant='outlined'
-                        size='small'
-                        onChange={(e) => setValue(e.target.value)}
-                        onKeyPress={(e) => onKeyDown(e)}
-                        onBlur={() => setValueFocused(false)}
-                        onFocus={() => setValueFocused(true)}
-                        slotProps={{
-                            htmlInput: { maxLength: 100 },
-                        }}
+                    description='What is your context name?'
+                >
+                    <Input
+                        fullWidth
+                        label=''
+                        value={contextName}
+                        disabled={mode === 'Edit'}
+                        onChange={(e) => setContextName(e.target.value.trim())}
+                        error={Boolean(errors.name)}
+                        errorText={errors.name}
+                        onFocus={() => clearErrors('name')}
+                        onBlur={validateContext}
+                        autoFocus
                     />
+                </FormField>
+                <FormField
+                    label='Context description (optional)'
+                    description='What is this context for?'
+                >
                     <TextField
-                        label='Value description (optional)'
-                        sx={{ gridColumn: 1 }}
-                        value={valueDesc}
-                        variant='outlined'
-                        size='small'
-                        onChange={(e) => setValueDesc(e.target.value)}
-                        onKeyPress={(e) => onKeyDown(e)}
-                        onBlur={() => setValueFocused(false)}
-                        onFocus={() => setValueFocused(true)}
-                        slotProps={{
-                            htmlInput: { maxLength: 100 },
-                        }}
-                    />
-                    <Button
-                        sx={{ gridColumn: 2 }}
-                        startIcon={<Add />}
-                        onClick={addLegalValue}
+                        fullWidth
                         variant='outlined'
-                        color='primary'
-                        disabled={!value.trim() || isDuplicateValue}
-                    >
-                        Add
-                    </Button>
-                </StyledTagContainer>
-                <ContextFormChipList>
-                    {legalValues.map((legalValue) => {
-                        return (
-                            <ContextFormChip
-                                key={legalValue.value}
-                                label={legalValue.value}
-                                description={legalValue.description}
-                                onRemove={() => removeLegalValue(legalValue)}
-                            />
-                        );
-                    })}
-                </ContextFormChipList>
-                <StyledInputHeader>Custom stickiness</StyledInputHeader>
-                <p>
-                    By enabling stickiness on this context field you can use it
-                    together with the flexible-rollout strategy. This will
-                    guarantee a consistent behavior for specific values of this
-                    context field. PS! Not all client SDK's support this feature
-                    yet!{' '}
-                    <Link
-                        href='https://docs.getunleash.io/concepts/stickiness'
-                        target='_blank'
-                        rel='noreferrer'
-                    >
-                        Read more
-                    </Link>
-                </p>
-                <StyledSwitchContainer>
-                    <Switch
-                        checked={stickiness}
-                        value={stickiness}
-                        onChange={() => setStickiness(!stickiness)}
+                        multiline
+                        maxRows={4}
+                        value={contextDesc}
+                        size='large'
+                        onChange={(e) => setContextDesc(e.target.value)}
                     />
-                    <Typography>{stickiness ? 'On' : 'Off'}</Typography>
-                </StyledSwitchContainer>
+                </FormField>
+                <FormField
+                    label='Legal values (optional)'
+                    description='Which values do you want to allow?'
+                >
+                    <FormGroup>
+                        <StyledValueRow>
+                            <FormField label='Legal value'>
+                                <TextField
+                                    name='value'
+                                    fullWidth
+                                    value={value}
+                                    error={Boolean(errors.tag)}
+                                    helperText={errors.tag}
+                                    variant='outlined'
+                                    size='large'
+                                    onChange={(e) => setValue(e.target.value)}
+                                    onKeyPress={(e) => onKeyDown(e)}
+                                    onBlur={() => setValueFocused(false)}
+                                    onFocus={() => setValueFocused(true)}
+                                    slotProps={{
+                                        htmlInput: { maxLength: 100 },
+                                    }}
+                                />
+                            </FormField>
+                            <FormField label='Value description'>
+                                <TextField
+                                    fullWidth
+                                    value={valueDesc}
+                                    variant='outlined'
+                                    size='large'
+                                    onChange={(e) =>
+                                        setValueDesc(e.target.value)
+                                    }
+                                    onKeyPress={(e) => onKeyDown(e)}
+                                    onBlur={() => setValueFocused(false)}
+                                    onFocus={() => setValueFocused(true)}
+                                    slotProps={{
+                                        htmlInput: { maxLength: 100 },
+                                    }}
+                                />
+                            </FormField>
+                            {/* Spacer label aligns the button with the inputs,
+                                not the labels above them. */}
+                            <FormField label={' '}>
+                                <Button
+                                    startIcon={<Add />}
+                                    onClick={addLegalValue}
+                                    variant='outlined'
+                                    color='primary'
+                                    disabled={!value.trim() || isDuplicateValue}
+                                >
+                                    Add
+                                </Button>
+                            </FormField>
+                        </StyledValueRow>
+                        {legalValues.length > 0 ? (
+                            <ContextFormChipList>
+                                {legalValues.map((legalValue) => (
+                                    <ContextFormChip
+                                        key={legalValue.value}
+                                        label={legalValue.value}
+                                        description={legalValue.description}
+                                        onRemove={() =>
+                                            removeLegalValue(legalValue)
+                                        }
+                                    />
+                                ))}
+                            </ContextFormChipList>
+                        ) : null}
+                    </FormGroup>
+                </FormField>
+                <FormField
+                    label='Custom stickiness'
+                    description={
+                        <>
+                            By enabling stickiness on this context field you can
+                            use it together with the flexible-rollout strategy.
+                            This will guarantee a consistent behavior for
+                            specific values of this context field. PS! Not all
+                            client SDK's support this feature yet!{' '}
+                            <Link
+                                href='https://docs.getunleash.io/concepts/stickiness'
+                                target='_blank'
+                                rel='noreferrer'
+                            >
+                                Read more
+                            </Link>
+                        </>
+                    }
+                >
+                    <StyledSwitchContainer>
+                        <Switch
+                            checked={stickiness}
+                            value={stickiness}
+                            onChange={() => setStickiness(!stickiness)}
+                        />
+                        <Typography>{stickiness ? 'On' : 'Off'}</Typography>
+                    </StyledSwitchContainer>
+                </FormField>
                 {mode === 'Edit' ? (
                     <ContextFieldUsage contextName={contextName} />
                 ) : null}
diff --git a/frontend/src/component/counters/ExploreCounters/ExploreCounterFilter.tsx b/frontend/src/component/counters/ExploreCounters/ExploreCounterFilter.tsx
index 7bf4d78504..ad62aa1ae1 100644
--- a/frontend/src/component/counters/ExploreCounters/ExploreCounterFilter.tsx
+++ b/frontend/src/component/counters/ExploreCounters/ExploreCounterFilter.tsx
@@ -39,7 +39,7 @@ export const ExploreCounterFilter = ({
             <Grid size={{ xs: 12, md: 6 }}>
                 <Grid container spacing={2}>
                     <FormControl>
-                        <InputLabel id='counter-label' size='small'>
+                        <InputLabel id='counter-label' size='large'>
                             Counter
                         </InputLabel>
                         <Select
@@ -49,7 +49,7 @@ export const ExploreCounterFilter = ({
                             value={counter}
                             onChange={counterChanged}
                             variant='outlined'
-                            size='small'
+                            size='large'
                             sx={{ width: 200, maxWidth: '100%' }}
                         >
                             {counterNames?.map((option) => (
diff --git a/frontend/src/component/counters/ExploreCounters/SelectCounterLabel.tsx b/frontend/src/component/counters/ExploreCounters/SelectCounterLabel.tsx
index 7c822883f8..5a2598713c 100644
--- a/frontend/src/component/counters/ExploreCounters/SelectCounterLabel.tsx
+++ b/frontend/src/component/counters/ExploreCounters/SelectCounterLabel.tsx
@@ -49,7 +49,7 @@ export const SelectCounterLabel = ({
     return (
         <>
             <FormControl>
-                <InputLabel id='labels-label' size='small'>
+                <InputLabel id='labels-label' size='large'>
                     Label
                 </InputLabel>
                 <Select
@@ -59,7 +59,7 @@ export const SelectCounterLabel = ({
                     value={label}
                     onChange={labelChanged}
                     variant='outlined'
-                    size='small'
+                    size='large'
                     sx={{ width: 200, maxWidth: '100%' }}
                 >
                     {labels
@@ -73,7 +73,7 @@ export const SelectCounterLabel = ({
             </FormControl>
             {label ? (
                 <FormControl>
-                    <InputLabel id='label-value-label' size='small'>
+                    <InputLabel id='label-value-label' size='large'>
                         Label value
                     </InputLabel>
                     <Select
@@ -83,7 +83,7 @@ export const SelectCounterLabel = ({
                         value={labelValue}
                         onChange={labelValueChanged}
                         variant='outlined'
-                        size='small'
+                        size='large'
                         sx={{ width: 200, maxWidth: '100%' }}
                     >
                         <MenuItem key='all' value=''>
diff --git a/frontend/src/component/environments/EnvironmentForm/ChangeRequestSelector.tsx b/frontend/src/component/environments/EnvironmentForm/ChangeRequestSelector.tsx
index bddf0f98ee..ebe4b8605a 100644
--- a/frontend/src/component/environments/EnvironmentForm/ChangeRequestSelector.tsx
+++ b/frontend/src/component/environments/EnvironmentForm/ChangeRequestSelector.tsx
@@ -7,6 +7,7 @@ import {
 } from '@mui/material';
 import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
 import GeneralSelect from '../../common/GeneralSelect/GeneralSelect.tsx';
+import { FormField } from 'component/common/FormField/FormField';
 import { useTheme } from '@mui/material/styles';
 
 interface IEnvironmentChangeRequestProps {
@@ -23,11 +24,6 @@ const StyledRadioButtonGroup = styled('div')({
     flexDirection: 'column',
 });
 
-const StyledRequiredApprovals = styled('p')(({ theme }) => ({
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(0.5),
-}));
-
 const useApprovalOptions = () => {
     const theme = useTheme();
     const approvalOptions = Array.from(Array(10).keys())
@@ -76,13 +72,9 @@ export const ChangeRequestSelector = ({
                 </StyledRadioButtonGroup>
             </StyledRadioGroup>
             {value ? (
-                <>
-                    <StyledRequiredApprovals>
-                        Required approvals
-                    </StyledRequiredApprovals>
+                <FormField label='Required approvals'>
                     <GeneralSelect
-                        label='Set required approvals for the current environment'
-                        visuallyHideLabel
+                        label=''
                         sx={{ width: '160px' }}
                         options={approvalOptions}
                         value={value ? String(value) : undefined}
@@ -90,7 +82,7 @@ export const ChangeRequestSelector = ({
                         IconComponent={KeyboardArrowDownOutlined}
                         fullWidth
                     />
-                </>
+                </FormField>
             ) : null}
         </FormControl>
     );
diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
index 583b4474fc..fa74366726 100644
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
+++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
@@ -1,6 +1,7 @@
 import { Box, Button, styled } from '@mui/material';
 import type React from 'react';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import { EnvironmentTypeSelector } from './EnvironmentTypeSelector.tsx';
 import { ChangeRequestSelector } from './ChangeRequestSelector.tsx';
 import { trim } from 'component/common/util';
@@ -33,15 +34,6 @@ const StyledContainer = styled('div')({
     maxWidth: '440px',
 });
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
-const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
 const StyledButtonContainer = styled('div')(({ theme }) => ({
     marginTop: 'auto',
     display: 'flex',
@@ -79,39 +71,43 @@ const EnvironmentForm: React.FC<IEnvironmentForm> = ({
     return (
         <StyledForm onSubmit={handleSubmit}>
             <StyledContainer>
-                <StyledInputDescription>
-                    What is your environment name? (Can't be changed later)
-                </StyledInputDescription>
-                <StyledInput
+                <FormField
                     label='Environment name'
-                    value={name}
-                    onChange={(e) => setName(trim(e.target.value))}
-                    error={Boolean(errors.name)}
-                    errorText={errors.name}
-                    onFocus={() => clearErrors()}
-                    onBlur={validateEnvironmentName}
-                    disabled={mode === 'Edit'}
-                    autoFocus
-                />
+                    description="What is your environment name? (Can't be changed later)"
+                >
+                    <Input
+                        fullWidth
+                        label=''
+                        value={name}
+                        onChange={(e) => setName(trim(e.target.value))}
+                        error={Boolean(errors.name)}
+                        errorText={errors.name}
+                        onFocus={() => clearErrors()}
+                        onBlur={validateEnvironmentName}
+                        disabled={mode === 'Edit'}
+                        autoFocus
+                    />
+                </FormField>
 
-                <StyledInputDescription>
-                    What type of environment do you want to create?
-                </StyledInputDescription>
-                <EnvironmentTypeSelector
-                    onChange={(e) => setType(e.currentTarget.value)}
-                    value={type}
-                />
+                <FormField
+                    label='Environment type'
+                    description='What type of environment do you want to create?'
+                >
+                    <EnvironmentTypeSelector
+                        onChange={(e) => setType(e.currentTarget.value)}
+                        value={type}
+                    />
+                </FormField>
 
-                <>
-                    <StyledInputDescription sx={{ mt: 2 }}>
-                        Would you like to predefine change requests for this
-                        environment?
-                    </StyledInputDescription>
+                <FormField
+                    label='Change requests'
+                    description='Would you like to predefine change requests for this environment?'
+                >
                     <ChangeRequestSelector
                         onChange={setRequiredApprovals}
                         value={requiredApprovals}
                     />
-                </>
+                </FormField>
             </StyledContainer>
 
             <LimitContainer>{Limit}</LimitContainer>
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
index c534479104..ace118ac87 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
@@ -15,6 +15,7 @@ import useToast from 'hooks/useToast';
 import { type FormEvent, useEffect, useState } from 'react';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import type {
     IEnvironment,
     IEnvironmentClonePayload,
@@ -38,25 +39,11 @@ const StyledForm = styled('form')(() => ({
     height: '100%',
 }));
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    display: 'flex',
-    color: theme.palette.text.primary,
-    marginBottom: theme.spacing(1),
-    '&:not(:first-of-type)': {
-        marginTop: theme.spacing(4),
-    },
-}));
-
 const StyledInputSecondaryDescription = styled('p')(({ theme }) => ({
     color: theme.palette.text.secondary,
     marginBottom: theme.spacing(1),
 }));
 
-const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    maxWidth: theme.spacing(50),
-}));
-
 const StyledSecondaryContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
     backgroundColor: theme.palette.background.elevation2,
@@ -244,94 +231,106 @@ export const EnvironmentCloneModal = ({
             >
                 <StyledForm onSubmit={handleSubmit}>
                     <div>
-                        <StyledInputDescription>
-                            What is your new environment name? (Can't be changed
-                            later)
-                        </StyledInputDescription>
-                        <StyledInput
-                            autoFocus
+                        <FormField
                             label='Environment name'
-                            error={Boolean(errors.name)}
-                            errorText={errors.name}
-                            value={name}
-                            onChange={(e) => onSetName(e.target.value)}
-                            required
-                        />
-                        <StyledInputDescription>
-                            What type of environment do you want to create?
-                        </StyledInputDescription>
-                        <EnvironmentTypeSelector
-                            onChange={(e) => setType(e.currentTarget.value)}
-                            value={type}
-                        />
-                        <StyledInputDescription>
-                            Select which projects you want to clone the
-                            environment configuration in?
-                            <HelpIcon tooltip='The cloned environment will keep the feature flag state for the selected projects, where it will be enabled by default.' />
-                        </StyledInputDescription>
-                        <EnvironmentProjectSelect
-                            projects={projects}
-                            setProjects={setProjects}
-                        />
-                        <StyledInputDescription>
-                            Keep the users permission for this environment?
-                        </StyledInputDescription>
-                        <StyledInputSecondaryDescription>
-                            If you turn it off, the permission for this
-                            environment across all projects and feature flags
-                            will remain only for admin and editor roles.
-                        </StyledInputSecondaryDescription>
-                        <FormControlLabel
-                            label={clonePermissions ? 'Yes' : 'No'}
-                            control={
-                                <Switch
-                                    onChange={(e) =>
-                                        setClonePermissions(e.target.checked)
-                                    }
-                                    checked={clonePermissions}
-                                />
+                            description="What is your new environment name? (Can't be changed later)"
+                        >
+                            <Input
+                                fullWidth
+                                autoFocus
+                                label=''
+                                error={Boolean(errors.name)}
+                                errorText={errors.name}
+                                value={name}
+                                onChange={(e) => onSetName(e.target.value)}
+                                required
+                            />
+                        </FormField>
+                        <FormField
+                            label='Environment type'
+                            description='What type of environment do you want to create?'
+                        >
+                            <EnvironmentTypeSelector
+                                onChange={(e) => setType(e.currentTarget.value)}
+                                value={type}
+                            />
+                        </FormField>
+                        <FormField
+                            label='Projects'
+                            description={
+                                <>
+                                    Select which projects you want to clone the
+                                    environment configuration in?
+                                    <HelpIcon tooltip='The cloned environment will keep the feature flag state for the selected projects, where it will be enabled by default.' />
+                                </>
                             }
-                        />
-                        <StyledSecondaryContainer>
-                            <StyledInputDescription>
-                                API Token
-                            </StyledInputDescription>
-                            <StyledInputSecondaryDescription>
-                                In order to connect your SDKs to your newly
-                                cloned environment, you will also need an API
-                                token.{' '}
-                                <Link
-                                    href='https://docs.getunleash.io/concepts/api-tokens-and-client-keys'
-                                    target='_blank'
-                                    rel='noreferrer'
-                                >
-                                    Read more about API tokens
-                                </Link>
-                                .
-                            </StyledInputSecondaryDescription>
-                            <FormControl>
-                                <RadioGroup
-                                    value={apiTokenGeneration}
-                                    onChange={(e) =>
-                                        setApiTokenGeneration(
-                                            e.target
-                                                .value as APITokenGeneration,
-                                        )
-                                    }
-                                    name='api-token-generation'
-                                >
-                                    <FormControlLabel
-                                        value={APITokenGeneration.LATER}
-                                        control={<Radio />}
-                                        label='I want to generate an API token later'
-                                    />
-                                    <FormControlLabel
-                                        value={APITokenGeneration.NOW}
-                                        control={<Radio />}
-                                        label='Generate an API token now'
+                        >
+                            <EnvironmentProjectSelect
+                                projects={projects}
+                                setProjects={setProjects}
+                            />
+                        </FormField>
+                        <FormField
+                            label='Keep user permissions'
+                            description='If you turn it off, the permission for this environment across all projects and feature flags will remain only for admin and editor roles.'
+                        >
+                            <FormControlLabel
+                                label={clonePermissions ? 'Yes' : 'No'}
+                                control={
+                                    <Switch
+                                        onChange={(e) =>
+                                            setClonePermissions(
+                                                e.target.checked,
+                                            )
+                                        }
+                                        checked={clonePermissions}
                                     />
-                                </RadioGroup>
-                            </FormControl>
+                                }
+                            />
+                        </FormField>
+                        <StyledSecondaryContainer>
+                            <FormField
+                                label='API token'
+                                description={
+                                    <>
+                                        In order to connect your SDKs to your
+                                        newly cloned environment, you will also
+                                        need an API token.{' '}
+                                        <Link
+                                            href='https://docs.getunleash.io/concepts/api-tokens-and-client-keys'
+                                            target='_blank'
+                                            rel='noreferrer'
+                                        >
+                                            Read more about API tokens
+                                        </Link>
+                                        .
+                                    </>
+                                }
+                            >
+                                <FormControl>
+                                    <RadioGroup
+                                        value={apiTokenGeneration}
+                                        onChange={(e) =>
+                                            setApiTokenGeneration(
+                                                e.target
+                                                    .value as APITokenGeneration,
+                                            )
+                                        }
+                                        name='api-token-generation'
+                                    >
+                                        <FormControlLabel
+                                            value={APITokenGeneration.LATER}
+                                            control={<Radio />}
+                                            label='I want to generate an API token later'
+                                        />
+                                        <FormControlLabel
+                                            value={APITokenGeneration.NOW}
+                                            control={<Radio />}
+                                            label='Generate an API token now'
+                                        />
+                                    </RadioGroup>
+                                </FormControl>
+                            </FormField>
                             <StyledInlineContainer>
                                 <StyledInputSecondaryDescription>
                                     A new backend API token will be generated
@@ -344,11 +343,10 @@ export const EnvironmentCloneModal = ({
                                         APITokenGeneration.NOW
                                     }
                                     show={
-                                        <>
-                                            <StyledInputDescription>
-                                                Which projects do you want this
-                                                token to give access to?
-                                            </StyledInputDescription>
+                                        <FormField
+                                            label='Token projects'
+                                            description='Which projects do you want this token to give access to?'
+                                        >
                                             <SelectProjectInput
                                                 options={selectableProjects}
                                                 defaultValue={tokenProjects}
@@ -360,7 +358,7 @@ export const EnvironmentCloneModal = ({
                                                     )
                                                 }
                                             />
-                                        </>
+                                        </FormField>
                                     }
                                 />
                             </StyledInlineContainer>
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentProjectSelect/EnvironmentProjectSelect.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentProjectSelect/EnvironmentProjectSelect.tsx
index 41ce04ecaf..38a454d9c3 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentProjectSelect/EnvironmentProjectSelect.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentProjectSelect/EnvironmentProjectSelect.tsx
@@ -70,11 +70,14 @@ interface IProjectBase {
 interface IEnvironmentProjectSelectProps {
     projects: string[];
     setProjects: React.Dispatch<React.SetStateAction<string[]>>;
+    /** Set by a wrapping FormField so its label names the input. */
+    id?: string;
 }
 
 export const EnvironmentProjectSelect = ({
     projects,
     setProjects,
+    id,
 }: IEnvironmentProjectSelectProps) => {
     const { projects: projectsAll } = useProjects();
 
@@ -118,7 +121,8 @@ export const EnvironmentProjectSelect = ({
     return (
         <StyledGroupFormUsersSelect>
             <Autocomplete
-                size='small'
+                id={id}
+                size='large'
                 multiple
                 limitTags={1}
                 openOnFocus
@@ -150,7 +154,10 @@ export const EnvironmentProjectSelect = ({
                     option.name || option.description || ''
                 }
                 renderInput={(params) => (
-                    <TextField {...params} label='Projects' />
+                    <TextField
+                        {...params}
+                        placeholder='Select one or more projects'
+                    />
                 )}
                 renderValue={(value) => renderTags(value)}
                 groupBy={() => 'Select/Deselect all'}
diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
index 57e3461bf1..54dfff35e6 100644
--- a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
+++ b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
@@ -61,7 +61,7 @@ export const EventTimelineHeader = ({
             show={() => (
                 <StyledFilter
                     select
-                    size='small'
+                    size='large'
                     variant='outlined'
                     value={environment!.name}
                     onChange={(e) =>
@@ -85,7 +85,7 @@ export const EventTimelineHeader = ({
     const TimeSpanFilter = () => (
         <StyledFilter
             select
-            size='small'
+            size='large'
             variant='outlined'
             value={timeSpan.key}
             onChange={(e) =>
diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
index f2bd7a585c..65f8f522d8 100644
--- a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
+++ b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
@@ -188,7 +188,7 @@ export const CopyFeatureToggle = () => {
                         error={nameError !== undefined}
                         helperText={nameError}
                         variant='outlined'
-                        size='small'
+                        size='large'
                         aria-required
                         aria-details={
                             displayFeatureNamingInfo
diff --git a/frontend/src/component/feature/FeatureForm/EditFeatureForm.tsx b/frontend/src/component/feature/FeatureForm/EditFeatureForm.tsx
index 9c9071ccda..d50a040ee4 100644
--- a/frontend/src/component/feature/FeatureForm/EditFeatureForm.tsx
+++ b/frontend/src/component/feature/FeatureForm/EditFeatureForm.tsx
@@ -1,11 +1,8 @@
 import {
     Button,
-    FormControl,
-    FormControlLabel,
-    styled,
     Switch,
-    type Theme,
-    Typography,
+    styled,
+    FormControlLabel,
     Link,
     Box,
 } from '@mui/material';
@@ -14,6 +11,7 @@ import { CF_DESC_ID, CF_TYPE_ID } from 'utils/testIds';
 import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
 import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import type React from 'react';
 import type { CreateFeatureSchemaType } from 'openapi';
 
@@ -35,33 +33,11 @@ const StyledForm = styled('form')({
     height: '100%',
 });
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
-const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
-const StyledFormControl = styled(FormControl)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
-const styledSelectInput = (theme: Theme) => ({
-    marginBottom: theme.spacing(2),
-    minWidth: '400px',
-    [theme.breakpoints.down('sm')]: {
-        minWidth: '379px',
-    },
-});
-
+// The selected type's own description, tucked under the type select.
 const StyledTypeDescription = styled('p')(({ theme }) => ({
-    fontSize: theme.fontSizes.smallBody,
+    margin: theme.spacing(-1, 0, 2, 0),
+    fontSize: theme.typography.body2.fontSize,
     color: theme.palette.text.secondary,
-    top: '-13px',
-    position: 'relative',
 }));
 
 const StyledButtonContainer = styled('div')({
@@ -69,20 +45,10 @@ const StyledButtonContainer = styled('div')({
     justifyContent: 'flex-end',
 });
 
-const StyledRow = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    marginTop: theme.spacing(1),
-}));
-
 const StyledCancelButton = styled(Button)(({ theme }) => ({
     marginLeft: theme.spacing(3),
 }));
 
-const styledTypography = (theme: Theme) => ({
-    margin: theme.spacing(1, 0),
-});
-
 const LimitContainer = styled(Box)(({ theme }) => ({
     '&:has(*)': {
         marginBottom: theme.spacing(2),
@@ -110,83 +76,81 @@ const EditFeatureForm: React.FC<IFeatureToggleForm> = ({
 
     return (
         <StyledForm onSubmit={handleSubmit}>
-            <StyledInputDescription>
-                What would you like to call your flag?
-            </StyledInputDescription>
-            <StyledInput
-                autoFocus
-                disabled={true}
+            <FormField
                 label='Name'
-                id='feature-flag-name'
-                value={name}
-                onChange={() => {}}
-            />
-            <StyledInputDescription>
-                What kind of feature flag do you want?
-            </StyledInputDescription>
-            <FeatureTypeSelect
-                sx={styledSelectInput}
-                value={type}
-                onChange={setType}
-                label={'Flag type'}
-                id='feature-type-select'
-                editable
-                data-testid={CF_TYPE_ID}
-                IconComponent={KeyboardArrowDownOutlined}
-            />
-            <StyledTypeDescription>
-                {renderToggleDescription()}
-            </StyledTypeDescription>
-            <StyledInputDescription>
-                How would you describe your feature flag?
-            </StyledInputDescription>
-            <StyledInput
-                multiline
-                rows={4}
+                description='What would you like to call your flag?'
+            >
+                <Input
+                    fullWidth
+                    autoFocus
+                    disabled={true}
+                    label=''
+                    value={name}
+                    onChange={() => {}}
+                />
+            </FormField>
+            <FormField
+                label='Flag type'
+                description='What kind of feature flag do you want?'
+            >
+                <FeatureTypeSelect
+                    fullWidth
+                    label=''
+                    value={type}
+                    onChange={setType}
+                    editable
+                    data-testid={CF_TYPE_ID}
+                    IconComponent={KeyboardArrowDownOutlined}
+                />
+            </FormField>
+            {renderToggleDescription() ? (
+                <StyledTypeDescription>
+                    {renderToggleDescription()}
+                </StyledTypeDescription>
+            ) : null}
+            <FormField
                 label='Description'
-                placeholder='A short description of the feature flag'
-                value={description}
-                data-testid={CF_DESC_ID}
-                onChange={(e) => setDescription(e.target.value)}
-            />
-            <StyledFormControl>
-                <Typography
-                    variant='subtitle1'
-                    sx={styledTypography}
-                    data-loading
-                    component='h2'
-                >
-                    Impression Data
-                </Typography>
-                <p>
-                    When you enable impression data for a feature flag, your
-                    client SDKs will emit events you can listen for every time
-                    this flag gets triggered. Learn more in{' '}
-                    <Link
-                        target='_blank'
-                        rel='noopener noreferrer'
-                        href='https://docs.getunleash.io/concepts/impression-data'
-                    >
-                        the impression data documentation
-                    </Link>
-                </p>
-                <StyledRow>
-                    <FormControlLabel
-                        labelPlacement='start'
-                        style={{ marginLeft: 0 }}
-                        control={
-                            <Switch
-                                name='impressionData'
-                                onChange={() =>
-                                    setImpressionData(!impressionData)
-                                }
-                                checked={impressionData}
-                            />
-                        }
-                        label='Enable impression data'
-                    />
-                </StyledRow>
-            </StyledFormControl>
+                description='How would you describe your feature flag?'
+            >
+                <Input
+                    fullWidth
+                    multiline
+                    rows={4}
+                    label=''
+                    placeholder='A short description of the feature flag'
+                    value={description}
+                    data-testid={CF_DESC_ID}
+                    onChange={(e) => setDescription(e.target.value)}
+                />
+            </FormField>
+            <FormField
+                label='Impression data'
+                description={
+                    <>
+                        When you enable impression data for a feature flag, your
+                        client SDKs will emit events you can listen for every
+                        time this flag gets triggered. Learn more in{' '}
+                        <Link
+                            target='_blank'
+                            rel='noopener noreferrer'
+                            href='https://docs.getunleash.io/concepts/impression-data'
+                        >
+                            the impression data documentation
+                        </Link>
+                    </>
+                }
+            >
+                <FormControlLabel
+                    label='Enable impression data'
+                    control={
+                        <Switch
+                            name='impressionData'
+                            onChange={() => setImpressionData(!impressionData)}
+                            checked={impressionData}
+                        />
+                    }
+                />
+            </FormField>
             <LimitContainer>{Limit}</LimitContainer>
             <StyledButtonContainer>
                 {children}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintDateInput.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintDateInput.tsx
index ba92627004..53a802e603 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintDateInput.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintDateInput.tsx
@@ -72,7 +72,7 @@ export const ConstraintDateInput = ({
                 aria-describedby={helpId}
                 hiddenLabel
                 label=''
-                size='small'
+                size='large'
                 type='datetime-local'
                 value={parseDateValue(pickedDate)}
                 onChange={(e) => {
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintOperatorSelect.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintOperatorSelect.tsx
index f1e3763059..fd7c06561c 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintOperatorSelect.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintOperatorSelect.tsx
@@ -108,7 +108,7 @@ export const ConstraintOperatorSelect = ({
         : options.filter((operator) => !isRegexOperator(operator));
 
     return (
-        <FormControl variant='standard' size='small' hiddenLabel>
+        <FormControl variant='standard' size='large' hiddenLabel>
             <ScreenReaderOnly>
                 <InputLabel id={labelId} htmlFor={selectId}>
                     Operator
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintValueSearch.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintValueSearch.tsx
index ea643b4251..f92352ff0e 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintValueSearch.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/ConstraintValueSearch.tsx
@@ -33,7 +33,7 @@ export const ConstraintValueSearch = ({
                     width: '100%',
                 }}
                 variant='outlined'
-                size='small'
+                size='large'
                 slotProps={{
                     input: {
                         startAdornment: (
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
index 1a57d440a2..422b4bf5d0 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
@@ -96,7 +96,9 @@ export const FeatureStrategyConstraintAccordionList = forwardRef<
         <StyledContainer>
             <div>
                 <StyledHelpIconBox>
-                    <Typography>Constraints</Typography>
+                    <Typography sx={{ fontWeight: 'bold' }}>
+                        Constraints
+                    </Typography>
                     <HelpIcon
                         htmlTooltip
                         tooltip={
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyTitle/FeatureStrategyTitle.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyTitle/FeatureStrategyTitle.tsx
index bb62360e27..4a38e55bb7 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyTitle/FeatureStrategyTitle.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyTitle/FeatureStrategyTitle.tsx
@@ -1,5 +1,5 @@
-import { Box, Typography } from '@mui/material';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import type { FC } from 'react';
 
 interface IFeatureStrategyTitleProps {
@@ -12,21 +12,16 @@ export const FeatureStrategyTitle: FC<IFeatureStrategyTitleProps> = ({
     setTitle,
 }) => {
     return (
-        <Box sx={{ paddingBottom: (theme) => theme.spacing(2) }}>
-            <Typography
-                sx={{
-                    paddingBottom: (theme) => theme.spacing(2),
-                }}
-            >
-                What would you like to call this strategy? (optional)
-            </Typography>
+        <FormField
+            label='Strategy title (optional)'
+            description='What would you like to call this strategy?'
+        >
             <Input
-                label='Strategy title'
-                id='title-input'
+                label=''
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 sx={{ width: '100%' }}
             />
-        </Box>
+        </FormField>
     );
 };
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
index c8d5363a72..406fdae7b5 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
@@ -64,7 +64,7 @@ export const FeatureStrategySegment = ({
     return (
         <>
             <StyledHelpIconBox>
-                <Typography>Segments</Typography>
+                <Typography sx={{ fontWeight: 'bold' }}>Segments</Typography>
                 <HelpIcon
                     htmlTooltip
                     tooltip={
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
index c41209cc11..cfc03c4899 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
@@ -56,7 +56,7 @@ export const MilestoneProgressionTimeInput = ({
                     width: `max(60px, ${String(timeValue).length + 8}ch)`,
                     maxWidth: '300px',
                 }}
-                size='small'
+                size='large'
                 disabled={disabled}
                 slotProps={{
                     htmlInput: {
@@ -69,7 +69,7 @@ export const MilestoneProgressionTimeInput = ({
             <StyledSelect
                 value={timeUnit}
                 onChange={onTimeUnitChange}
-                size='small'
+                size='large'
                 aria-label='Time unit'
                 id='time-unit-select'
                 disabled={disabled}
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantOverrides/VariantOverrides.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantOverrides/VariantOverrides.tsx
index ab23669878..1aa99db6ca 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantOverrides/VariantOverrides.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantOverrides/VariantOverrides.tsx
@@ -124,7 +124,7 @@ export const OverrideConfig: FC<IOverrideConfigProps> = ({
                                         value={filteredValues}
                                         style={{ width: '100%' }}
                                         filterSelectedOptions
-                                        size='small'
+                                        size='large'
                                         renderInput={(params) => (
                                             <StyledTextField
                                                 {...params}
diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
index ecdbfb11e8..1ccd694982 100644
--- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
@@ -2,6 +2,8 @@ import { Box, styled } from '@mui/material';
 import type { IFeatureStrategyParameters } from 'interfaces/strategy';
 import ConditionalRolloutSlider from '../RolloutSlider/ConditionalRolloutSlider.tsx';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
+import { FormGroup } from 'component/common/FormGroup/FormGroup';
 import {
     FLEXIBLE_STRATEGY_GROUP_ID,
     FLEXIBLE_STRATEGY_STICKINESS_ID,
@@ -21,34 +23,32 @@ interface IFlexibleStrategyProps {
     groupIdTooltip?: React.ReactNode;
 }
 
-const StyledBox = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: theme.palette.background.elevation1,
-    padding: theme.spacing(2),
-    borderRadius: `${theme.shape.borderRadiusMedium}px`,
-}));
-
+// Stickiness and groupId sit side by side under the rollout slider.
 const StyledOuterBox = styled(Box)(({ theme }) => ({
-    marginTop: theme.spacing(1),
     display: 'flex',
     width: '100%',
-    justifyContent: 'space-between',
-}));
-
-const StyledInnerBox1 = styled(Box)(({ theme }) => ({
-    width: '50%',
-    marginRight: theme.spacing(0.5),
+    gap: theme.spacing(2),
+    // Align the controls' baselines; spacing is owned by the row, so drop the
+    // FormFields' own bottom margins and StickinessSelect's legacy one.
+    alignItems: 'flex-end',
+    '&& > *': {
+        flex: 1,
+        marginBottom: 0,
+    },
+    '&& .MuiFormControl-root': {
+        marginBottom: 0,
+    },
 }));
 
-const StyledInnerBox2 = styled(Box)(({ theme }) => ({
+const StyledGroupIdField = styled(Box)(({ theme }) => ({
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     gap: theme.spacing(1),
-    width: '50%',
-    marginLeft: theme.spacing(0.5),
-    marginBlockEnd: theme.spacing(2),
-    '& > div': {
+    // The input fills the column; the help icon keeps its size.
+    '&& > *': {
+        marginBottom: 0,
+    },
+    '&& > *:first-of-type': {
         flex: 1,
     },
 }));
@@ -72,44 +72,45 @@ export const FlexibleStrategy = ({
     const groupId = parseParameterString(parameters.groupId);
 
     return (
-        <StyledBox>
+        <FormGroup sx={{ gap: 1 }}>
             <ConditionalRolloutSlider
                 name='Rollout'
                 value={rollout}
                 onChange={updateRollout}
             />
             <StyledOuterBox>
-                <StyledInnerBox1>
+                <FormField label='Stickiness'>
                     <StickinessSelect
-                        label='Stickiness'
+                        label=''
                         value={stickiness}
                         dataTestId={FLEXIBLE_STRATEGY_STICKINESS_ID}
                         onChange={(e) =>
                             updateParameter('stickiness', e.target.value)
                         }
                     />
-                </StyledInnerBox1>
-                <StyledInnerBox2>
-                    <Input
-                        label='groupId'
-                        sx={{ width: '100%' }}
-                        id='groupId-input'
-                        value={groupId}
-                        onChange={(e) =>
-                            updateParameter(
-                                'groupId',
-                                parseParameterString(e.target.value),
-                            )
-                        }
-                        data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
-                        error={Boolean(errors?.getFormError('groupId'))}
-                        helperText={errors?.getFormError('groupId')}
-                    />
+                </FormField>
+                <StyledGroupIdField>
+                    <FormField label='groupId'>
+                        <Input
+                            label=''
+                            sx={{ width: '100%' }}
+                            value={groupId}
+                            onChange={(e) =>
+                                updateParameter(
+                                    'groupId',
+                                    parseParameterString(e.target.value),
+                                )
+                            }
+                            data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
+                            error={Boolean(errors?.getFormError('groupId'))}
+                            helperText={errors?.getFormError('groupId')}
+                        />
+                    </FormField>
                     {groupIdTooltip ? (
                         <HelpIcon htmlTooltip tooltip={groupIdTooltip} />
                     ) : null}
-                </StyledInnerBox2>
+                </StyledGroupIdField>
             </StyledOuterBox>
-        </StyledBox>
+        </FormGroup>
     );
 };
diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx
index afe6b02214..ef289364f5 100644
--- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx
+++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx
@@ -10,25 +10,32 @@ import {
 import { useStickinessOptions } from 'hooks/useStickinessOptions';
 import { SELECT_ITEM_ID } from 'utils/testIds';
 import type { ReactNode } from 'react';
+import { formFieldLabelId } from 'component/common/FormField/FormField';
 
 interface IStickinessSelectProps {
     label: string;
     value: string | undefined;
     onChange: (event: SelectChangeEvent<string>) => void;
     dataTestId?: string;
+    /** Set by a wrapping FormField so its label can name the combobox. */
+    id?: string;
 }
 
 const StyledValueContainer = styled('div')(({ theme }) => ({
-    lineHeight: 1.1,
-    marginTop: -2,
-    marginBottom: -10,
+    display: 'flex',
+    alignItems: 'baseline',
+    gap: theme.spacing(1),
+    overflow: 'hidden',
 }));
 
 const StyledLabel = styled('div')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
+    flexShrink: 0,
 }));
 
 const StyledDescription = styled('p')(({ theme }) => ({
+    margin: 0,
+    minWidth: 0,
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.neutral.main,
     overflow: 'hidden',
@@ -37,6 +44,7 @@ const StyledDescription = styled('p')(({ theme }) => ({
 }));
 
 const StyledDropdownDescription = styled('p')(({ theme }) => ({
+    margin: 0,
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.neutral.main,
     overflow: 'hidden',
@@ -44,6 +52,8 @@ const StyledDropdownDescription = styled('p')(({ theme }) => ({
     wordBreak: 'break-word',
 }));
 
+// Dropdown options keep the description stacked BELOW the value (unlike the
+// collapsed value, which shows them side by side to fit the field height).
 const StyledOptionContainer = styled('div')(({ theme }) => ({
     lineHeight: 1.2,
     width: '100%',
@@ -54,9 +64,11 @@ export const StickinessSelect = ({
     value,
     onChange,
     dataTestId,
+    id = 'stickiness-select',
 }: IStickinessSelectProps) => {
     const theme = useTheme();
     const stickinessOptions = useStickinessOptions(value);
+    const labelId = formFieldLabelId(id);
 
     const renderValue = (selected: string): ReactNode => {
         const option = stickinessOptions.find((o) => o.key === selected);
@@ -73,15 +85,20 @@ export const StickinessSelect = ({
     return (
         <FormControl
             variant='outlined'
-            size='small'
+            size='large'
             sx={{
                 width: '100%',
                 marginBottom: theme.spacing(2),
             }}
         >
-            <InputLabel htmlFor='stickiness-select'>{label}</InputLabel>
+            {label ? (
+                <InputLabel id={labelId} htmlFor={id}>
+                    {label}
+                </InputLabel>
+            ) : null}
             <Select
-                id='stickiness-select'
+                id={id}
+                labelId={labelId}
                 name='stickiness'
                 label={label}
                 value={value || ''}
diff --git a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
index 0ceb8bd125..de03cc446a 100644
--- a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
@@ -15,7 +15,11 @@ interface IGeneralStrategyProps {
 
 const StyledContainer = styled('div')(({ theme }) => ({
     display: 'grid',
-    gap: theme.spacing(4),
+    gap: theme.spacing(2),
+    // Gap owns the spacing; drop members' own bottom margins (FormField's).
+    '&& > *': {
+        marginBottom: 0,
+    },
 }));
 
 const GeneralStrategy = ({
@@ -31,14 +35,13 @@ const GeneralStrategy = ({
     return (
         <StyledContainer>
             {strategyDefinition.parameters.map((definition, index) => (
-                <div key={index}>
-                    <StrategyParameter
-                        definition={definition}
-                        parameters={parameters}
-                        updateParameter={updateParameter}
-                        errors={errors}
-                    />
-                </div>
+                <StrategyParameter
+                    key={index}
+                    definition={definition}
+                    parameters={parameters}
+                    updateParameter={updateParameter}
+                    errors={errors}
+                />
             ))}
         </StyledContainer>
     );
diff --git a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
index 0511fa7e97..39163bf523 100644
--- a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
+++ b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
@@ -53,7 +53,6 @@ const StyledSliderContainer = styled(Box)(({ theme }) => ({
     alignItems: 'center',
     width: '100%',
     gap: theme.spacing(4),
-    marginBottom: theme.spacing(1),
 }));
 
 const StyledInputBox = styled(Box)(({ theme }) => ({
@@ -135,7 +134,12 @@ const RolloutSlider = ({
     return (
         <SliderWrapper>
             <StyledBox>
-                <Typography id='discrete-slider-always'>{name}</Typography>
+                <Typography
+                    id='discrete-slider-always'
+                    sx={{ fontWeight: 'bold' }}
+                >
+                    {name}
+                </Typography>
                 <HelpIcon
                     htmlTooltip
                     tooltip={
@@ -200,7 +204,7 @@ const RolloutSlider = ({
                 </SliderContent>
                 <StyledInputBox>
                     <StyledTextField
-                        size='small'
+                        size='large'
                         aria-labelledby='discrete-slider-always'
                         type='number'
                         value={inputValue}
diff --git a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
index 95c8c56877..6fb50e3db1 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
@@ -11,6 +11,7 @@ import Add from '@mui/icons-material/Add';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { FormField } from 'component/common/FormField/FormField';
 import type { IFormErrors } from 'hooks/useFormErrors';
 
 interface IStrategyInputList {
@@ -32,9 +33,16 @@ const ChipsList = styled('div')(({ theme }) => ({
 }));
 
 const InputContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
+    display: 'grid',
+    // Input fills the row; the Add button keeps its content width.
+    gridTemplateColumns: '1fr auto',
     gap: theme.spacing(1),
+    // Top-align so the input's error text extends downward without nudging the
+    // button; spacing is owned by the row, so drop the FormFields' margins.
     alignItems: 'start',
+    '&& > *': {
+        marginBottom: 0,
+    },
 }));
 
 const StrategyInputList = ({
@@ -91,7 +99,11 @@ const StrategyInputList = ({
 
     return (
         <Container>
-            <Typography variant='subtitle2' component='h2'>
+            <Typography
+                variant='subtitle2'
+                component='h2'
+                sx={{ fontWeight: 'bold' }}
+            >
                 List of {name}
             </Typography>
             <ConditionallyRender
@@ -116,32 +128,37 @@ const StrategyInputList = ({
                 }
             />
             <InputContainer>
-                <TextField
-                    error={Boolean(errors.getFormError(name))}
-                    helperText={errors.getFormError(name)}
-                    name={`input_field`}
-                    variant='outlined'
-                    label='Add items'
-                    id='input-add-items'
-                    value={input}
-                    size='small'
-                    placeholder=''
-                    onBlur={onBlur}
-                    onChange={onChange}
-                    // @ts-expect-error
-                    onKeyDown={onKeyDown}
-                    data-testid={STRATEGY_INPUT_LIST}
-                />
-                {/* @ts-expect-error */}
-                <Button
-                    onClick={setValue}
-                    data-testid={ADD_TO_STRATEGY_INPUT_LIST}
-                    variant='outlined'
-                    color='secondary'
-                    startIcon={<Add />}
-                >
-                    Add
-                </Button>
+                <FormField label='Add items'>
+                    <TextField
+                        error={Boolean(errors.getFormError(name))}
+                        helperText={errors.getFormError(name)}
+                        name={`input_field`}
+                        variant='outlined'
+                        fullWidth
+                        value={input}
+                        size='large'
+                        placeholder=''
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        // @ts-expect-error
+                        onKeyDown={onKeyDown}
+                        data-testid={STRATEGY_INPUT_LIST}
+                    />
+                </FormField>
+                {/* Spacer label aligns the button with the input, not the
+                    label above it. */}
+                <FormField label={' '}>
+                    {/* @ts-expect-error */}
+                    <Button
+                        onClick={setValue}
+                        data-testid={ADD_TO_STRATEGY_INPUT_LIST}
+                        variant='outlined'
+                        color='secondary'
+                        startIcon={<Add />}
+                    >
+                        Add
+                    </Button>
+                </FormField>
             </InputContainer>
         </Container>
     );
diff --git a/frontend/src/component/feature/StrategyTypes/StrategyParameter/StrategyParameter.tsx b/frontend/src/component/feature/StrategyTypes/StrategyParameter/StrategyParameter.tsx
index adef9d0ee8..c7dab3adab 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyParameter/StrategyParameter.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyParameter/StrategyParameter.tsx
@@ -12,6 +12,7 @@ import {
     parseParameterString,
 } from 'utils/parseParameter';
 import { InputCaption } from 'component/common/InputCaption/InputCaption';
+import { FormField } from 'component/common/FormField/FormField';
 import type { IFormErrors } from 'hooks/useFormErrors';
 
 interface IStrategyParameterProps {
@@ -83,20 +84,18 @@ export const StrategyParameter = ({
 
     if (type === 'number') {
         return (
-            <div>
+            <FormField label={label} description={description}>
                 <TextField
                     error={Boolean(error)}
                     helperText={error}
                     variant='outlined'
-                    size='small'
+                    size='large'
                     aria-required={required}
                     style={{ width: '100%' }}
-                    label={label}
                     onChange={onChange}
                     value={value}
                 />
-                <InputCaption text={description} />
-            </div>
+            </FormField>
         );
     }
 
@@ -121,22 +120,20 @@ export const StrategyParameter = ({
     }
 
     return (
-        <div>
+        <FormField label={label} description={description}>
             <TextField
                 rows={1}
                 placeholder=''
                 variant='outlined'
-                size='small'
+                size='large'
                 style={{ width: '100%' }}
                 aria-required={required}
                 error={Boolean(error)}
                 helperText={error}
                 name={name}
-                label={label}
                 onChange={onChangeString}
                 value={parseParameterString(parameters[name])}
             />
-            <InputCaption text={description} />
-        </div>
+        </FormField>
     );
 };
diff --git a/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.tsx b/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.tsx
index 6c3624e8ec..a1518a12f6 100644
--- a/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.tsx
+++ b/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.tsx
@@ -1,5 +1,5 @@
 import { type FormEventHandler, type FC, useState, useCallback } from 'react';
-import { Box, Button, Typography, Checkbox, styled } from '@mui/material';
+import { Box, Button, Checkbox, styled } from '@mui/material';
 import { useNavigate } from 'react-router';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useFeatureTypeApi } from 'hooks/api/actions/useFeatureTypeApi/useFeatureTypeApi';
@@ -9,6 +9,7 @@ import PermissionButton from 'component/common/PermissionButton/PermissionButton
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { GO_BACK } from 'constants/navigate';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import type { FeatureTypeSchema } from 'openapi';
 import { trim } from 'component/common/util';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
@@ -36,6 +37,22 @@ const StyledForm = styled('form')(() => ({
     flexGrow: 1,
 }));
 
+// Inline label content so the help icon sits next to the bold field label.
+const StyledLabelContent = styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+}));
+
+const StyledExpireRow = styled('label')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    marginLeft: theme.spacing(-1),
+    marginBottom: theme.spacing(1),
+    marginRight: 'auto',
+}));
+
 export const FeatureTypeForm: FC<FeatureTypeFormProps> = ({
     featureType,
     loading,
@@ -130,48 +147,7 @@ export const FeatureTypeForm: FC<FeatureTypeFormProps> = ({
             formatApiCode={formatApiCode}
         >
             <StyledForm onSubmit={onSubmit}>
-                <Typography
-                    sx={(theme) => ({
-                        margin: theme.spacing(3, 0, 1),
-                        display: 'flex',
-                        alignItems: 'center',
-                    })}
-                >
-                    <Box component='label' htmlFor='feature-flag-lifetime'>
-                        Expected lifetime
-                    </Box>
-                    <HelpIcon
-                        htmlTooltip
-                        tooltip={
-                            <>
-                                <p>
-                                    If your flag exceeds the expected lifetime
-                                    of its flag type it will be marked as
-                                    potentially stale.
-                                </p>
-                                <br />
-                                <a
-                                    href='https://docs.getunleash.io/concepts/feature-flags#feature-flag-types'
-                                    target='_blank'
-                                    rel='noreferrer'
-                                >
-                                    Read more in the documentation
-                                </a>
-                            </>
-                        }
-                    />
-                </Typography>
-                <Box
-                    component='label'
-                    sx={(theme) => ({
-                        display: 'flex',
-                        alignItems: 'center',
-                        cursor: 'pointer',
-                        marginBottom: theme.spacing(1),
-                        marginRight: 'auto',
-                    })}
-                    htmlFor='feature-flag-expire'
-                >
+                <StyledExpireRow htmlFor='feature-flag-expire'>
                     <Checkbox
                         checked={doesntExpire || lifetime === 0}
                         id='feature-flag-expire'
@@ -179,17 +155,45 @@ export const FeatureTypeForm: FC<FeatureTypeFormProps> = ({
                         disabled={loading}
                     />
                     <Box>doesn't expire</Box>
-                </Box>
-                <Input
-                    autoFocus
-                    disabled={doesntExpire || loading}
-                    type='number'
-                    label='Lifetime in days'
-                    id='feature-flag-lifetime'
-                    value={doesntExpire ? '0' : `${lifetime}`}
-                    onChange={onChangeLifetime}
-                    error={isIncorrect}
-                />
+                </StyledExpireRow>
+                <FormField
+                    label={
+                        <StyledLabelContent>
+                            Expected lifetime
+                            <HelpIcon
+                                htmlTooltip
+                                tooltip={
+                                    <>
+                                        <p>
+                                            If your flag exceeds the expected
+                                            lifetime of its flag type it will be
+                                            marked as potentially stale.
+                                        </p>
+                                        <br />
+                                        <a
+                                            href='https://docs.getunleash.io/concepts/feature-flags#feature-flag-types'
+                                            target='_blank'
+                                            rel='noreferrer'
+                                        >
+                                            Read more in the documentation
+                                        </a>
+                                    </>
+                                }
+                            />
+                        </StyledLabelContent>
+                    }
+                >
+                    <Input
+                        fullWidth
+                        autoFocus
+                        disabled={doesntExpire || loading}
+                        type='number'
+                        label=''
+                        value={doesntExpire ? '0' : `${lifetime}`}
+                        onChange={onChangeLifetime}
+                        error={isIncorrect}
+                    />
+                </FormField>
                 <StyledButtons>
                     <PermissionButton
                         permission={ADMIN}
diff --git a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
index 694075f4d6..b56c233eb3 100644
--- a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
+++ b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
@@ -131,18 +131,18 @@ exports[`FeedbackCESForm 1`] = `
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root mui-cmpglg-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-adn4wp-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeLarge MuiInputBase-multiline mui-17qo5uh-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <textarea
                 aria-invalid="false"
-                class="MuiInputBase-input MuiOutlinedInput-input mui-1fzzzv6-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiInputBase-input MuiOutlinedInput-input mui-1moixgx-MuiInputBase-input-MuiOutlinedInput-input"
                 id="_r_2_"
                 rows="3"
                 style="height: 0px; overflow: hidden;"
               />
               <textarea
                 aria-hidden="true"
-                class="MuiInputBase-input MuiOutlinedInput-input mui-1fzzzv6-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiInputBase-input MuiOutlinedInput-input mui-1moixgx-MuiInputBase-input-MuiOutlinedInput-input"
                 readonly=""
                 style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px; width: 100%;"
                 tabindex="-1"
diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
index 253de29e1a..cb9c12713b 100644
--- a/frontend/src/component/feedbackNew/FeedbackComponent.tsx
+++ b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
@@ -345,7 +345,7 @@ export const FeedbackComponent = ({
                                                 multiline
                                                 rows={3}
                                                 variant='outlined'
-                                                size='small'
+                                                size='large'
                                                 slotProps={{
                                                     inputLabel: {
                                                         style: {
@@ -367,7 +367,7 @@ export const FeedbackComponent = ({
                                                 name='areasForImprovement'
                                                 rows={3}
                                                 variant='outlined'
-                                                size='small'
+                                                size='large'
                                                 hidden
                                                 slotProps={{
                                                     inputLabel: {
@@ -396,7 +396,7 @@ export const FeedbackComponent = ({
                                                 multiline
                                                 rows={3}
                                                 variant='outlined'
-                                                size='small'
+                                                size='large'
                                                 slotProps={{
                                                     inputLabel: {
                                                         style: {
@@ -423,7 +423,7 @@ export const FeedbackComponent = ({
                                                 name='areasForImprovement'
                                                 rows={3}
                                                 variant='outlined'
-                                                size='small'
+                                                size='large'
                                                 slotProps={{
                                                     inputLabel: {
                                                         style: {
diff --git a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricModal.tsx b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricModal.tsx
index 8e9eccc00a..d5da8fff45 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricModal.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricModal.tsx
@@ -10,6 +10,7 @@ import {
     Typography,
 } from '@mui/material';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
+import { FormField } from 'component/common/FormField/FormField';
 import { ImpactMetricsControls } from './ImpactMetricsControls/ImpactMetricsControls.tsx';
 import { useChartFormState } from '../hooks/useChartFormState.ts';
 import type { ChartConfig } from '../types.ts';
@@ -47,10 +48,21 @@ const StyledTitle = styled('h1')(({ theme }) => ({
 const StyledFormContent = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: theme.spacing(3),
+    // Match the shared field rhythm (FormField/FormGroup use spacing(2)).
+    gap: theme.spacing(2),
     padding: theme.spacing(6),
     flexGrow: 1,
     minHeight: 600,
+    // Vertical spacing is owned by the gap; drop the fields' own bottom margins
+    // (e.g. FormField's spacing(2)) so it isn't doubled up. Doubled selector
+    // raises specificity above the child's own rule.
+    '&& > *': {
+        marginBottom: 0,
+    },
+    // The title gets extra separation (one field-gap more) from the first field.
+    '&& > h1': {
+        marginBottom: theme.spacing(2),
+    },
 }));
 
 const StyledButtonContainer = styled('div')(({ theme }) => ({
@@ -191,14 +203,17 @@ export const ImpactMetricModal: FC<ImpactMetricModalProps> = ({
                                 : 'Add impact metric'}
                         </StyledTitle>
 
-                        <TextField
-                            label='Chart Title (optional)'
-                            value={formData.title}
-                            onChange={(e) => actions.setTitle(e.target.value)}
-                            fullWidth
-                            variant='outlined'
-                            size='small'
-                        />
+                        <FormField label='Chart title (optional)'>
+                            <TextField
+                                value={formData.title}
+                                onChange={(e) =>
+                                    actions.setTitle(e.target.value)
+                                }
+                                fullWidth
+                                variant='outlined'
+                                size='large'
+                            />
+                        </FormField>
 
                         <ImpactMetricsControls
                             formData={formData}
diff --git a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/ImpactMetricsControls.tsx b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/ImpactMetricsControls.tsx
index 2f5e35c545..9be152d0af 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/ImpactMetricsControls.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/ImpactMetricsControls.tsx
@@ -1,12 +1,22 @@
 import type { FC, ReactNode } from 'react';
-import { Box, FormControlLabel, Checkbox, MenuItem } from '@mui/material';
+import { FormControlLabel, Checkbox } from '@mui/material';
 import type { ImpactMetric } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata';
 import { MetricSelector } from './SeriesSelector/MetricSelector.tsx';
-import { RangeSelector } from './RangeSelector/RangeSelector.tsx';
-import { ModeSelector } from './ModeSelector/ModeSelector.tsx';
+import { getAggregationModeOptions } from './ModeSelector/ModeSelector.tsx';
+import type { TimeRange } from './RangeSelector/RangeSelector.tsx';
 import type { ChartFormState } from '../../hooks/useChartFormState.ts';
+import type { AggregationMode } from '../../types.ts';
+import { FormField } from 'component/common/FormField/FormField';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { useLocation } from 'react-router';
 
+const timeRangeOptions = [
+    { key: 'hour', label: 'Last hour' },
+    { key: 'day', label: 'Last 24 hours' },
+    { key: 'week', label: 'Last 7 days' },
+    { key: 'month', label: 'Last 30 days' },
+];
+
 export type ImpactMetricsControlsProps = {
     formData: ChartFormState['formData'];
     actions: Pick<
@@ -35,60 +45,60 @@ export const ImpactMetricsControls: FC<ImpactMetricsControlsProps> = ({
         : 'flag-impact-metrics-accordion';
 
     return (
-        <Box>
-            <Box
-                sx={(theme) => ({
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: theme.spacing(3),
-                })}
-            >
-                <MetricSelector
-                    value={formData.metricName}
-                    valueSource={formData.source}
-                    onChange={actions.handleSeriesChange}
-                    options={metrics}
-                    loading={loading}
-                    entryPoint={entryPoint}
-                />
+        <>
+            <MetricSelector
+                value={formData.metricName}
+                valueSource={formData.source}
+                onChange={actions.handleSeriesChange}
+                options={metrics}
+                loading={loading}
+                entryPoint={entryPoint}
+            />
 
-                {labelsFilter}
+            {labelsFilter}
 
-                {formData.metricName ? (
-                    <>
-                        <RangeSelector
+            {formData.metricName ? (
+                <>
+                    <FormField label='Time'>
+                        <GeneralSelect
                             value={formData.timeRange}
-                            onChange={actions.setTimeRange}
-                        >
-                            <MenuItem value='hour'>Last hour</MenuItem>
-                            <MenuItem value='day'>Last 24 hours</MenuItem>
-                            <MenuItem value='week'>Last 7 days</MenuItem>
-                            <MenuItem value='month'>Last 30 days</MenuItem>
-                        </RangeSelector>
-                        <ModeSelector
-                            value={formData.aggregationMode}
-                            onChange={actions.setAggregationMode}
-                            metricType={formData.metricType}
+                            onChange={(value) =>
+                                actions.setTimeRange(value as TimeRange)
+                            }
+                            options={timeRangeOptions}
+                            fullWidth
                         />
-                    </>
-                ) : null}
-            </Box>
-            {formData.metricName ? (
-                <FormControlLabel
-                    sx={(theme) => ({ margin: theme.spacing(1.5, 0) })}
-                    control={
-                        <Checkbox
-                            checked={formData.yAxisMin === 'zero'}
-                            onChange={(e) =>
-                                actions.setYAxisMin(
-                                    e.target.checked ? 'zero' : 'auto',
+                    </FormField>
+                    <FormField label='Aggregation mode'>
+                        <GeneralSelect
+                            value={formData.aggregationMode}
+                            onChange={(value) =>
+                                actions.setAggregationMode(
+                                    value as AggregationMode,
                                 )
                             }
+                            options={getAggregationModeOptions(
+                                formData.metricType,
+                            )}
+                            fullWidth
                         />
-                    }
-                    label='Begin at zero'
-                />
+                    </FormField>
+                    <FormControlLabel
+                        sx={{ margin: 0 }}
+                        control={
+                            <Checkbox
+                                checked={formData.yAxisMin === 'zero'}
+                                onChange={(e) =>
+                                    actions.setYAxisMin(
+                                        e.target.checked ? 'zero' : 'auto',
+                                    )
+                                }
+                            />
+                        }
+                        label='Begin at zero'
+                    />
+                </>
             ) : null}
-        </Box>
+        </>
     );
 };
diff --git a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/ModeSelector/ModeSelector.tsx b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/ModeSelector/ModeSelector.tsx
index 494f5bb857..3a93006a41 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/ModeSelector/ModeSelector.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/ModeSelector/ModeSelector.tsx
@@ -1,4 +1,4 @@
-import type { FC, JSX } from 'react';
+import type { FC } from 'react';
 import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import type { AggregationMode } from '../../../types.ts';
 
@@ -9,53 +9,46 @@ export type ModeSelectorProps = {
     label?: string;
 };
 
-const counterOptions = [
-    <MenuItem key='rps' value='rps'>
-        Rate per second
-    </MenuItem>,
-    <MenuItem key='count' value='count'>
-        Count
-    </MenuItem>,
+type AggregationModeOption = { key: AggregationMode; label: string };
+
+const counterOptions: AggregationModeOption[] = [
+    { key: 'rps', label: 'Rate per second' },
+    { key: 'count', label: 'Count' },
 ];
 
-const gaugeOptions = [
-    <MenuItem key='avg' value='avg'>
-        Average
-    </MenuItem>,
-    <MenuItem key='sum' value='sum'>
-        Sum
-    </MenuItem>,
+const gaugeOptions: AggregationModeOption[] = [
+    { key: 'avg', label: 'Average' },
+    { key: 'sum', label: 'Sum' },
 ];
 
-const histogramOptions = [
-    <MenuItem key='p50' value='p50'>
-        50th percentile
-    </MenuItem>,
-    <MenuItem key='p95' value='p95'>
-        95th percentile
-    </MenuItem>,
-    <MenuItem key='p99' value='p99'>
-        99th percentile
-    </MenuItem>,
+const histogramOptions: AggregationModeOption[] = [
+    { key: 'p50', label: '50th percentile' },
+    { key: 'p95', label: '95th percentile' },
+    { key: 'p99', label: '99th percentile' },
 ];
 
-const optionsByType: Record<string, JSX.Element[]> = {
+const optionsByType: Record<string, AggregationModeOption[]> = {
     counter: counterOptions,
     gauge: gaugeOptions,
     histogram: histogramOptions,
     unknown: [...counterOptions, ...gaugeOptions, ...histogramOptions],
 };
 
+export const getAggregationModeOptions = (
+    metricType: ModeSelectorProps['metricType'],
+): AggregationModeOption[] =>
+    optionsByType[metricType] ?? optionsByType.unknown;
+
 export const ModeSelector: FC<ModeSelectorProps> = ({
     value,
     onChange,
     metricType,
     label = 'Aggregation Mode',
 }) => {
-    const options = optionsByType[metricType] ?? optionsByType.unknown;
+    const options = getAggregationModeOptions(metricType);
 
     return (
-        <FormControl variant='outlined' size='small'>
+        <FormControl variant='outlined' size='large'>
             {label ? (
                 <InputLabel id='mode-select-label'>{label}</InputLabel>
             ) : null}
@@ -65,7 +58,11 @@ export const ModeSelector: FC<ModeSelectorProps> = ({
                 onChange={(e) => onChange(e.target.value as AggregationMode)}
                 label={label}
             >
-                {options}
+                {options.map((option) => (
+                    <MenuItem key={option.key} value={option.key}>
+                        {option.label}
+                    </MenuItem>
+                ))}
             </Select>
         </FormControl>
     );
diff --git a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/RangeSelector/RangeSelector.tsx b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/RangeSelector/RangeSelector.tsx
index 6c25ea25f6..66c4859045 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/RangeSelector/RangeSelector.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/RangeSelector/RangeSelector.tsx
@@ -16,7 +16,7 @@ export const RangeSelector: FC<RangeSelectorProps> = ({
     label = 'Time',
     children,
 }) => (
-    <FormControl variant='outlined' size='small'>
+    <FormControl variant='outlined' size='large'>
         {label ? (
             <InputLabel id='range-select-label'>{label}</InputLabel>
         ) : null}
diff --git a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/SeriesSelector/MetricSelector.tsx b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/SeriesSelector/MetricSelector.tsx
index 03d20d9a29..2282da01f8 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/SeriesSelector/MetricSelector.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricModal/ImpactMetricsControls/SeriesSelector/MetricSelector.tsx
@@ -11,6 +11,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import type { MetricSource } from 'component/impact-metrics/types';
 import { useTrackFlagpageImpactMetrics } from 'component/impact-metrics/useImpactMetricsFunnel';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { FormField } from 'component/common/FormField/FormField';
 import { RegisterMetricDialog } from 'component/impact-metrics/RegisterMetricDialog/RegisterMetricDialog';
 import { useTrackRegisterImpactMetrics } from 'component/impact-metrics/RegisterMetricDialog/useTrackRegisterImpactMetrics';
 
@@ -148,74 +149,81 @@ export const MetricSelector = ({
     const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
     const { trackFormOpened } = useTrackRegisterImpactMetrics(entryPoint);
 
+    const autocomplete = (
+        <Autocomplete
+            options={allOptions}
+            groupBy={(option) => groupLabel(option.source)}
+            getOptionLabel={(option) => option.displayName}
+            value={
+                allOptions.find((option) =>
+                    matchesSelection(option, value, valueSource),
+                ) || null
+            }
+            onChange={(_, newValue) => {
+                const selected = newValue || options[0];
+                onChange({
+                    metricName: selected?.name || '',
+                    source: selected?.source,
+                });
+            }}
+            disabled={loading}
+            renderOption={(props, option, { inputValue }) => (
+                <Box
+                    component='li'
+                    {...props}
+                    key={`${option.source}__${option.name}`}
+                >
+                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                        <Typography variant='body2'>
+                            <Highlighter search={inputValue}>
+                                {option.displayName}
+                            </Highlighter>
+                        </Typography>
+                        <Typography
+                            variant='caption'
+                            sx={{
+                                color: 'text.secondary',
+                            }}
+                        >
+                            <Highlighter search={inputValue}>
+                                {option.help}
+                            </Highlighter>
+                        </Typography>
+                    </Box>
+                </Box>
+            )}
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    placeholder='Search for a metric…'
+                    variant='outlined'
+                    size='large'
+                    required
+                />
+            )}
+            noOptionsText={
+                <NoOptionsMessage
+                    onRegisterClick={
+                        registerImpactMetricsEnabled
+                            ? () => {
+                                  setRegisterDialogOpen(true);
+                                  trackFormOpened();
+                              }
+                            : undefined
+                    }
+                />
+            }
+            sx={{ minWidth: 300 }}
+        />
+    );
+
     return (
         <>
-            <Autocomplete
-                options={allOptions}
-                groupBy={(option) => groupLabel(option.source)}
-                getOptionLabel={(option) => option.displayName}
-                value={
-                    allOptions.find((option) =>
-                        matchesSelection(option, value, valueSource),
-                    ) || null
-                }
-                onChange={(_, newValue) => {
-                    const selected = newValue || options[0];
-                    onChange({
-                        metricName: selected?.name || '',
-                        source: selected?.source,
-                    });
-                }}
-                disabled={loading}
-                renderOption={(props, option, { inputValue }) => (
-                    <Box
-                        component='li'
-                        {...props}
-                        key={`${option.source}__${option.name}`}
-                    >
-                        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-                            <Typography variant='body2'>
-                                <Highlighter search={inputValue}>
-                                    {option.displayName}
-                                </Highlighter>
-                            </Typography>
-                            <Typography
-                                variant='caption'
-                                sx={{
-                                    color: 'text.secondary',
-                                }}
-                            >
-                                <Highlighter search={inputValue}>
-                                    {option.help}
-                                </Highlighter>
-                            </Typography>
-                        </Box>
-                    </Box>
-                )}
-                renderInput={(params) => (
-                    <TextField
-                        {...params}
-                        label={label}
-                        placeholder='Search for a metric…'
-                        variant='outlined'
-                        size='small'
-                        required
-                    />
-                )}
-                noOptionsText={
-                    <NoOptionsMessage
-                        onRegisterClick={
-                            registerImpactMetricsEnabled
-                                ? () => {
-                                      setRegisterDialogOpen(true);
-                                      trackFormOpened();
-                                  }
-                                : undefined
-                        }
-                    />
-                }
-                sx={{ minWidth: 300 }}
-            />
+            {label ? (
+                <FormField label={label}>{autocomplete}</FormField>
+            ) : (
+                autocomplete
+            )}
             <RegisterMetricDialog
                 open={registerDialogOpen}
                 onClose={() => setRegisterDialogOpen(false)}
diff --git a/frontend/src/component/impact-metrics/ImpactMetricModal/LabelFilter/LabelFilterSection/LabelFilterItem/LabelFilterItem.tsx b/frontend/src/component/impact-metrics/ImpactMetricModal/LabelFilter/LabelFilterSection/LabelFilterItem/LabelFilterItem.tsx
index 6683e14f98..95e43491d9 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricModal/LabelFilter/LabelFilterSection/LabelFilterItem/LabelFilterItem.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricModal/LabelFilter/LabelFilterSection/LabelFilterItem/LabelFilterItem.tsx
@@ -7,6 +7,7 @@ import {
     Typography,
 } from '@mui/material';
 import { METRIC_LABELS_SELECT_ALL } from 'component/impact-metrics/hooks/useImpactMetricsState';
+import { FormField } from 'component/common/FormField/FormField';
 import type { FC } from 'react';
 
 type LabelFilterItemProps = {
@@ -24,113 +25,117 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
     onChange,
 }) => {
     const isAllSelected = value.includes(METRIC_LABELS_SELECT_ALL);
-    const autocompleteId = `autocomplete-${labelKey}`;
     const isTruncated = options.length >= 1_000;
 
     const optionsWithSelectAll = [METRIC_LABELS_SELECT_ALL, ...options];
 
     return (
-        <Autocomplete
-            multiple
-            disableCloseOnSelect
-            id={autocompleteId}
-            options={optionsWithSelectAll}
-            value={isAllSelected ? options : value}
-            getOptionLabel={(option) =>
-                option === METRIC_LABELS_SELECT_ALL ? '(Select all)' : option
-            }
-            onChange={(_, newValues, _reason, details) => {
-                if (details?.option === METRIC_LABELS_SELECT_ALL) {
-                    onChange(isAllSelected ? [] : [METRIC_LABELS_SELECT_ALL]);
-                    return;
+        <FormField label={labelKey}>
+            <Autocomplete
+                multiple
+                disableCloseOnSelect
+                options={optionsWithSelectAll}
+                value={isAllSelected ? options : value}
+                getOptionLabel={(option) =>
+                    option === METRIC_LABELS_SELECT_ALL
+                        ? '(Select all)'
+                        : option
                 }
-                onChange(
-                    newValues.filter((v) => v !== METRIC_LABELS_SELECT_ALL),
-                );
-            }}
-            renderOption={(props, option, { selected }) => {
-                const { key, ...listItemProps } = props as any;
+                onChange={(_, newValues, _reason, details) => {
+                    if (details?.option === METRIC_LABELS_SELECT_ALL) {
+                        onChange(
+                            isAllSelected ? [] : [METRIC_LABELS_SELECT_ALL],
+                        );
+                        return;
+                    }
+                    onChange(
+                        newValues.filter((v) => v !== METRIC_LABELS_SELECT_ALL),
+                    );
+                }}
+                renderOption={(props, option, { selected }) => {
+                    const { key, ...listItemProps } = props as any;
 
-                return (
-                    <li key={key || option} {...listItemProps}>
-                        <Checkbox
-                            size='small'
-                            checked={
-                                option === METRIC_LABELS_SELECT_ALL
-                                    ? isAllSelected
-                                    : selected
+                    return (
+                        <li key={key || option} {...listItemProps}>
+                            <Checkbox
+                                size='small'
+                                checked={
+                                    option === METRIC_LABELS_SELECT_ALL
+                                        ? isAllSelected
+                                        : selected
+                                }
+                                style={{ marginRight: 8 }}
+                            />
+                            {option === METRIC_LABELS_SELECT_ALL ? (
+                                <Typography
+                                    component='span'
+                                    sx={{ color: 'text.secondary' }}
+                                >
+                                    Select all
+                                </Typography>
+                            ) : (
+                                option
+                            )}
+                        </li>
+                    );
+                }}
+                renderValue={(value, getItemProps) => {
+                    const overflowCount = 5;
+                    const displayedValues = value.slice(-overflowCount);
+                    const remainingCount = value.length - overflowCount;
+
+                    return (
+                        <>
+                            {displayedValues.map((option, index) => {
+                                const { key, ...chipProps } = getItemProps({
+                                    index,
+                                });
+                                return (
+                                    <Chip
+                                        {...chipProps}
+                                        key={key}
+                                        label={option}
+                                        size='small'
+                                    />
+                                );
+                            })}
+                            {remainingCount > 0 ? (
+                                <Typography
+                                    component='span'
+                                    sx={{ color: 'text.secondary' }}
+                                >
+                                    {' '}
+                                    (+{remainingCount})
+                                </Typography>
+                            ) : null}
+                        </>
+                    );
+                }}
+                renderInput={(params) => (
+                    <>
+                        <TextField
+                            {...params}
+                            placeholder={
+                                isAllSelected ? undefined : 'Select values…'
                             }
-                            style={{ marginRight: 8 }}
+                            variant='outlined'
+                            size='large'
                         />
-                        {option === METRIC_LABELS_SELECT_ALL ? (
-                            <Typography
-                                component='span'
-                                sx={{ color: 'text.secondary' }}
+                        {isTruncated && (
+                            <Alert
+                                severity='warning'
+                                sx={(theme) => ({
+                                    padding: theme.spacing(1, 2),
+                                    marginTop: theme.spacing(1),
+                                })}
                             >
-                                Select all
-                            </Typography>
-                        ) : (
-                            option
+                                Maximum of 1000 values loaded due to
+                                performance.
+                            </Alert>
                         )}
-                    </li>
-                );
-            }}
-            renderValue={(value, getItemProps) => {
-                const overflowCount = 5;
-                const displayedValues = value.slice(-overflowCount);
-                const remainingCount = value.length - overflowCount;
-
-                return (
-                    <>
-                        {displayedValues.map((option, index) => {
-                            const { key, ...chipProps } = getItemProps({
-                                index,
-                            });
-                            return (
-                                <Chip
-                                    {...chipProps}
-                                    key={key}
-                                    label={option}
-                                    size='small'
-                                />
-                            );
-                        })}
-                        {remainingCount > 0 ? (
-                            <Typography
-                                component='span'
-                                sx={{ color: 'text.secondary' }}
-                            >
-                                {' '}
-                                (+{remainingCount})
-                            </Typography>
-                        ) : null}
                     </>
-                );
-            }}
-            renderInput={(params) => (
-                <>
-                    <TextField
-                        {...params}
-                        label={labelKey}
-                        placeholder={
-                            isAllSelected ? undefined : 'Select values…'
-                        }
-                        variant='outlined'
-                        size='small'
-                    />
-                    {isTruncated && (
-                        <Alert
-                            severity='warning'
-                            sx={(theme) => ({
-                                padding: theme.spacing(1, 2),
-                                marginTop: theme.spacing(1),
-                            })}
-                        >
-                            Maximum of 1000 values loaded due to performance.
-                        </Alert>
-                    )}
-                </>
-            )}
-        />
+                )}
+            />
+        </FormField>
     );
 };
diff --git a/frontend/src/component/impact-metrics/ImpactMetricModal/LabelFilter/LabelFilterSection/LabelFilterSection.tsx b/frontend/src/component/impact-metrics/ImpactMetricModal/LabelFilter/LabelFilterSection/LabelFilterSection.tsx
index 84ec4ed4d1..46f64afe32 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricModal/LabelFilter/LabelFilterSection/LabelFilterSection.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricModal/LabelFilter/LabelFilterSection/LabelFilterSection.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import { Box, Typography, Chip, styled } from '@mui/material';
+import { FormGroup } from 'component/common/FormGroup/FormGroup';
 import { LabelFilterItem } from './LabelFilterItem/LabelFilterItem.tsx';
 
 const StyledContainer = styled(Box)(({ theme }) => ({
@@ -27,12 +28,17 @@ const StyledGridItem = styled(Box)({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
+    // Spacing is owned by the grid gap; drop the FormField's own bottom margin.
+    '& > *': {
+        marginBottom: 0,
+    },
 });
 
-const StyledTitle = styled(Typography)({
+const StyledTitle = styled(Typography)(({ theme }) => ({
     lineHeight: 1.5,
     height: '24px',
-});
+    fontWeight: theme.typography.fontWeightBold,
+}));
 
 const StyledClearAll = styled(Chip)(({ theme }) => ({
     position: 'relative',
@@ -82,24 +88,26 @@ export const LabelFilterSection: FC<{
                     />
                 )}
             </StyledHeader>
-            <StyledGrid>
-                {labels.map(([labelKey, values]) => {
-                    const currentSelection = labelSelectors[labelKey] || [];
-                    return (
-                        <StyledGridItem key={labelKey}>
-                            <LabelFilterItem
-                                labelKey={labelKey}
-                                options={values}
-                                value={currentSelection}
-                                onChange={(newValues) =>
-                                    onLabelChange(labelKey, newValues)
-                                }
-                                handleAllToggle={onAllToggle}
-                            />
-                        </StyledGridItem>
-                    );
-                })}
-            </StyledGrid>
+            <FormGroup>
+                <StyledGrid>
+                    {labels.map(([labelKey, values]) => {
+                        const currentSelection = labelSelectors[labelKey] || [];
+                        return (
+                            <StyledGridItem key={labelKey}>
+                                <LabelFilterItem
+                                    labelKey={labelKey}
+                                    options={values}
+                                    value={currentSelection}
+                                    onChange={(newValues) =>
+                                        onLabelChange(labelKey, newValues)
+                                    }
+                                    handleAllToggle={onAllToggle}
+                                />
+                            </StyledGridItem>
+                        );
+                    })}
+                </StyledGrid>
+            </FormGroup>
         </StyledContainer>
     );
 };
diff --git a/frontend/src/component/impact-metrics/RegisterMetricDialog/DefineMetricForm.tsx b/frontend/src/component/impact-metrics/RegisterMetricDialog/DefineMetricForm.tsx
index c8ca9fc33d..d1240d661a 100644
--- a/frontend/src/component/impact-metrics/RegisterMetricDialog/DefineMetricForm.tsx
+++ b/frontend/src/component/impact-metrics/RegisterMetricDialog/DefineMetricForm.tsx
@@ -1,7 +1,5 @@
 import { type FormEvent, useId, useState } from 'react';
 import {
-    FormControl,
-    FormLabel,
     Radio,
     RadioGroup,
     TextField,
@@ -9,6 +7,8 @@ import {
     styled,
 } from '@mui/material';
 import { Card } from './RegisterMetricDialog.styles';
+import { FormField } from 'component/common/FormField/FormField';
+import { FormGroup } from 'component/common/FormGroup/FormGroup';
 import { useRegisterImpactMetricApi } from 'hooks/api/actions/useImpactMetricsApi/useRegisterImpactMetricApi';
 import type { RegisterImpactMetricSchemaType } from 'openapi';
 import useToast from 'hooks/useToast';
@@ -20,21 +20,14 @@ type DefineMetricFormProps = {
 };
 
 const StyledForm = styled('form')(({ theme }) => ({
-    backgroundColor: theme.palette.background.elevation1,
-    borderRadius: theme.shape.borderRadius,
-    border: `1px solid ${theme.palette.divider}`,
-    padding: theme.spacing(2),
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2),
-}));
-
-const StyledLabel = styled(FormLabel)(({ theme }) => ({
-    color: theme.palette.text.primary,
-    '&.Mui-focused': {
-        color: 'currentColor',
+    // Gap owns the spacing; drop the FormFields' own bottom margin so it isn't
+    // doubled up.
+    '&& > *': {
+        marginBottom: 0,
     },
-    marginBottom: theme.spacing(1),
 }));
 
 const RadioCardContainer = styled(Card)(({ theme }) => ({
@@ -98,8 +91,6 @@ export const DefineMetricForm = ({
     const [metricType, setMetricType] =
         useState<RegisterImpactMetricSchemaType>(defaultMetricType);
     const { registerImpactMetric, loading } = useRegisterImpactMetricApi();
-    const metricNameInputId = useId();
-    const radioGroupLabelId = useId();
     const { setToastApiError } = useToast();
 
     const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
@@ -120,36 +111,18 @@ export const DefineMetricForm = ({
 
     return (
         <StyledForm id={formId} onSubmit={handleSubmit}>
-            <FormControl
-                sx={(theme) => ({
-                    '.MuiFormHelperText-root, label': {
-                        transition: 'color 0.2s ease',
-                    },
-                    ':has(input:invalid:not(:placeholder-shown))': {
-                        '.MuiFormHelperText-root, label': {
-                            color: theme.palette.error.main,
-                        },
-                    },
-                })}
+            <FormField
+                label='Metric name'
+                description='Use letters, numbers, colons, and underscores. Be descriptive and specific.'
             >
-                <StyledLabel htmlFor={metricNameInputId}>
-                    Metric name
-                </StyledLabel>
                 <TextField
-                    id={metricNameInputId}
                     value={metricName}
                     onChange={(event) => setMetricName(event.target.value)}
                     placeholder='e.g., checkout_error_count'
                     variant='outlined'
-                    size='small'
+                    size='large'
                     fullWidth
                     required
-                    helperText={`Use letters, numbers, colons, and underscores. Be descriptive and specific.`}
-                    sx={{
-                        '.MuiFormHelperText-root': {
-                            marginInline: 0,
-                        },
-                    }}
                     slotProps={{
                         htmlInput: {
                             pattern: '^[a-zA-Z_:][a-zA-Z0-9_:]*$',
@@ -157,39 +130,39 @@ export const DefineMetricForm = ({
                         },
                     }}
                 />
-            </FormControl>
+            </FormField>
 
-            <FormControl>
-                <StyledLabel htmlFor={radioGroupLabelId}>
-                    Metric type
-                </StyledLabel>
-                <StyledRadioGroup
-                    onChange={(e) =>
-                        setMetricType(
-                            e.target.value as RegisterImpactMetricSchemaType,
-                        )
-                    }
-                    id={radioGroupLabelId}
-                    defaultValue={defaultMetricType}
-                    name='metricType'
-                >
-                    <RadioCard
-                        value='counter'
-                        description='Tracks values that only increase (e.g., error counts, request counts)'
-                        examples={'client_error_count, total_purchases'}
-                    />
-                    <RadioCard
-                        value='gauge'
-                        description='Tracks values that can go up or down (e.g., active users, queue size'
-                        examples={'active_connections, memory_usage'}
-                    />
-                    <RadioCard
-                        value='histogram'
-                        description='Tracks the distribution of values, (e.g., response times, payload sizes)'
-                        examples={'request_duration_ms, payload_size_bytes'}
-                    />
-                </StyledRadioGroup>
-            </FormControl>
+            <FormField label='Metric type'>
+                <FormGroup>
+                    <StyledRadioGroup
+                        aria-label='Metric type'
+                        onChange={(e) =>
+                            setMetricType(
+                                e.target
+                                    .value as RegisterImpactMetricSchemaType,
+                            )
+                        }
+                        defaultValue={defaultMetricType}
+                        name='metricType'
+                    >
+                        <RadioCard
+                            value='counter'
+                            description='Tracks values that only increase (e.g., error counts, request counts)'
+                            examples={'client_error_count, total_purchases'}
+                        />
+                        <RadioCard
+                            value='gauge'
+                            description='Tracks values that can go up or down (e.g., active users, queue size'
+                            examples={'active_connections, memory_usage'}
+                        />
+                        <RadioCard
+                            value='histogram'
+                            description='Tracks the distribution of values, (e.g., response times, payload sizes)'
+                            examples={'request_duration_ms, payload_size_bytes'}
+                        />
+                    </StyledRadioGroup>
+                </FormGroup>
+            </FormField>
         </StyledForm>
     );
 };
diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx
index 1559ff4760..44f91e1dfd 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx
+++ b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx
@@ -64,21 +64,6 @@ export const StyledTitle = forwardRef<
     </Typography>
 ));
 
-export const StyledAddonParameterContainer = styled('div')({
-    marginTop: '25px',
-});
-
-export const StyledConfigurationSection = styled('section')(({ theme }) => ({
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: theme.palette.neutral.border,
-    borderRadius: `${theme.shape.borderRadiusLarge}px`,
-    padding: theme.spacing(3),
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(3),
-}));
-
 export const StyledRaisedSection: FC<ComponentProps<typeof Paper>> = ({
     ...props
 }) => (
diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx
index fe282df148..cc52780b95 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx
+++ b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx
@@ -42,10 +42,9 @@ import {
     StyledContainer,
     StyledButtonContainer,
     StyledButtonSection,
-    StyledConfigurationSection,
-    StyledTitle,
-    StyledRaisedSection,
 } from './IntegrationForm.styles';
+import { FormField } from 'component/common/FormField/FormField';
+import { FormGroup } from 'component/common/FormGroup/FormGroup';
 import { GO_BACK } from 'constants/navigate';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { IntegrationDelete } from './IntegrationDelete/IntegrationDelete.tsx';
@@ -63,6 +62,14 @@ const StyledHeader = styled('div')(({ theme }) => ({
     marginBottom: theme.fontSizes.mainHeader,
 }));
 
+// A section whose title (and optional description) sit outside/above the
+// bordered FormGroup that holds the related controls.
+const StyledTitledGroup = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1.5),
+}));
+
 const StyledHeaderTitle = styled('h1')({
     fontWeight: 'normal',
 });
@@ -350,7 +357,7 @@ export const IntegrationForm: FC<IntegrationFormProps> = ({
                         )}
                     />
                     <StyledTextField
-                        size='small'
+                        size='large'
                         label='Provider'
                         name='provider'
                         value={formValues.provider}
@@ -359,13 +366,13 @@ export const IntegrationForm: FC<IntegrationFormProps> = ({
                         variant='outlined'
                     />
                     <IntegrationHowToSection provider={provider} />
-                    <StyledRaisedSection>
+                    <FormGroup>
                         <IntegrationStateSwitch
                             checked={formValues.enabled}
                             onClick={onEnabled}
                         />
-                    </StyledRaisedSection>
-                    <StyledRaisedSection>
+                    </FormGroup>
+                    <FormGroup>
                         <ConditionallyRender
                             condition={Boolean(installation)}
                             show={() => (
@@ -383,31 +390,30 @@ export const IntegrationForm: FC<IntegrationFormProps> = ({
                             editMode={editMode}
                             setParameterValue={setParameterValue}
                         />
-                    </StyledRaisedSection>
-                    <StyledConfigurationSection>
+                    </FormGroup>
+                    <StyledTitledGroup>
                         <Typography component='h3' variant='h3'>
                             Configuration
                         </Typography>
-                        <div>
-                            <StyledTitle>
-                                What is your integration description?
-                            </StyledTitle>
-                            <StyledTextField
-                                size='small'
-                                minRows={1}
-                                multiline
+                        <FormGroup>
+                            <FormField
                                 label='Description'
-                                name='description'
-                                placeholder=''
-                                value={formValues.description}
-                                error={Boolean(errors.description)}
-                                helperText={errors.description}
-                                onChange={setFieldValue('description')}
-                                variant='outlined'
-                            />
-                        </div>
-
-                        <div>
+                                description='What is your integration description?'
+                            >
+                                <StyledTextField
+                                    size='large'
+                                    minRows={1}
+                                    multiline
+                                    label=''
+                                    name='description'
+                                    placeholder=''
+                                    value={formValues.description}
+                                    error={Boolean(errors.description)}
+                                    helperText={errors.description}
+                                    onChange={setFieldValue('description')}
+                                    variant='outlined'
+                                />
+                            </FormField>
                             <IntegrationMultiSelector
                                 options={selectableEvents || []}
                                 selectedItems={formValues.events}
@@ -417,8 +423,6 @@ export const IntegrationForm: FC<IntegrationFormProps> = ({
                                 description='Select which events you want your integration to be notified about.'
                                 required
                             />
-                        </div>
-                        <div>
                             <IntegrationMultiSelector
                                 options={selectableProjects}
                                 selectedItems={formValues.projects || []}
@@ -427,8 +431,6 @@ export const IntegrationForm: FC<IntegrationFormProps> = ({
                                 description='Selecting project(s) will filter events, so that your integration only receives events related to those specific projects.'
                                 note='If no projects are selected, the integration will receive events from all projects.'
                             />
-                        </div>
-                        <div>
                             <IntegrationMultiSelector
                                 options={selectableEnvironments}
                                 selectedItems={formValues.environments || []}
@@ -437,8 +439,8 @@ export const IntegrationForm: FC<IntegrationFormProps> = ({
                                 description='Selecting environment(s) will filter events, so that your integration only receives events related to those specific environments. Global events that are not specific to an environment will still be received.'
                                 note='If no environments are selected, the integration will receive events from all environments.'
                             />
-                        </div>
-                    </StyledConfigurationSection>
+                        </FormGroup>
+                    </StyledTitledGroup>
                     <ConditionallyRender
                         condition={editMode}
                         show={
diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx
index 7c8a1eff9a..dcfb06b252 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx
+++ b/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx
@@ -8,14 +8,14 @@ import { styled } from '@mui/system';
 import {
     capitalize,
     Checkbox,
+    Chip,
     Paper,
     TextField,
     Autocomplete,
-    Typography,
 } from '@mui/material';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import { StyledHelpText, StyledTitle } from '../IntegrationForm.styles';
+import { FormField } from 'component/common/FormField/FormField';
 
 export interface IIntegrationMultiSelectorProps {
     options: IAutocompleteBoxOption[];
@@ -52,14 +52,6 @@ export const IntegrationMultiSelector: FC<IIntegrationMultiSelectorProps> = ({
             error={Boolean(error)}
             helperText={error || note}
             variant='outlined'
-            label={
-                <>
-                    {capitalize(`${entityName}s`)}
-                    {required ? (
-                        <Typography component='span'>*</Typography>
-                    ) : null}
-                </>
-            }
             placeholder={`Select ${entityName}s to filter by`}
             onFocus={onFocus}
             data-testid={`select-${entityName}-input`}
@@ -85,11 +77,17 @@ export const IntegrationMultiSelector: FC<IIntegrationMultiSelectorProps> = ({
     };
 
     return (
-        <>
-            <StyledTitle>{capitalize(`${entityName}s`)}</StyledTitle>
-            <StyledHelpText>{description}</StyledHelpText>
+        <FormField
+            label={
+                <>
+                    {capitalize(`${entityName}s`)}
+                    {required ? '*' : ''}
+                </>
+            }
+            description={description}
+        >
             <Autocomplete
-                size='small'
+                size='large'
                 multiple
                 limitTags={2}
                 options={options}
@@ -98,6 +96,19 @@ export const IntegrationMultiSelector: FC<IIntegrationMultiSelectorProps> = ({
                 fullWidth
                 renderOption={renderOption}
                 renderInput={renderInput}
+                renderValue={(value, getItemProps) =>
+                    value.map((option, index) => {
+                        const { key, ...itemProps } = getItemProps({ index });
+                        return (
+                            <Chip
+                                size='small'
+                                key={key}
+                                {...itemProps}
+                                label={option.label}
+                            />
+                        );
+                    })
+                }
                 value={options.filter((option) =>
                     selectedItems.includes(option.value),
                 )}
@@ -109,6 +120,6 @@ export const IntegrationMultiSelector: FC<IIntegrationMultiSelectorProps> = ({
                     paper: CustomPaper,
                 }}
             />
-        </>
+        </FormField>
     );
 };
diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameter.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameter.tsx
index 808a296442..dece3f37ff 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameter.tsx
+++ b/frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameter.tsx
@@ -1,5 +1,4 @@
 import type { ChangeEventHandler } from 'react';
-import { StyledAddonParameterContainer } from '../../IntegrationForm.styles';
 import type { AddonParameterSchema, AddonSchema } from 'openapi';
 import { IntegrationParameterTextField } from './IntegrationParameterTextField.tsx';
 
@@ -17,13 +16,11 @@ export const IntegrationParameter = ({
     setParameterValue,
 }: IIntegrationParameterProps) => {
     return (
-        <StyledAddonParameterContainer>
-            <IntegrationParameterTextField
-                config={config}
-                definition={definition}
-                parametersErrors={parametersErrors}
-                setParameterValue={setParameterValue}
-            />
-        </StyledAddonParameterContainer>
+        <IntegrationParameterTextField
+            config={config}
+            definition={definition}
+            parametersErrors={parametersErrors}
+            setParameterValue={setParameterValue}
+        />
     );
 };
diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameterTextField.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameterTextField.tsx
index c632f39500..3facf63556 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameterTextField.tsx
+++ b/frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameterTextField.tsx
@@ -1,8 +1,9 @@
-import { TextField, Typography } from '@mui/material';
+import { TextField } from '@mui/material';
 import type { AddonParameterSchema, AddonSchema } from 'openapi';
 import type { ChangeEventHandler } from 'react';
 import { styled } from '@mui/material';
 import { Markdown } from 'component/common/Markdown/Markdown';
+import { FormField } from 'component/common/FormField/FormField';
 
 const MASKED_VALUE = '*****';
 
@@ -41,38 +42,32 @@ export const IntegrationParameterTextField = ({
     const error = parametersErrors[definition.name];
 
     return (
-        <StyledTextField
-            size='small'
-            minRows={definition.type === 'textfield' ? 5 : 0}
-            multiline={definition.type === 'textfield'}
-            type={type}
-            label={
-                <>
-                    {definition.displayName}
-                    {definition.required ? (
-                        <Typography component='span'>*</Typography>
-                    ) : null}
-                </>
-            }
-            name={definition.name}
-            placeholder={definition.placeholder || ''}
-            slotProps={{
-                inputLabel: {
-                    shrink: true,
-                },
-                formHelperText: {
-                    component: 'div',
-                },
-            }}
-            value={value}
-            error={Boolean(error)}
-            onChange={setParameterValue(definition.name)}
-            variant='outlined'
-            helperText={
-                definition.description ? (
-                    <Markdown>{definition.description}</Markdown>
-                ) : undefined
-            }
-        />
+        <FormField
+            label={`${definition.displayName}${definition.required ? '*' : ''}`}
+        >
+            <StyledTextField
+                size='large'
+                minRows={definition.type === 'textfield' ? 5 : 0}
+                multiline={definition.type === 'textfield'}
+                type={type}
+                label=''
+                name={definition.name}
+                placeholder={definition.placeholder || ''}
+                slotProps={{
+                    formHelperText: {
+                        component: 'div',
+                    },
+                }}
+                value={value}
+                error={Boolean(error)}
+                onChange={setParameterValue(definition.name)}
+                variant='outlined'
+                helperText={
+                    definition.description ? (
+                        <Markdown>{definition.description}</Markdown>
+                    ) : undefined
+                }
+            />
+        </FormField>
     );
 };
diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationStateSwitch/IntegrationStateSwitch.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationStateSwitch/IntegrationStateSwitch.tsx
index d43b2e46d3..2740f2be87 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationStateSwitch/IntegrationStateSwitch.tsx
+++ b/frontend/src/component/integrations/IntegrationForm/IntegrationStateSwitch/IntegrationStateSwitch.tsx
@@ -25,7 +25,14 @@ export const IntegrationStateSwitch: FC<IIntegrationStateSwitchProps> = ({
 }) => {
     return (
         <StyledContainer>
-            <Typography component='span'>Integration status</Typography>
+            <Typography
+                component='span'
+                sx={(theme) => ({
+                    fontWeight: theme.typography.fontWeightBold,
+                })}
+            >
+                Integration status
+            </Typography>
             <FormControlLabel
                 control={<Switch checked={checked} onClick={onClick} />}
                 label={
diff --git a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx
index dfd1cbea92..336cde83a4 100644
--- a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx
@@ -15,7 +15,10 @@ import {
     useTheme,
     Autocomplete,
     Checkbox,
+    styled,
 } from '@mui/material';
+import { FormField } from 'component/common/FormField/FormField';
+import { FormGroup } from 'component/common/FormGroup/FormGroup';
 
 import debounce from 'debounce';
 import { formatUnknownError } from 'utils/formatUnknownError';
@@ -38,6 +41,22 @@ interface IPlaygroundCodeFieldsetProps {
     setContext: Dispatch<SetStateAction<string | undefined>>;
 }
 
+// The "add a context value" row: field select, value input and the add button.
+const StyledValueRow = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: '200px 1fr auto',
+    gap: theme.spacing(2),
+    // Bottom-align so the button sits on the inputs' baseline, not the labels.
+    alignItems: 'end',
+    // Spacing is owned by the grid; drop the FormFields' own bottom margins.
+    '&& > *': {
+        marginBottom: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        gridTemplateColumns: '1fr',
+    },
+}));
+
 const createContextFieldOptions = (
     context: IUnleashContextDefinition[],
 ): SelectOptionGroup[] => {
@@ -203,22 +222,16 @@ export const PlaygroundCodeFieldset: FC<IPlaygroundCodeFieldsetProps> = ({
             return (
                 <TextField
                     id='date'
-                    label='Date'
-                    size='small'
+                    size='large'
                     type='datetime-local'
                     value={value}
-                    sx={{ width: 200, maxWidth: '100%' }}
+                    fullWidth
                     onChange={(e) => {
                         const parsedDate = parseValidDate(e.target.value);
                         const dateString = parsedDate?.toISOString();
                         dateString && setContextValue(dateString);
                     }}
                     required
-                    slotProps={{
-                        inputLabel: {
-                            shrink: true,
-                        },
-                    }}
                 />
             );
         }
@@ -236,7 +249,7 @@ export const PlaygroundCodeFieldset: FC<IPlaygroundCodeFieldsetProps> = ({
                     multiple={true}
                     options={options}
                     disableCloseOnSelect
-                    size='small'
+                    size='large'
                     value={resolveAutocompleteValue()}
                     onChange={changeContextValue}
                     getOptionLabel={(option) => option}
@@ -259,21 +272,18 @@ export const PlaygroundCodeFieldset: FC<IPlaygroundCodeFieldsetProps> = ({
                             </li>
                         );
                     }}
-                    sx={{ width: 370, maxWidth: '100%' }}
-                    renderInput={(params) => (
-                        <TextField {...params} label='Value' />
-                    )}
+                    fullWidth
+                    renderInput={(params) => <TextField {...params} />}
                 />
             );
         }
 
         return (
             <TextField
-                label='Value'
                 id='context-value'
-                sx={{ width: 370, maxWidth: '100%' }}
+                fullWidth
                 placeholder={'value1,value2,value3'}
-                size='small'
+                size='large'
                 value={contextValue}
                 onChange={(event) => setContextValue(event.target.value || '')}
             />
@@ -296,41 +306,48 @@ export const PlaygroundCodeFieldset: FC<IPlaygroundCodeFieldsetProps> = ({
                 <Typography
                     variant='body2'
                     color={theme.palette.text.primary}
-                    sx={{ ml: 1 }}
+                    sx={{ ml: 1, fontWeight: 'bold' }}
                 >
                     Unleash context
                 </Typography>
             </Box>
 
-            <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', mb: 2 }}>
-                <GeneralSelect
-                    label='Context field'
-                    labelId='context-field-label'
-                    id='context-field'
-                    value={contextField}
-                    onChange={changeContextField}
-                    variant='outlined'
-                    size='small'
-                    sx={{ width: 200, maxWidth: '100%' }}
-                    options={contextOptions}
+            <FormGroup>
+                <StyledValueRow>
+                    <FormField label='Context field'>
+                        <GeneralSelect
+                            value={contextField}
+                            onChange={changeContextField}
+                            options={contextOptions}
+                            fullWidth
+                        />
+                    </FormField>
+                    <FormField
+                        label={
+                            contextField === 'currentTime' ? 'Date' : 'Value'
+                        }
+                    >
+                        {resolveInput()}
+                    </FormField>
+                    {/* Spacer label aligns the button with the inputs, not the
+                        labels above them. */}
+                    <FormField label={' '}>
+                        <Button
+                            variant='outlined'
+                            disabled={!contextField || Boolean(error)}
+                            onClick={onAddField}
+                        >
+                            {fieldExist ? 'Replace' : 'Add'}
+                        </Button>
+                    </FormField>
+                </StyledValueRow>
+
+                <PlaygroundEditor
+                    context={context}
+                    setContext={setContext}
+                    error={error}
                 />
-
-                {resolveInput()}
-                <Button
-                    variant='outlined'
-                    disabled={!contextField || Boolean(error)}
-                    onClick={onAddField}
-                    sx={{ width: '95px', maxHeight: '40px' }}
-                >
-                    {`${!fieldExist ? 'Add' : 'Replace'} `}
-                </Button>
-            </Box>
-
-            <PlaygroundEditor
-                context={context}
-                setContext={setContext}
-                error={error}
-            />
+            </FormGroup>
         </Box>
     );
 };
diff --git a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/EnvironmentsField/EnvironmentsField.tsx b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/EnvironmentsField/EnvironmentsField.tsx
index 1324610386..8f96a8e162 100644
--- a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/EnvironmentsField/EnvironmentsField.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/EnvironmentsField/EnvironmentsField.tsx
@@ -1,5 +1,6 @@
 import type { ComponentProps, Dispatch, FC, SetStateAction } from 'react';
 import { Autocomplete, Chip, TextField } from '@mui/material';
+import { FormField } from 'component/common/FormField/FormField';
 import { renderOption } from '../../renderOption.tsx';
 
 interface IEnvironmentsFieldProps {
@@ -48,37 +49,36 @@ export const EnvironmentsField: FC<IEnvironmentsFieldProps> = ({
     };
 
     return (
-        <Autocomplete
-            disablePortal
-            limitTags={3}
-            id='environment'
-            multiple={true}
-            options={environmentOptions}
-            sx={{ flex: 1 }}
-            renderInput={(params) => (
-                <TextField {...params} label='Environments' />
-            )}
-            renderOption={renderOption}
-            renderValue={(value, getItemProps) => {
-                return value.map((option, index) => {
-                    const { key, ...props } = getItemProps({ index });
-                    return (
-                        <Chip
-                            size='small'
-                            key={key}
-                            {...props}
-                            label={option.label}
-                        />
-                    );
-                });
-            }}
-            getOptionLabel={({ label }) => label}
-            disableCloseOnSelect={false}
-            size='small'
-            value={envValue}
-            onChange={onEnvironmentsChange}
-            disabled={disabled}
-            data-testid={'PLAYGROUND_ENVIRONMENT_SELECT'}
-        />
+        <FormField label='Environments'>
+            <Autocomplete
+                disablePortal
+                limitTags={3}
+                multiple={true}
+                options={environmentOptions}
+                fullWidth
+                renderInput={(params) => <TextField {...params} />}
+                renderOption={renderOption}
+                renderValue={(value, getItemProps) => {
+                    return value.map((option, index) => {
+                        const { key, ...props } = getItemProps({ index });
+                        return (
+                            <Chip
+                                size='small'
+                                key={key}
+                                {...props}
+                                label={option.label}
+                            />
+                        );
+                    });
+                }}
+                getOptionLabel={({ label }) => label}
+                disableCloseOnSelect={false}
+                size='large'
+                value={envValue}
+                onChange={onEnvironmentsChange}
+                disabled={disabled}
+                data-testid={'PLAYGROUND_ENVIRONMENT_SELECT'}
+            />
+        </FormField>
     );
 };
diff --git a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx
index f45ddd3b38..727c0e3603 100644
--- a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx
@@ -22,6 +22,8 @@ import {
     useApiTokens,
 } from 'hooks/api/getters/useApiTokens/useApiTokens';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
+import { FormGroup } from 'component/common/FormGroup/FormGroup';
 import {
     extractProjectEnvironmentFromToken,
     validateTokenFormat,
@@ -62,7 +64,9 @@ const StyledInput = styled(Input)(() => ({
 const StyledGrid = styled(Box)(({ theme }) => ({
     display: 'grid',
     columnGap: theme.spacing(2),
-    rowGap: theme.spacing(2),
+    // Vertical rhythm comes from each field's own FormField margin so rows line
+    // up regardless of how deeply the control is wrapped (e.g. tooltips).
+    rowGap: 0,
     gridTemplateColumns: '1fr',
 
     [theme.breakpoints.up('md')]: {
@@ -70,6 +74,21 @@ const StyledGrid = styled(Box)(({ theme }) => ({
     },
 }));
 
+// Pairs the change request input with its action button, aligning the button to
+// the input baseline rather than the label above it.
+const StyledChangeRequestRow = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+    alignItems: 'flex-end',
+    '& > *': {
+        marginBottom: 0,
+    },
+    // The input takes the remaining width; the button keeps its content width.
+    '& > *:first-of-type': {
+        flex: 1,
+    },
+}));
+
 const StyledChangeRequestInput = styled(StyledInput)(({ theme }) => ({
     '& label': {
         WebkitTextFillColor: theme.palette.text.secondary,
@@ -193,13 +212,13 @@ export const PlaygroundConnectionFieldset: FC<
                 <Typography
                     variant='body2'
                     color={theme.palette.text.primary}
-                    sx={{ ml: 1 }}
+                    sx={{ ml: 1, fontWeight: 'bold' }}
                 >
                     Access configuration
                 </Typography>
             </Box>
-            <StyledGrid>
-                <Box>
+            <FormGroup>
+                <StyledGrid>
                     <Tooltip
                         arrow
                         title={
@@ -217,8 +236,6 @@ export const PlaygroundConnectionFieldset: FC<
                             />
                         </Box>
                     </Tooltip>
-                </Box>
-                <Box>
                     <Tooltip
                         arrow
                         title={
@@ -227,93 +244,97 @@ export const PlaygroundConnectionFieldset: FC<
                                 : 'Select projects to use in the playground'
                         }
                     >
-                        <ProjectSelect
-                            selectedProjects={projects}
-                            onChange={setProjects}
-                            dataTestId={'PLAYGROUND_PROJECT_SELECT'}
-                            disabled={Boolean(token || changeRequest)}
-                            limitTags={3}
-                        />
+                        <Box>
+                            <FormField label='Projects'>
+                                <ProjectSelect
+                                    selectedProjects={projects}
+                                    onChange={setProjects}
+                                    dataTestId={'PLAYGROUND_PROJECT_SELECT'}
+                                    disabled={Boolean(token || changeRequest)}
+                                    limitTags={3}
+                                />
+                            </FormField>
+                        </Box>
                     </Tooltip>
-                </Box>
-                <Box>
-                    <StyledInput
-                        label='API token'
-                        value={token || (changeRequest ? ' ' : '')}
-                        onChange={onSetToken}
-                        type={'text'}
-                        error={Boolean(tokenError)}
-                        errorText={tokenError}
-                        placeholder={'Enter your API token'}
-                        data-testid={'PLAYGROUND_TOKEN_INPUT'}
-                        slotProps={{
-                            input: {
-                                endAdornment: token ? (
-                                    <InputAdornment
-                                        position='end'
-                                        data-testid='TOKEN_INPUT_CLEAR_BTN'
-                                    >
-                                        <IconButton
-                                            aria-label='clear API token'
-                                            onClick={clearToken}
-                                            edge='end'
+                    <FormField label='API token'>
+                        <StyledInput
+                            label=''
+                            value={token || (changeRequest ? ' ' : '')}
+                            onChange={onSetToken}
+                            type={'text'}
+                            error={Boolean(tokenError)}
+                            errorText={tokenError}
+                            placeholder={'Enter your API token'}
+                            data-testid={'PLAYGROUND_TOKEN_INPUT'}
+                            slotProps={{
+                                input: {
+                                    endAdornment: token ? (
+                                        <InputAdornment
+                                            position='end'
+                                            data-testid='TOKEN_INPUT_CLEAR_BTN'
                                         >
-                                            <SmallClear />
-                                        </IconButton>
-                                    </InputAdornment>
-                                ) : null,
-                            },
-                        }}
-                        disabled={Boolean(changeRequest)}
+                                            <IconButton
+                                                aria-label='clear API token'
+                                                onClick={clearToken}
+                                                edge='end'
+                                            >
+                                                <SmallClear />
+                                            </IconButton>
+                                        </InputAdornment>
+                                    ) : null,
+                                },
+                            }}
+                            disabled={Boolean(changeRequest)}
+                        />
+                    </FormField>
+                    <ConditionallyRender
+                        condition={Boolean(changeRequest)}
+                        show={
+                            <StyledChangeRequestRow>
+                                <FormField label='Change request'>
+                                    <StyledChangeRequestInput
+                                        label=''
+                                        value={
+                                            changeRequest
+                                                ? `Change request #${changeRequest}`
+                                                : ''
+                                        }
+                                        onChange={() => {}}
+                                        type={'text'}
+                                        disabled
+                                        slotProps={{
+                                            input: {
+                                                endAdornment: (
+                                                    <InputAdornment position='end'>
+                                                        <IconButton
+                                                            aria-label='clear Change request results'
+                                                            onClick={
+                                                                onClearChangeRequest
+                                                            }
+                                                            edge='end'
+                                                        >
+                                                            <SmallClear />
+                                                        </IconButton>
+                                                    </InputAdornment>
+                                                ),
+                                            },
+                                        }}
+                                    />
+                                </FormField>
+                                <Button
+                                    variant='outlined'
+                                    size='medium'
+                                    to={`/projects/${projects[0]}/change-requests/${changeRequest}`}
+                                    component={Link}
+                                    nativeButton={false}
+                                >
+                                    View change request
+                                </Button>
+                            </StyledChangeRequestRow>
+                        }
                     />
-                </Box>
-                <ConditionallyRender
-                    condition={Boolean(changeRequest)}
-                    show={
-                        <Box sx={{ display: 'flex', gap: 2 }}>
-                            <Box sx={{ flex: 1 }}>
-                                <StyledChangeRequestInput
-                                    label='Change request'
-                                    value={
-                                        changeRequest
-                                            ? `Change request #${changeRequest}`
-                                            : ''
-                                    }
-                                    onChange={() => {}}
-                                    type={'text'}
-                                    disabled
-                                    slotProps={{
-                                        input: {
-                                            endAdornment: (
-                                                <InputAdornment position='end'>
-                                                    <IconButton
-                                                        aria-label='clear Change request results'
-                                                        onClick={
-                                                            onClearChangeRequest
-                                                        }
-                                                        edge='end'
-                                                    >
-                                                        <SmallClear />
-                                                    </IconButton>
-                                                </InputAdornment>
-                                            ),
-                                        },
-                                    }}
-                                />
-                            </Box>
-                            <Button
-                                variant='outlined'
-                                size='medium'
-                                to={`/projects/${projects[0]}/change-requests/${changeRequest}`}
-                                component={Link}
-                                nativeButton={false}
-                            >
-                                View change request
-                            </Button>
-                        </Box>
-                    }
-                />
-            </StyledGrid>
+                </StyledGrid>
+            </FormGroup>
         </Box>
     );
 };
diff --git a/frontend/src/component/project/Project/CreateProject/CreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/CreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx
index 1516ed8940..cd18dbc93c 100644
--- a/frontend/src/component/project/Project/CreateProject/CreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/CreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx
@@ -108,7 +108,7 @@ export const ChangeRequestTableConfigButton: FC<
         >
             <TableSearchInput
                 variant='outlined'
-                size='small'
+                size='large'
                 value={searchText}
                 onChange={(event) => setSearchText(event.target.value)}
                 hideLabel
diff --git a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectEnterpriseSettingsForm.tsx b/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectEnterpriseSettingsForm.tsx
index 862de9853d..c6417a6cc9 100644
--- a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectEnterpriseSettingsForm.tsx
+++ b/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectEnterpriseSettingsForm.tsx
@@ -6,9 +6,16 @@ import React, {
 } from 'react';
 import Select from 'component/common/select';
 import type { ProjectMode } from '../hooks/useProjectEnterpriseSettingsForm.ts';
-import { Box, InputAdornment, styled, TextField } from '@mui/material';
+import {
+    Box,
+    InputAdornment,
+    styled,
+    TextField,
+    Typography,
+} from '@mui/material';
 import { CollaborationModeTooltip } from './CollaborationModeTooltip.tsx';
-import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
+import { FormGroup } from 'component/common/FormGroup/FormGroup';
 import { FeatureFlagNamingTooltip } from './FeatureFlagNamingTooltip.tsx';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import type { ProjectLinkTemplateSchema } from 'openapi';
@@ -44,15 +51,10 @@ const StyledSubtitle = styled('div')(({ theme }) => ({
     paddingBottom: theme.spacing(1),
 }));
 
-const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-    paddingRight: theme.spacing(1),
-}));
-
-const StyledTextField = styled(TextField)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
+const StyledLabelWithTooltip = styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
 }));
 
 const StyledFieldset = styled('fieldset')(() => ({
@@ -71,14 +73,6 @@ const StyledButtonContainer = styled('div')(() => ({
     justifyContent: 'flex-end',
 }));
 
-const StyledFlagNamingContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    gap: theme.spacing(1),
-    '& > *': { width: '100%' },
-}));
-
 const StyledPatternNamingExplanation = styled('div')(({ theme }) => ({
     'p + p': { marginTop: theme.spacing(1) },
 }));
@@ -232,29 +226,24 @@ const ProjectEnterpriseSettingsForm: React.FC<
                 trackPattern(featureNamingPattern);
             }}
         >
-            <>
-                <Box
-                    sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        marginBottom: 1,
-                        gap: 1,
-                    }}
-                >
-                    <p>What is your project collaboration mode?</p>
-                    <CollaborationModeTooltip />
-                </Box>
+            <FormField
+                label={
+                    <StyledLabelWithTooltip>
+                        Project collaboration mode
+                        <CollaborationModeTooltip />
+                    </StyledLabelWithTooltip>
+                }
+                description='What is your project collaboration mode?'
+            >
                 <StyledSelect
-                    id='project-mode'
                     value={projectMode}
-                    label='Project collaboration mode'
                     name='Project collaboration mode'
                     onChange={(e) => {
                         setProjectMode?.(e.target.value as ProjectMode);
                     }}
                     options={projectModeOptions}
                 />
-            </>
+            </FormField>
             <StyledFieldset>
                 <Box
                     sx={{
@@ -264,58 +253,63 @@ const ProjectEnterpriseSettingsForm: React.FC<
                         gap: 1,
                     }}
                 >
-                    <legend>Feature flag naming pattern</legend>
+                    <Typography variant='h4' component='legend'>
+                        Feature flag naming pattern
+                    </Typography>
                     <FeatureFlagNamingTooltip />
                 </Box>
-                <StyledSubtitle>
-                    <StyledPatternNamingExplanation id='pattern-naming-description'>
-                        <p>
-                            Define a{' '}
-                            <a
-                                href={`https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Cheatsheet`}
-                                target='_blank'
-                                rel='noreferrer'
-                            >
-                                JavaScript RegEx
-                            </a>{' '}
-                            used to enforce feature flag names within this
-                            project. The regex will be surrounded by a leading{' '}
-                            <code>^</code> and a trailing <code>$</code>.
-                        </p>
-                        <p>
-                            Leave it empty if you don’t want to add a naming
-                            pattern.
-                        </p>
-                    </StyledPatternNamingExplanation>
-                </StyledSubtitle>
-                <StyledFlagNamingContainer>
-                    <StyledInput
-                        label={'Naming Pattern'}
-                        name='feature flag naming pattern'
-                        aria-describedby='pattern-naming-description'
-                        placeholder='[A-Za-z]+.[A-Za-z]+.[A-Za-z0-9-]+'
-                        slotProps={{
-                            input: {
-                                startAdornment: (
-                                    <InputAdornment position='start'>
-                                        ^
-                                    </InputAdornment>
-                                ),
-                                endAdornment: (
-                                    <InputAdornment position='end'>
-                                        $
-                                    </InputAdornment>
-                                ),
-                            },
-                        }}
-                        type={'text'}
-                        value={featureNamingPattern || ''}
-                        error={Boolean(errors.featureNamingPattern)}
-                        errorText={errors.featureNamingPattern}
-                        onChange={(e) =>
-                            onSetFeatureNamingPattern(e.target.value)
-                        }
-                    />
+                <FormGroup>
+                    <StyledSubtitle>
+                        <StyledPatternNamingExplanation id='pattern-naming-description'>
+                            <p>
+                                Define a{' '}
+                                <a
+                                    href={`https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Cheatsheet`}
+                                    target='_blank'
+                                    rel='noreferrer'
+                                >
+                                    JavaScript RegEx
+                                </a>{' '}
+                                used to enforce feature flag names within this
+                                project. The regex will be surrounded by a
+                                leading <code>^</code> and a trailing{' '}
+                                <code>$</code>.
+                            </p>
+                            <p>
+                                Leave it empty if you don’t want to add a naming
+                                pattern.
+                            </p>
+                        </StyledPatternNamingExplanation>
+                    </StyledSubtitle>
+                    <FormField label='Naming Pattern'>
+                        <TextField
+                            fullWidth
+                            name='feature flag naming pattern'
+                            aria-describedby='pattern-naming-description'
+                            placeholder='[A-Za-z]+.[A-Za-z]+.[A-Za-z0-9-]+'
+                            slotProps={{
+                                input: {
+                                    startAdornment: (
+                                        <InputAdornment position='start'>
+                                            ^
+                                        </InputAdornment>
+                                    ),
+                                    endAdornment: (
+                                        <InputAdornment position='end'>
+                                            $
+                                        </InputAdornment>
+                                    ),
+                                },
+                            }}
+                            type='text'
+                            value={featureNamingPattern || ''}
+                            error={Boolean(errors.featureNamingPattern)}
+                            helperText={errors.featureNamingPattern}
+                            onChange={(e) =>
+                                onSetFeatureNamingPattern(e.target.value)
+                            }
+                        />
+                    </FormField>
                     <StyledSubtitle>
                         <p id='pattern-additional-description'>
                             The example and description will be shown to users
@@ -323,35 +317,38 @@ const ProjectEnterpriseSettingsForm: React.FC<
                         </p>
                     </StyledSubtitle>
 
-                    <StyledInput
-                        label={'Naming Example'}
-                        name='feature flag naming example'
-                        type={'text'}
-                        aria-describedby='pattern-additional-description'
-                        value={featureNamingExample || ''}
-                        placeholder='dx.feature1.1-135'
-                        error={Boolean(errors.namingExample)}
-                        errorText={errors.namingExample}
-                        onChange={(e) =>
-                            onSetFeatureNamingExample(e.target.value)
-                        }
-                    />
-                    <StyledTextField
-                        label={'Naming pattern description'}
-                        name='feature flag naming description'
-                        type={'text'}
-                        aria-describedby='pattern-additional-description'
-                        placeholder={`<project>.<featureName>.<ticket>
+                    <FormField label='Naming Example'>
+                        <TextField
+                            fullWidth
+                            name='feature flag naming example'
+                            type='text'
+                            aria-describedby='pattern-additional-description'
+                            value={featureNamingExample || ''}
+                            placeholder='dx.feature1.1-135'
+                            error={Boolean(errors.namingExample)}
+                            helperText={errors.namingExample}
+                            onChange={(e) =>
+                                onSetFeatureNamingExample(e.target.value)
+                            }
+                        />
+                    </FormField>
+                    <FormField label='Naming pattern description'>
+                        <TextField
+                            fullWidth
+                            name='feature flag naming description'
+                            aria-describedby='pattern-additional-description'
+                            placeholder={`<project>.<featureName>.<ticket>
 
 The flag name should contain the project name, the feature name, and the ticket number, each separated by a dot.`}
-                        multiline
-                        minRows={5}
-                        value={featureNamingDescription || ''}
-                        onChange={(e) =>
-                            onSetFeatureNamingDescription(e.target.value)
-                        }
-                    />
-                </StyledFlagNamingContainer>
+                            multiline
+                            minRows={5}
+                            value={featureNamingDescription || ''}
+                            onChange={(e) =>
+                                onSetFeatureNamingDescription(e.target.value)
+                            }
+                        />
+                    </FormField>
+                </FormGroup>
 
                 <ProjectLinkTemplates
                     linkTemplates={linkTemplates || []}
diff --git a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx b/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx
index d409f256c9..d5bab0d3b6 100644
--- a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx
+++ b/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/ProjectLinkTemplates/ProjectLinkTemplateEditor.tsx
@@ -71,7 +71,7 @@ const ProjectLinkTemplateEditor = ({
                 onChange={(e) => setTemplateTitle(e.target.value)}
                 placeholder='e.g., GitHub Issue, Ticket number'
                 helperText='A descriptive name for the link.'
-                size='small'
+                size='large'
             />
             <TextField
                 label='URL Template'
@@ -84,7 +84,7 @@ const ProjectLinkTemplateEditor = ({
                     templateErrors.url ||
                     'You can optionally use placeholders {{project}} and {{feature}} that will be replaced with actual values.'
                 }
-                size='small'
+                size='large'
                 error={Boolean(templateErrors.url)}
             />
             <StyledDialogActions>
diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index 4b929441f6..ce7345cde0 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -3,7 +3,7 @@ import { trim } from 'component/common/util';
 import { StickinessSelect } from 'component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Box, styled, TextField } from '@mui/material';
-import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import { FeatureTogglesLimitTooltip } from './FeatureTogglesLimitTooltip.tsx';
 import type { ProjectMode } from '../hooks/useProjectEnterpriseSettingsForm.ts';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -40,45 +40,46 @@ const PROJECT_DESCRIPTION_INPUT = 'PROJECT_DESCRIPTION_INPUT';
 const StyledForm = styled('form')(({ theme }) => ({
     height: '100%',
     paddingBottom: theme.spacing(1),
+    // StickinessSelect (and the collaboration-mode Select) ship a legacy bottom
+    // margin; here the wrapping FormField owns the spacing, so drop it to keep
+    // the rhythm even. TextFields default to no margin, so this is a no-op there.
+    '& .MuiFormControl-root': {
+        marginBottom: 0,
+    },
 }));
 
-const StyledDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(1),
+const StyledLabelWithTooltip = styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
 }));
 
 const StyledSelect = styled(Select)(({ theme }) => ({
-    marginBottom: theme.spacing(2),
     minWidth: '200px',
 }));
 
-const StyledSubtitle = styled('div')(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    fontSize: theme.fontSizes.smallerBody,
-    lineHeight: 1.25,
-    paddingBottom: theme.spacing(1),
-}));
-
-const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-    paddingRight: theme.spacing(1),
-}));
-
-const StyledTextField = styled(TextField)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
 const StyledButtonContainer = styled('div')(() => ({
     marginTop: 'auto',
     display: 'flex',
     justifyContent: 'flex-end',
 }));
 
-const StyledInputContainer = styled('div')(() => ({
+const StyledInputContainer = styled('div')(({ theme }) => ({
     display: 'flex',
-    alignItems: 'center',
+    // Align the "x of y used" note to the input baseline, not the label above.
+    alignItems: 'flex-end',
+    gap: theme.spacing(1.5),
+    // Spacing is owned by the row, so drop the FormField's own margin and apply
+    // the standard FormField gap here, keeping the rhythm with the fields above
+    // and a consistent gap before the Save button below.
+    marginBottom: theme.spacing(2),
+    // The field grows; the note keeps its width.
+    '& > :first-of-type': {
+        flex: 1,
+    },
+    '& > *': {
+        marginBottom: 0,
+    },
 }));
 
 const ProjectForm: React.FC<IProjectForm> = ({
@@ -116,89 +117,92 @@ const ProjectForm: React.FC<IProjectForm> = ({
                 handleSubmit(submitEvent);
             }}
         >
-            <StyledDescription>What is your project Id?</StyledDescription>
-            <StyledInput
+            <FormField
                 label='Project Id'
-                value={projectId}
-                onChange={(e) => setProjectId(trim(e.target.value))}
-                error={Boolean(errors.id)}
-                errorText={errors.id}
-                onFocus={() => clearErrors()}
-                onBlur={validateProjectId}
-                disabled={mode === 'Edit'}
-                data-testid={PROJECT_ID_INPUT}
-                autoFocus
-                required
-            />
+                description='What is your project Id?'
+            >
+                <TextField
+                    fullWidth
+                    value={projectId}
+                    onChange={(e) => setProjectId(trim(e.target.value))}
+                    error={Boolean(errors.id)}
+                    helperText={errors.id}
+                    onFocus={() => clearErrors()}
+                    onBlur={validateProjectId}
+                    disabled={mode === 'Edit'}
+                    data-testid={PROJECT_ID_INPUT}
+                    autoFocus
+                    required
+                />
+            </FormField>
 
-            <StyledDescription>What is your project name?</StyledDescription>
-            <StyledInput
+            <FormField
                 label='Project name'
-                value={projectName}
-                onChange={(e) => setProjectName(e.target.value)}
-                error={Boolean(errors.name)}
-                errorText={errors.name}
-                onFocus={() => {
-                    delete errors.name;
-                }}
-                data-testid={PROJECT_NAME_INPUT}
-                required
-            />
+                description='What is your project name?'
+            >
+                <TextField
+                    fullWidth
+                    value={projectName}
+                    onChange={(e) => setProjectName(e.target.value)}
+                    error={Boolean(errors.name)}
+                    helperText={errors.name}
+                    onFocus={() => {
+                        delete errors.name;
+                    }}
+                    data-testid={PROJECT_NAME_INPUT}
+                    required
+                />
+            </FormField>
 
-            <StyledDescription>
-                What is your project description?
-            </StyledDescription>
-            <StyledTextField
+            <FormField
                 label='Project description'
-                variant='outlined'
-                multiline
-                maxRows={4}
-                value={projectDesc}
-                onChange={(e) => setProjectDesc(e.target.value)}
-                data-testid={PROJECT_DESCRIPTION_INPUT}
-            />
+                description='What is your project description?'
+            >
+                <TextField
+                    fullWidth
+                    multiline
+                    maxRows={4}
+                    value={projectDesc}
+                    onChange={(e) => setProjectDesc(e.target.value)}
+                    data-testid={PROJECT_DESCRIPTION_INPUT}
+                />
+            </FormField>
 
             <ConditionallyRender
                 condition={setProjectStickiness != null}
                 show={
-                    <>
-                        <StyledDescription>
-                            What is the default stickiness for the project?
-                        </StyledDescription>
+                    <FormField
+                        label='Stickiness'
+                        description='What is the default stickiness for the project?'
+                    >
                         <StickinessSelect
-                            label='Stickiness'
+                            label=''
                             value={projectStickiness}
                             data-testid={PROJECT_STICKINESS_SELECT}
                             onChange={(e) =>
                                 setProjectStickiness?.(e.target.value)
                             }
                         />
-                    </>
+                    </FormField>
                 }
             />
             <ConditionallyRender
                 condition={mode === 'Edit'}
                 show={() => (
-                    <>
-                        <Box
-                            sx={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                marginBottom: 1,
-                                gap: 1,
-                            }}
+                    <StyledInputContainer>
+                        <FormField
+                            label={
+                                <StyledLabelWithTooltip>
+                                    Feature flag limit
+                                    <FeatureTogglesLimitTooltip />
+                                </StyledLabelWithTooltip>
+                            }
+                            description='Leave it empty if you don’t want to add a limit'
                         >
-                            <p>Feature flag limit?</p>
-                            <FeatureTogglesLimitTooltip />
-                        </Box>
-                        <StyledSubtitle>
-                            Leave it empty if you don’t want to add a limit
-                        </StyledSubtitle>
-                        <StyledInputContainer>
-                            <StyledInput
-                                label={'Limit'}
+                            <TextField
+                                fullWidth
                                 name='value'
-                                type={'number'}
+                                type='number'
                                 value={
                                     featureLimit === 'null' ||
                                     featureLimit === undefined
@@ -209,47 +213,42 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                     setFeatureLimit!(e.target.value)
                                 }
                             />
-                            <ConditionallyRender
-                                condition={
-                                    featureCount !== undefined &&
-                                    Boolean(featureLimit)
-                                }
-                                show={
-                                    <Box>
-                                        ({featureCount} of {featureLimit} used)
-                                    </Box>
-                                }
-                            />
-                        </StyledInputContainer>
-                    </>
+                        </FormField>
+                        <ConditionallyRender
+                            condition={
+                                featureCount !== undefined &&
+                                Boolean(featureLimit)
+                            }
+                            show={
+                                <Box>
+                                    ({featureCount} of {featureLimit} used)
+                                </Box>
+                            }
+                        />
+                    </StyledInputContainer>
                 )}
             />
             <ConditionallyRender
                 condition={mode === 'Create' && isEnterprise()}
                 show={
-                    <>
-                        <Box
-                            sx={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                marginBottom: 1,
-                                gap: 1,
-                            }}
-                        >
-                            <p>What is your project collaboration mode?</p>
-                            <CollaborationModeTooltip />
-                        </Box>
+                    <FormField
+                        label={
+                            <StyledLabelWithTooltip>
+                                Project collaboration mode
+                                <CollaborationModeTooltip />
+                            </StyledLabelWithTooltip>
+                        }
+                        description='What is your project collaboration mode?'
+                    >
                         <StyledSelect
-                            id='project-mode'
                             value={projectMode}
-                            label='Project collaboration mode'
                             name='Project collaboration mode'
                             onChange={(e) => {
                                 setProjectMode?.(e.target.value as ProjectMode);
                             }}
                             options={projectModeOptions}
                         />
-                    </>
+                    </FormField>
                 }
             />
             <StyledButtonContainer>{children}</StyledButtonContainer>
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsForm.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsForm.tsx
index 13694a3f64..e7cc22bdfa 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsForm.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsForm.tsx
@@ -1,6 +1,6 @@
-import { Alert, Link, styled } from '@mui/material';
+import { Alert, Link, styled, TextField } from '@mui/material';
 import { Link as RouterLink } from 'react-router';
-import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import { FormSwitch } from 'component/common/FormSwitch/FormSwitch';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import type {
@@ -23,19 +23,6 @@ const StyledRaisedSection = styled('div')(({ theme }) => ({
     marginBottom: theme.spacing(4),
 }));
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    display: 'flex',
-    color: theme.palette.text.primary,
-    marginBottom: theme.spacing(1),
-    '&:not(:first-of-type)': {
-        marginTop: theme.spacing(3),
-    },
-}));
-
-const StyledInput = styled(Input)(() => ({
-    width: '100%',
-}));
-
 const StyledAlert = styled(Alert)(({ theme }) => ({
     marginTop: theme.spacing(3),
 }));
@@ -115,31 +102,37 @@ export const ProjectActionsForm = ({
                     Action status
                 </FormSwitch>
             </StyledRaisedSection>
-            <StyledInputDescription>
-                What is your new action name?
-            </StyledInputDescription>
-            <StyledInput
-                autoFocus
+            <FormField
                 label='Action name'
-                error={Boolean(errors.name)}
-                errorText={errors.name}
-                value={name}
-                onChange={(e) => {
-                    validateName(e.target.value);
-                    setName(e.target.value);
-                }}
-                onBlur={(e) => handleOnBlur(() => validateName(e.target.value))}
-                autoComplete='off'
-            />
-            <StyledInputDescription>
-                What is your new action description?
-            </StyledInputDescription>
-            <StyledInput
+                description='What is your new action name?'
+            >
+                <TextField
+                    fullWidth
+                    autoFocus
+                    error={Boolean(errors.name)}
+                    helperText={errors.name}
+                    value={name}
+                    onChange={(e) => {
+                        validateName(e.target.value);
+                        setName(e.target.value);
+                    }}
+                    onBlur={(e) =>
+                        handleOnBlur(() => validateName(e.target.value))
+                    }
+                    autoComplete='off'
+                />
+            </FormField>
+            <FormField
                 label='Action description'
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                autoComplete='off'
-            />
+                description='What is your new action description?'
+            >
+                <TextField
+                    fullWidth
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    autoComplete='off'
+                />
+            </FormField>
 
             <ProjectActionsFormStepSource
                 sourceId={sourceId}
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete.tsx
index d13be4b1f7..142ca5ba94 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete.tsx
@@ -20,7 +20,7 @@ export const ProjectActionsActionParameterAutocomplete = ({
         value={value}
         onInputChange={(_, parameter) => onChange(parameter)}
         renderInput={(params) => (
-            <TextField {...params} size='small' label={label} />
+            <TextField {...params} size='large' label={label} />
         )}
     />
 );
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionSelect.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionSelect.tsx
index e0d15465a9..52315ffc6f 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionSelect.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionSelect.tsx
@@ -50,7 +50,7 @@ export const ProjectActionsActionSelect = ({
             renderOption={renderActionOption}
             getOptionLabel={({ label }) => label}
             renderInput={(params) => (
-                <TextField {...params} size='small' label='Action' />
+                <TextField {...params} size='large' label='Action' />
             )}
         />
     );
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx
index 07ecbc6430..e145ff07a8 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx
@@ -6,6 +6,7 @@ import { ProjectActionsActionItem } from './ProjectActionsActionItem.tsx';
 import type { ActionsActionState } from '../../useProjectActionsForm.ts';
 import { ProjectActionsFormStep } from '../ProjectActionsFormStep.tsx';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import { FormField } from 'component/common/FormField/FormField';
 import Add from '@mui/icons-material/Add';
 import type { IServiceAccount } from 'interfaces/service-account';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@@ -91,16 +92,19 @@ export const ProjectActionsFormStepActions = ({
                 </RouterLink>
             }
         >
-            <GeneralSelect
-                label='Service account'
-                name='service-account'
-                options={serviceAccountOptions}
-                value={`${actorId}`}
-                onChange={(v) => {
-                    validateActorId(Number(v));
-                    setActorId(Number.parseInt(v, 10));
-                }}
-            />
+            <FormField label='Service account'>
+                <GeneralSelect
+                    fullWidth
+                    placeholder='Select'
+                    name='service-account'
+                    options={serviceAccountOptions}
+                    value={`${actorId}`}
+                    onChange={(v) => {
+                        validateActorId(Number(v));
+                        setActorId(Number.parseInt(v, 10));
+                    }}
+                />
+            </FormField>
             <StyledDivider />
             {actions.map((action, index) => (
                 <ProjectActionsActionItem
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ConstraintOperatorSelect.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ConstraintOperatorSelect.tsx
index 6a40bf5f84..f1dc3ae700 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ConstraintOperatorSelect.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ConstraintOperatorSelect.tsx
@@ -24,16 +24,19 @@ interface IConstraintOperatorSelectProps {
 }
 
 const StyledValueContainer = styled('div')(({ theme }) => ({
-    lineHeight: 1.1,
-    marginTop: -2,
-    marginBottom: -10,
+    display: 'flex',
+    alignItems: 'baseline',
+    gap: theme.spacing(1),
+    overflow: 'hidden',
 }));
 
 const StyledLabel = styled('div')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
+    flexShrink: 0,
 }));
 
 const StyledDescription = styled('div')(({ theme }) => ({
+    minWidth: 0,
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.neutral.main,
     overflow: 'hidden',
@@ -71,7 +74,10 @@ const StyledMenuItem = styled(MenuItem, {
 );
 
 const StyledOptionContainer = styled('div')(({ theme }) => ({
-    lineHeight: 1.2,
+    display: 'flex',
+    alignItems: 'baseline',
+    gap: theme.spacing(1),
+    overflow: 'hidden',
 }));
 
 export const ConstraintOperatorSelect = ({
@@ -97,7 +103,7 @@ export const ConstraintOperatorSelect = ({
     };
 
     return (
-        <StyledFormInput variant='outlined' size='small' fullWidth>
+        <StyledFormInput variant='outlined' size='large' fullWidth>
             <InputLabel htmlFor='operator-select'>Operator</InputLabel>
             <Select
                 id='operator-select'
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFilterItem.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFilterItem.tsx
index c2ccff049e..b5dd600268 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFilterItem.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFilterItem.tsx
@@ -228,7 +228,7 @@ export const ProjectActionsFilterItem = ({
                             renderInput={(params) => (
                                 <TextField
                                     {...params}
-                                    size='small'
+                                    size='large'
                                     label='Parameter'
                                 />
                             )}
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFormStepSource.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFormStepSource.tsx
index 330fc57b80..9a85f3dabc 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFormStepSource.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFormStepSource.tsx
@@ -9,6 +9,7 @@ import { ProjectActionsFilterItem } from './ProjectActionsFilterItem.tsx';
 import type { ActionsFilterState } from '../../useProjectActionsForm.ts';
 import { ProjectActionsFormStep } from '../ProjectActionsFormStep.tsx';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import { FormField } from 'component/common/FormField/FormField';
 import Add from '@mui/icons-material/Add';
 import { ProjectActionsPreviewPayload } from './ProjectActionsPreviewPayload.tsx';
 import { useSignalEndpointSignals } from 'hooks/api/getters/useSignalEndpointSignals/useSignalEndpointSignals';
@@ -102,15 +103,18 @@ export const ProjectActionsFormStepSource = ({
                 </RouterLink>
             }
         >
-            <GeneralSelect
-                label='Source'
-                options={signalEndpointOptions}
-                value={`${sourceId}`}
-                onChange={(v) => {
-                    validateSourceId(Number(v));
-                    setSourceId(Number.parseInt(v, 10));
-                }}
-            />
+            <FormField label='Source'>
+                <GeneralSelect
+                    fullWidth
+                    placeholder='Select'
+                    options={signalEndpointOptions}
+                    value={`${sourceId}`}
+                    onChange={(v) => {
+                        validateSourceId(Number(v));
+                        setSourceId(Number.parseInt(v, 10));
+                    }}
+                />
+            </FormField>
             <ConditionallyRender
                 condition={Boolean(sourceId)}
                 show={
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
index 3a9b6c3304..16f944022d 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx
@@ -40,6 +40,7 @@ import type { IUserProjectRole } from '../../../../interfaces/userProjectRoles.t
 import { useCheckProjectPermissions } from 'hooks/useHasAccess';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import AutocompleteVirtual from 'component/common/AutocompleteVirtual/AutcompleteVirtual';
+import { FormField } from 'component/common/FormField/FormField';
 
 const StyledForm = styled('form')(() => ({
     display: 'flex',
@@ -47,11 +48,6 @@ const StyledForm = styled('form')(() => ({
     height: '100%',
 }));
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    marginBottom: theme.spacing(1),
-}));
-
 const StyledAutocompleteWrapper = styled('div')(({ theme }) => ({
     '& > div:first-of-type': {
         width: '100%',
@@ -357,102 +353,110 @@ export const ProjectAccessAssign = ({
             >
                 <StyledForm onSubmit={handleSubmit}>
                     <div>
-                        <StyledInputDescription
-                            data-testid={PA_USERS_GROUPS_TITLE_ID}
-                        >
-                            Select the {entityType}
-                        </StyledInputDescription>
                         <StyledAutocompleteWrapper>
-                            <AutocompleteVirtual
-                                data-testid={PA_USERS_GROUPS_ID}
-                                size={autocompleteSize}
-                                multiple
-                                openOnFocus
-                                limitTags={10}
-                                disableCloseOnSelect
-                                disabled={edit}
-                                value={selectedOptions}
-                                onChange={(event, newValue, reason) => {
-                                    if (
-                                        event.type === 'keydown' &&
-                                        (event as React.KeyboardEvent).key ===
-                                            'Backspace' &&
-                                        reason === 'removeOption'
-                                    ) {
-                                        return;
-                                    }
-                                    setSelectedOptions(newValue);
-                                }}
-                                options={options}
-                                groupBy={(option) => option.type}
-                                renderOption={(props, option, { selected }) =>
-                                    renderOption(props, option, selected)
-                                }
-                                getOptionLabel={getOptionLabel}
-                                renderValue={(value, getItemProps) =>
-                                    value.map((option, index) => {
-                                        return (
-                                            <Chip
-                                                {...getItemProps({ index })}
-                                                size={autocompleteSize}
-                                                key={`${option.type}:${option.id}`}
-                                                label={getOptionLabel(option)}
-                                            />
-                                        );
-                                    })
-                                }
-                                filterOptions={(options, { inputValue }) =>
-                                    options.filter((option: IAccessOption) => {
+                            <FormField
+                                label={capitalize(entityType)}
+                                description={`Select the ${entityType}`}
+                                data-testid={PA_USERS_GROUPS_TITLE_ID}
+                            >
+                                <AutocompleteVirtual
+                                    data-testid={PA_USERS_GROUPS_ID}
+                                    size='large'
+                                    multiple
+                                    openOnFocus
+                                    limitTags={10}
+                                    disableCloseOnSelect
+                                    disabled={edit}
+                                    value={selectedOptions}
+                                    onChange={(event, newValue, reason) => {
                                         if (
-                                            option.type === ENTITY_TYPE.USER ||
-                                            option.type ===
-                                                ENTITY_TYPE.SERVICE_ACCOUNT
+                                            event.type === 'keydown' &&
+                                            (event as React.KeyboardEvent)
+                                                .key === 'Backspace' &&
+                                            reason === 'removeOption'
                                         ) {
-                                            const optionUser =
-                                                option.entity as IUser;
+                                            return;
+                                        }
+                                        setSelectedOptions(newValue);
+                                    }}
+                                    options={options}
+                                    groupBy={(option) => option.type}
+                                    renderOption={(
+                                        props,
+                                        option,
+                                        { selected },
+                                    ) => renderOption(props, option, selected)}
+                                    getOptionLabel={getOptionLabel}
+                                    renderValue={(value, getItemProps) =>
+                                        value.map((option, index) => {
                                             return (
-                                                caseInsensitiveSearch(
-                                                    inputValue,
-                                                    optionUser.email,
-                                                ) ||
-                                                caseInsensitiveSearch(
-                                                    inputValue,
-                                                    optionUser.name,
-                                                ) ||
-                                                caseInsensitiveSearch(
-                                                    inputValue,
-                                                    optionUser.username,
-                                                )
+                                                <Chip
+                                                    {...getItemProps({ index })}
+                                                    size={autocompleteSize}
+                                                    key={`${option.type}:${option.id}`}
+                                                    label={getOptionLabel(
+                                                        option,
+                                                    )}
+                                                />
                                             );
-                                        }
-                                        return caseInsensitiveSearch(
-                                            inputValue,
-                                            option.entity.name,
-                                        );
-                                    })
-                                }
-                                isOptionEqualToValue={(option, value) =>
-                                    option.type === value.type &&
-                                    option.entity.id === value.entity.id
-                                }
-                                renderInput={(params) => (
-                                    <TextField
-                                        {...params}
-                                        label={capitalize(entityType)}
-                                    />
-                                )}
-                            />
+                                        })
+                                    }
+                                    filterOptions={(options, { inputValue }) =>
+                                        options.filter(
+                                            (option: IAccessOption) => {
+                                                if (
+                                                    option.type ===
+                                                        ENTITY_TYPE.USER ||
+                                                    option.type ===
+                                                        ENTITY_TYPE.SERVICE_ACCOUNT
+                                                ) {
+                                                    const optionUser =
+                                                        option.entity as IUser;
+                                                    return (
+                                                        caseInsensitiveSearch(
+                                                            inputValue,
+                                                            optionUser.email,
+                                                        ) ||
+                                                        caseInsensitiveSearch(
+                                                            inputValue,
+                                                            optionUser.name,
+                                                        ) ||
+                                                        caseInsensitiveSearch(
+                                                            inputValue,
+                                                            optionUser.username,
+                                                        )
+                                                    );
+                                                }
+                                                return caseInsensitiveSearch(
+                                                    inputValue,
+                                                    option.entity.name,
+                                                );
+                                            },
+                                        )
+                                    }
+                                    isOptionEqualToValue={(option, value) =>
+                                        option.type === value.type &&
+                                        option.entity.id === value.entity.id
+                                    }
+                                    renderInput={(params) => (
+                                        <TextField {...params} />
+                                    )}
+                                />
+                            </FormField>
                         </StyledAutocompleteWrapper>
-                        <StyledInputDescription>
-                            Select the role to assign for this project
-                        </StyledInputDescription>
                         <StyledAutocompleteWrapper>
-                            <MultipleRoleSelect
-                                data-testid={PA_ROLE_ID}
-                                roles={filteredRoles}
-                                value={selectedRoles}
-                                setValue={setRoles}
-                            />
+                            <FormField
+                                label='Role'
+                                description='Select the role to assign for this project'
+                            >
+                                <MultipleRoleSelect
+                                    label=''
+                                    data-testid={PA_ROLE_ID}
+                                    roles={filteredRoles}
+                                    value={selectedRoles}
+                                    setValue={setRoles}
+                                />
+                            </FormField>
                         </StyledAutocompleteWrapper>
                     </div>
 
diff --git a/frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/EnvironmentHideDialog.tsx b/frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/EnvironmentHideDialog.tsx
index 062631bca2..f1d1828ed5 100644
--- a/frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/EnvironmentHideDialog.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/EnvironmentHideDialog.tsx
@@ -4,11 +4,11 @@ import { useEffect, useState } from 'react';
 import type { IProjectEnvironment } from 'interfaces/environments';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import { ProjectEnvironmentTableSingle } from './ProjectEnvironmentTableSingle/ProjectEnvironmentTableSingle.tsx';
 
-const StyledLabel = styled('p')(({ theme }) => ({
+const StyledFieldContainer = styled('div')(({ theme }) => ({
     marginTop: theme.spacing(3),
-    marginBottom: theme.spacing(1.5),
 }));
 
 const StyledInput = styled(Input)(() => ({
@@ -54,16 +54,24 @@ export const EnvironmentHideDialog = ({
 
             <ProjectEnvironmentTableSingle environment={environment!} />
 
-            <StyledLabel>
-                In order to hide this environment, please enter the id of the
-                environment in the textfield below:{' '}
-                <strong>{environment?.name}</strong>
-            </StyledLabel>
-            <StyledInput
-                label='Environment name'
-                value={confirmName}
-                onChange={(e) => setConfirmName(e.target.value)}
-            />
+            <StyledFieldContainer>
+                <FormField
+                    label='Environment name'
+                    description={
+                        <>
+                            In order to hide this environment, please enter the
+                            id of the environment in the textfield below:{' '}
+                            <strong>{environment?.name}</strong>
+                        </>
+                    }
+                >
+                    <StyledInput
+                        label=''
+                        value={confirmName}
+                        onChange={(e) => setConfirmName(e.target.value)}
+                    />
+                </FormField>
+            </StyledFieldContainer>
         </Dialogue>
     );
 };
diff --git a/frontend/src/component/project/ProjectList/ProjectsListSort/ProjectsListSort.tsx b/frontend/src/component/project/ProjectList/ProjectsListSort/ProjectsListSort.tsx
index 8e6054f8b0..5610407b3e 100644
--- a/frontend/src/component/project/ProjectList/ProjectsListSort/ProjectsListSort.tsx
+++ b/frontend/src/component/project/ProjectList/ProjectsListSort/ProjectsListSort.tsx
@@ -33,6 +33,7 @@ export const ProjectsListSort: FC<ProjectsListSortProps> = ({
             <GeneralSelect
                 fullWidth
                 label='Sort by'
+                visuallyHideLabel
                 onChange={setSortBy}
                 options={options}
                 value={sortBy || options[0].key}
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx
index a18cf4d7ab..19af5820d8 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx
@@ -1,25 +1,12 @@
 import Input from 'component/common/Input/Input';
-import { Alert, Box, styled, useTheme } from '@mui/material';
+import { Alert, Box, styled } from '@mui/material';
 import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
+import { FormField } from 'component/common/FormField/FormField';
 import { TemplateFormDescription } from './TemplateFormDescription.tsx';
 import { MilestoneList } from './MilestoneList/MilestoneList.tsx';
 import type { IExtendedMilestonePayload } from 'component/releases/hooks/useTemplateForm';
 
-const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    fieldset: { border: 'none' },
-    'label::first-letter': {
-        textTransform: 'uppercase',
-    },
-    marginBottom: theme.spacing(2),
-    padding: theme.spacing(0),
-}));
-
-const StyledDescriptionInput = styled(StyledInput)(({ theme }) => ({
-    padding: theme.spacing(2, 5, 1, 1.75),
-}));
-
 const StyledForm = styled('form')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
@@ -71,8 +58,6 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
     Limit,
     children,
 }) => {
-    const theme = useTheme();
-
     const milestoneChanged = (milestone: IReleasePlanMilestonePayload) => {
         setMilestones((prev) =>
             prev.map((mstone) =>
@@ -93,48 +78,31 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
                 </Alert>
             )}
             <StyledForm onSubmit={handleSubmit}>
-                <StyledInput
-                    label='Template name'
-                    aria-required
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    error={Boolean(errors.name)}
-                    errorText={errors.name}
-                    onFocus={() => {
-                        delete errors.name;
-                    }}
-                    autoFocus
-                    slotProps={{
-                        input: {
-                            style: { fontSize: theme.typography.h1.fontSize },
-                        },
-                        inputLabel: {
-                            style: { fontSize: theme.typography.h1.fontSize },
-                        },
-                    }}
-                    size='medium'
-                />
-                <StyledDescriptionInput
-                    label='Template description (optional)'
-                    multiline
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    slotProps={{
-                        input: {
-                            style: {
-                                fontSize: theme.typography.h2.fontSize,
-                                padding: 0,
-                            },
-                        },
-                        inputLabel: {
-                            style: {
-                                fontSize: theme.typography.h2.fontSize,
-                                padding: 0,
-                            },
-                        },
-                    }}
-                    size='small'
-                />
+                <FormField label='Template name'>
+                    <Input
+                        fullWidth
+                        aria-required
+                        label=''
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        error={Boolean(errors.name)}
+                        errorText={errors.name}
+                        onFocus={() => {
+                            delete errors.name;
+                        }}
+                        autoFocus
+                    />
+                </FormField>
+                <FormField label='Template description (optional)'>
+                    <Input
+                        fullWidth
+                        multiline
+                        rows={4}
+                        label=''
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                    />
+                </FormField>
                 <MilestoneList
                     milestones={milestones}
                     setMilestones={setMilestones}
diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
index 6004afab06..f5731a40d0 100644
--- a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
+++ b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
@@ -2,12 +2,13 @@ import type React from 'react';
 import { useState } from 'react';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import type { ISegment } from 'interfaces/segment';
 import { SEGMENT_DIALOG_NAME_ID } from 'utils/testIds';
 import { Alert, styled } from '@mui/material';
 
-const StyledInput = styled(Input)(({ theme }) => ({
-    marginTop: theme.spacing(2),
+const StyledInput = styled(Input)(() => ({
+    width: '100%',
 }));
 
 interface ISegmentDeleteConfirmProps {
@@ -54,19 +55,25 @@ export const SegmentDeleteConfirm = ({
                 flag is archived. Removing the segment will also remove the
                 segments from strategies of archived flags.
             </Alert>
-            <p>
-                In order to delete this segment, please enter the name of the
-                segment in the field below: <strong>{segment?.name}</strong>
-            </p>
-
             <form id={formId}>
-                <StyledInput
-                    autoFocus
-                    onChange={handleChange}
-                    value={confirmName}
+                <FormField
                     label='Segment name'
-                    data-testid={SEGMENT_DIALOG_NAME_ID}
-                />
+                    description={
+                        <>
+                            In order to delete this segment, please enter the
+                            name of the segment in the field below:{' '}
+                            <strong>{segment?.name}</strong>
+                        </>
+                    }
+                >
+                    <StyledInput
+                        autoFocus
+                        onChange={handleChange}
+                        value={confirmName}
+                        label=''
+                        data-testid={SEGMENT_DIALOG_NAME_ID}
+                    />
+                </FormField>
             </form>
         </Dialogue>
     );
diff --git a/frontend/src/component/segments/SegmentFormStepOne.tsx b/frontend/src/component/segments/SegmentFormStepOne.tsx
index e03d20b96f..bbee5a4095 100644
--- a/frontend/src/component/segments/SegmentFormStepOne.tsx
+++ b/frontend/src/component/segments/SegmentFormStepOne.tsx
@@ -1,5 +1,6 @@
 import { Autocomplete, Box, Button, styled, TextField } from '@mui/material';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import type { SegmentFormStep } from './SegmentForm.tsx';
@@ -46,13 +47,8 @@ const StyledContainer = styled('div')({
     maxWidth: '400px',
 });
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
-const StyledInput = styled(Input)(({ theme }) => ({
+const StyledInput = styled(Input)(() => ({
     width: '100%',
-    marginBottom: theme.spacing(2),
 }));
 
 const StyledButtonContainer = styled('div')({
@@ -143,50 +139,59 @@ export const SegmentFormStepOne: React.FC<ISegmentFormPartOneProps> = ({
     return (
         <StyledForm>
             <StyledContainer>
-                <StyledInputDescription>
-                    What is the segment name?
-                </StyledInputDescription>
-                <StyledInput
+                <FormField
                     label='Segment name'
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    error={Boolean(errors.name)}
-                    errorText={errors.name}
-                    autoFocus
-                    required
-                    data-testid={SEGMENT_NAME_ID}
-                />
-                <StyledInputDescription>
-                    What is the segment description?
-                </StyledInputDescription>
-                <StyledInput
+                    description='What is the segment name?'
+                >
+                    <StyledInput
+                        label=''
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        error={Boolean(errors.name)}
+                        errorText={errors.name}
+                        autoFocus
+                        required
+                        data-testid={SEGMENT_NAME_ID}
+                    />
+                </FormField>
+                <FormField
                     label='Description (optional)'
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    error={Boolean(errors.description)}
-                    errorText={errors.description}
-                    data-testid={SEGMENT_DESC_ID}
-                />
+                    description='What is the segment description?'
+                >
+                    <StyledInput
+                        label=''
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        error={Boolean(errors.description)}
+                        errorText={errors.description}
+                        data-testid={SEGMENT_DESC_ID}
+                    />
+                </FormField>
                 <ConditionallyRender
                     condition={!projectId && !loading}
                     show={
                         <>
-                            <StyledInputDescription>
-                                Is this segment tied to a specific project?
-                            </StyledInputDescription>
-                            <Autocomplete
-                                size='small'
-                                value={selectedProject}
-                                onChange={(_, newValue) => {
-                                    setProject(newValue?.id);
-                                }}
-                                options={availableProjects}
-                                getOptionLabel={(option) => option.name}
-                                renderInput={(params) => (
-                                    <TextField {...params} label='Project' />
-                                )}
-                                disabled={projectsUsed.size > 1}
-                            />
+                            <FormField
+                                label='Project'
+                                description='Is this segment tied to a specific project?'
+                            >
+                                <Autocomplete
+                                    size='large'
+                                    value={selectedProject}
+                                    onChange={(_, newValue) => {
+                                        setProject(newValue?.id);
+                                    }}
+                                    options={availableProjects}
+                                    getOptionLabel={(option) => option.name}
+                                    renderInput={(params) => (
+                                        <TextField
+                                            {...params}
+                                            placeholder='Select a project'
+                                        />
+                                    )}
+                                    disabled={projectsUsed.size > 1}
+                                />
+                            </FormField>
                             <SegmentProjectAlert
                                 projects={projects}
                                 strategies={collectedStrategies}
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
index 518cb2a461..e07244eb04 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
+++ b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
@@ -1,6 +1,7 @@
 import Input from 'component/common/Input/Input';
 import { Button, styled } from '@mui/material';
 import Add from '@mui/icons-material/Add';
+import { FormField } from 'component/common/FormField/FormField';
 import { trim } from 'component/common/util';
 import { StrategyParameters } from './StrategyParameters/StrategyParameters.tsx';
 import type { IStrategyParameter } from 'interfaces/strategy';
@@ -33,15 +34,6 @@ const StyledContainer = styled('div')(({ theme }) => ({
     maxWidth: 400,
 }));
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
-const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
 const StyledParamButton = styled(Button)(({ theme }) => ({
     color: theme.palette.primary.dark,
 }));
@@ -87,30 +79,36 @@ export const StrategyForm: React.FC<IStrategyFormProps> = ({
     return (
         <StyledForm onSubmit={handleSubmit}>
             <StyledContainer>
-                <StyledInputDescription>
-                    What would you like to call your strategy?
-                </StyledInputDescription>
-                <StyledInput
-                    disabled={mode === 'Edit'}
-                    autoFocus
-                    label='Strategy name*'
-                    value={strategyName}
-                    onChange={(e) => setStrategyName(trim(e.target.value))}
-                    error={Boolean(errors.name)}
-                    errorText={errors.name}
-                    onFocus={clearErrors}
-                    onBlur={validateStrategyName}
-                />
-                <StyledInputDescription>
-                    What is your strategy description?
-                </StyledInputDescription>
-                <StyledInput
+                <FormField
+                    label='Strategy name'
+                    description='What would you like to call your strategy?'
+                >
+                    <Input
+                        fullWidth
+                        disabled={mode === 'Edit'}
+                        autoFocus
+                        label=''
+                        value={strategyName}
+                        onChange={(e) => setStrategyName(trim(e.target.value))}
+                        error={Boolean(errors.name)}
+                        errorText={errors.name}
+                        onFocus={clearErrors}
+                        onBlur={validateStrategyName}
+                    />
+                </FormField>
+                <FormField
                     label='Strategy description'
-                    value={strategyDesc}
-                    onChange={(e) => setStrategyDesc(e.target.value)}
-                    rows={2}
-                    multiline
-                />
+                    description='What is your strategy description?'
+                >
+                    <Input
+                        fullWidth
+                        label=''
+                        value={strategyDesc}
+                        onChange={(e) => setStrategyDesc(e.target.value)}
+                        rows={2}
+                        multiline
+                    />
+                </FormField>
 
                 <StrategyParameters
                     input={params}
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
index eadb6b7aee..e55d610dc9 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
+++ b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
@@ -10,6 +10,7 @@ import {
 import Delete from '@mui/icons-material/Delete';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import Input from 'component/common/Input/Input';
+import { FormField } from 'component/common/FormField/FormField';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import type React from 'react';
 import type { IStrategyParameter } from 'interfaces/strategy';
@@ -63,26 +64,31 @@ const StyledParagraph = styled('p')(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
-const StyledNameContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    marginBottom: theme.spacing(2),
-}));
-
-const StyledNameInput = styled(Input)(({ theme }) => ({
-    minWidth: '365px',
-    width: '100%',
-}));
-
-const StyledGeneralSelect = styled(GeneralSelect)(({ theme }) => ({
-    minWidth: '365px',
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
-const StyledDescriptionInput = styled(Input)(({ theme }) => ({
-    minWidth: '365px',
+// All parameter inputs share the 1fr column so their right edges line up; the
+// delete button takes the auto-sized column beside the first row (the name).
+// Using a grid means the inputs reserve room for the button without hardcoding
+// its width. alignItems: end drops the button to the name input's baseline.
+const StyledParamFields = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: '1fr auto',
+    columnGap: theme.spacing(1),
+    rowGap: theme.spacing(2),
+    alignItems: 'end',
     marginBottom: theme.spacing(2),
+    // The grid owns the spacing between fields; drop the FormField's own margin.
+    '& > *': {
+        marginBottom: 0,
+    },
+    // Fields stack down the first column; the delete button takes the second
+    // column on the first (name) row.
+    '& > :not(.delete-parameter)': {
+        gridColumn: 1,
+        minWidth: 0,
+    },
+    '& > .delete-parameter': {
+        gridColumn: 2,
+        gridRow: 1,
+    },
 }));
 
 const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
@@ -121,17 +127,21 @@ export const StrategyParameter = ({
                     </StyledParagraph>
                 }
             />
-            <StyledNameContainer>
-                <StyledNameInput
-                    autoFocus
-                    label={`Parameter name ${index + 1}*`}
-                    onChange={(e) => set({ name: e.target.value })}
-                    value={input.name}
-                    error={Boolean(errors?.[`paramName${index}`])}
-                    errorText={errors?.[`paramName${index}`]}
-                />
+            <StyledParamFields>
+                <FormField label={`Parameter name ${index + 1}`}>
+                    <Input
+                        fullWidth
+                        autoFocus
+                        label=''
+                        onChange={(e) => set({ name: e.target.value })}
+                        value={input.name}
+                        error={Boolean(errors?.[`paramName${index}`])}
+                        errorText={errors?.[`paramName${index}`]}
+                    />
+                </FormField>
                 <Tooltip title='Remove parameter' arrow>
                     <IconButton
+                        className='delete-parameter'
                         onClick={() => {
                             setParams(params.filter((_e, i) => i !== index));
                         }}
@@ -140,22 +150,29 @@ export const StrategyParameter = ({
                         <Delete />
                     </IconButton>
                 </Tooltip>
-            </StyledNameContainer>
-            <StyledGeneralSelect
-                label='Type*'
-                name='type'
-                options={paramTypesOptions}
-                value={input.type}
-                onChange={onTypeChange}
-                id={`prop-type-${index}-select`}
-            />
-            <StyledDescriptionInput
-                rows={2}
-                multiline
-                label={`Parameter name ${index + 1} description`}
-                onChange={({ target }) => set({ description: target.value })}
-                value={input.description}
-            />
+                <FormField label='Type'>
+                    <GeneralSelect
+                        fullWidth
+                        label=''
+                        name='type'
+                        options={paramTypesOptions}
+                        value={input.type}
+                        onChange={onTypeChange}
+                    />
+                </FormField>
+                <FormField label={`Parameter name ${index + 1} description`}>
+                    <Input
+                        fullWidth
+                        rows={2}
+                        multiline
+                        label=''
+                        onChange={({ target }) =>
+                            set({ description: target.value })
+                        }
+                        value={input.description}
+                    />
+                </FormField>
+            </StyledParamFields>
             <StyledFormControlLabel
                 control={
                     <Checkbox
diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
index 29c40c8d99..a11c4e7f83 100644
--- a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
+++ b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
@@ -1,6 +1,7 @@
 import Input from 'component/common/Input/Input';
-import { TextField, Button, styled, Typography } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { TagTypeColorPicker } from './TagTypeColorPicker.tsx';
+import { FormField } from 'component/common/FormField/FormField';
 import type React from 'react';
 import { trim } from 'component/common/util';
 import { EDIT } from 'constants/misc';
@@ -31,20 +32,6 @@ const StyledContainer = styled('div')(({ theme }) => ({
     maxWidth: '400px',
 }));
 
-const StyledInputDescription = styled('p')(({ theme }) => ({
-    marginBottom: theme.spacing(1),
-}));
-
-const StyledInput = styled(Input)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
-const StyledTextField = styled(TextField)(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-}));
-
 const StyledButtonContainer = styled('div')(({ theme }) => ({
     marginTop: 'auto',
     display: 'flex',
@@ -73,40 +60,44 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
     return (
         <StyledForm onSubmit={handleSubmit}>
             <StyledContainer>
-                <StyledInputDescription>
-                    What is your tag name?
-                </StyledInputDescription>
-                <StyledInput
+                <FormField
                     label='Tag name'
-                    value={tagName}
-                    onChange={(e) => setTagName(trim(e.target.value))}
-                    error={Boolean(errors.name)}
-                    errorText={errors.name}
-                    onFocus={() => clearErrors()}
-                    disabled={mode === EDIT}
-                    onBlur={validateNameUniqueness}
-                    autoFocus
-                />
+                    description='What is your tag name?'
+                >
+                    <Input
+                        fullWidth
+                        label=''
+                        value={tagName}
+                        onChange={(e) => setTagName(trim(e.target.value))}
+                        error={Boolean(errors.name)}
+                        errorText={errors.name}
+                        onFocus={() => clearErrors()}
+                        disabled={mode === EDIT}
+                        onBlur={validateNameUniqueness}
+                        autoFocus
+                    />
+                </FormField>
 
-                <StyledInputDescription>
-                    What is this tag for?
-                </StyledInputDescription>
-                <StyledTextField
+                <FormField
                     label='Tag description'
-                    variant='outlined'
-                    multiline
-                    maxRows={4}
-                    value={tagDesc}
-                    onChange={(e) => setTagDesc(e.target.value)}
-                />
+                    description='What is this tag for?'
+                >
+                    <Input
+                        fullWidth
+                        label=''
+                        multiline
+                        maxRows={4}
+                        value={tagDesc}
+                        onChange={(e) => setTagDesc(e.target.value)}
+                    />
+                </FormField>
 
-                <Typography variant='body2'>
-                    Tag color
+                <FormField label='Tag color'>
                     <TagTypeColorPicker
                         selectedColor={color}
                         onChange={setColor}
                     />
-                </Typography>
+                </FormField>
             </StyledContainer>
             <StyledButtonContainer>
                 {children}
diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.tsx b/frontend/src/component/user/DemoAuth/DemoAuth.tsx
index 0f384af46b..a39dcc0519 100644
--- a/frontend/src/component/user/DemoAuth/DemoAuth.tsx
+++ b/frontend/src/component/user/DemoAuth/DemoAuth.tsx
@@ -65,7 +65,7 @@ const DemoAuth: FC<IDemoAuthProps> = ({ authDetails, redirect }) => {
                         value={email}
                         className={styles.emailField}
                         onChange={handleChange}
-                        size='small'
+                        size='large'
                         variant='outlined'
                         label='Email'
                         name='email'
diff --git a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
index 60589910f0..9bf893d2e7 100644
--- a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
+++ b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
@@ -16,6 +16,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import OrDivider from '../common/OrDivider';
 import { AuthPageLayout } from '../common/AuthPageLayout';
 import { AuthSuccessIcon } from '../common/AuthSuccessIcon';
+import { FormField } from 'component/common/FormField/FormField';
 
 const StyledTitle = styled(Typography)(({ theme }) => ({
     fontSize: theme.typography.h2.fontSize,
@@ -33,6 +34,10 @@ const StyledForm = styled('form')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(3),
+    // FormField brings its own bottom margin; the column gap owns spacing here.
+    '&& > *': {
+        marginBottom: 0,
+    },
 }));
 
 const StyledHeader = styled('div')(({ theme }) => ({
@@ -150,18 +155,21 @@ const ForgottenPassword = () => {
                             </Typography>
                         }
                     />
-                    <TextField
-                        label='Email'
-                        variant='outlined'
-                        size='small'
-                        type='email'
-                        data-testid={FORGOTTEN_PASSWORD_FIELD}
-                        value={email}
-                        onChange={(e) => {
-                            setEmail(e.target.value);
-                        }}
-                        autoFocus
-                    />
+                    <FormField label='Email'>
+                        <TextField
+                            label=''
+                            fullWidth
+                            variant='outlined'
+                            size='large'
+                            type='email'
+                            data-testid={FORGOTTEN_PASSWORD_FIELD}
+                            value={email}
+                            onChange={(e) => {
+                                setEmail(e.target.value);
+                            }}
+                            autoFocus
+                        />
+                    </FormField>
                     <Button
                         variant='contained'
                         type='submit'
diff --git a/frontend/src/component/user/HostedAuth.tsx b/frontend/src/component/user/HostedAuth.tsx
index 848ab0ac77..9e16bcbbd5 100644
--- a/frontend/src/component/user/HostedAuth.tsx
+++ b/frontend/src/component/user/HostedAuth.tsx
@@ -140,7 +140,7 @@ const HostedAuth: FC<IHostedAuthProps> = ({ authDetails, redirect }) => {
                                 error={Boolean(usernameError)}
                                 helperText={usernameError}
                                 variant='outlined'
-                                size='small'
+                                size='large'
                                 data-testid={LOGIN_EMAIL_ID}
                             />
                             <PasswordField
diff --git a/frontend/src/component/user/NewUser/NewUser.tsx b/frontend/src/component/user/NewUser/NewUser.tsx
index 4dbceb1590..d23fc8f3ff 100644
--- a/frontend/src/component/user/NewUser/NewUser.tsx
+++ b/frontend/src/component/user/NewUser/NewUser.tsx
@@ -176,7 +176,7 @@ export const NewUser = () => {
                             id='email'
                             label='Email'
                             variant='outlined'
-                            size='small'
+                            size='large'
                             sx={{ my: 1 }}
                             disabled={isValidToken}
                             fullWidth
@@ -197,7 +197,7 @@ export const NewUser = () => {
                                     id='username'
                                     label='Full name'
                                     variant='outlined'
-                                    size='small'
+                                    size='large'
                                     sx={{ my: 1 }}
                                     fullWidth
                                     required
diff --git a/frontend/src/component/user/PasswordAuth.tsx b/frontend/src/component/user/PasswordAuth.tsx
index e0c9aaa64f..886b609a1f 100644
--- a/frontend/src/component/user/PasswordAuth.tsx
+++ b/frontend/src/component/user/PasswordAuth.tsx
@@ -9,6 +9,7 @@ import OrDivider from './common/OrDivider';
 import { Alert } from '@mui/material';
 import { LOGIN_BUTTON, LOGIN_EMAIL_ID, LOGIN_PASSWORD_ID } from 'utils/testIds';
 import PasswordField from 'component/common/PasswordField/PasswordField';
+import { FormField } from 'component/common/FormField/FormField';
 import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import type { IAuthEndpointDetailsResponse } from 'hooks/api/getters/useAuth/useAuthEndpoint';
@@ -35,6 +36,17 @@ const StyledDiv = styled('div')(({ theme }) => ({
     gap: theme.spacing(3),
 }));
 
+// Login fields use FormField (static top labels). FormField brings its own
+// bottom margin, so zero it here and let the column gap own the spacing.
+const StyledFields = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(3),
+    '&& > *': {
+        marginBottom: 0,
+    },
+}));
+
 const StyledButton = styled(Button)({
     width: '100%',
 });
@@ -128,37 +140,43 @@ const PasswordAuth: FC<IPasswordAuthProps> = ({ authDetails, redirect }) => {
                             }
                         />
 
-                        <StyledDiv>
-                            <StyledAutofillTextField
-                                label='Email'
-                                name='username'
-                                id='username'
-                                type='text'
-                                onChange={(evt) =>
-                                    setUsername(evt.target.value)
-                                }
-                                value={username}
-                                error={Boolean(usernameError)}
-                                helperText={usernameError}
-                                autoComplete='username'
-                                data-testid={LOGIN_EMAIL_ID}
-                                variant='outlined'
-                                size='small'
-                                autoFocus
-                            />
-                            <PasswordField
-                                label='Password'
-                                onChange={(evt) =>
-                                    setPassword(evt.target.value)
-                                }
-                                name='password'
-                                id='password'
-                                value={password}
-                                error={Boolean(passwordError)}
-                                helperText={passwordError}
-                                autoComplete='off'
-                                data-testid={LOGIN_PASSWORD_ID}
-                            />
+                        <StyledFields>
+                            <FormField label='Email'>
+                                <StyledAutofillTextField
+                                    label=''
+                                    fullWidth
+                                    name='username'
+                                    id='username'
+                                    type='text'
+                                    onChange={(evt) =>
+                                        setUsername(evt.target.value)
+                                    }
+                                    value={username}
+                                    error={Boolean(usernameError)}
+                                    helperText={usernameError}
+                                    autoComplete='username'
+                                    data-testid={LOGIN_EMAIL_ID}
+                                    variant='outlined'
+                                    size='large'
+                                    autoFocus
+                                />
+                            </FormField>
+                            <FormField label='Password'>
+                                <PasswordField
+                                    label=''
+                                    fullWidth
+                                    onChange={(evt) =>
+                                        setPassword(evt.target.value)
+                                    }
+                                    name='password'
+                                    id='password'
+                                    value={password}
+                                    error={Boolean(passwordError)}
+                                    helperText={passwordError}
+                                    autoComplete='off'
+                                    data-testid={LOGIN_PASSWORD_ID}
+                                />
+                            </FormField>
                             <StyledButton
                                 variant='contained'
                                 color='primary'
@@ -167,7 +185,7 @@ const PasswordAuth: FC<IPasswordAuthProps> = ({ authDetails, redirect }) => {
                             >
                                 Sign in
                             </StyledButton>
-                        </StyledDiv>
+                        </StyledFields>
                     </form>
                 }
             />
diff --git a/frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx b/frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx
index c858648456..e7c2d4c7d8 100644
--- a/frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx
+++ b/frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx
@@ -305,7 +305,7 @@ export const ProfileTab = ({ user }: IProfileTabProps) => {
                     This is the format used across the system for time and date
                 </Typography>
                 <LocaleSelector>
-                    <StyledFormControl variant='outlined' size='small'>
+                    <StyledFormControl variant='outlined' size='large'>
                         <StyledInputLabel htmlFor='locale-select'>
                             Date/Time formatting
                         </StyledInputLabel>
diff --git a/frontend/src/component/user/SimpleAuth/SimpleAuth.tsx b/frontend/src/component/user/SimpleAuth/SimpleAuth.tsx
index 4e6ba4b469..8a29fa5778 100644
--- a/frontend/src/component/user/SimpleAuth/SimpleAuth.tsx
+++ b/frontend/src/component/user/SimpleAuth/SimpleAuth.tsx
@@ -64,7 +64,7 @@ const SimpleAuth: FC<ISimpleAuthProps> = ({ authDetails, redirect }) => {
                 <TextField
                     value={email}
                     onChange={handleChange}
-                    size='small'
+                    size='large'
                     variant='outlined'
                     label='Email'
                     name='email'
diff --git a/frontend/src/themes/controls.ts b/frontend/src/themes/controls.ts
index 517ad03142..f16959000c 100644
--- a/frontend/src/themes/controls.ts
+++ b/frontend/src/themes/controls.ts
@@ -33,6 +33,9 @@ const controlIconSizes: Record<ControlSize, number> = {
     large: 24,
 };
 
+const sizeOf = (size: unknown): ControlSize =>
+    size === 'small' || size === 'large' ? size : 'medium';
+
 /**
  * Button size definitions. Spread into `MuiButton.styleOverrides`
  * (next to `root`) in both themes.
@@ -164,6 +167,70 @@ export const subtleOutlinedButton = (theme: Theme) => ({
     },
 });
 
+/**
+ * Input/select sizing on the shared control scale. Used by the
+ * `MuiOutlinedInput` override below; the dark theme merges it into its
+ * own `MuiOutlinedInput` override (which also sets border colors).
+ */
+export const outlinedInputSizing = (ownerState?: { size?: unknown }) => {
+    const size = sizeOf(ownerState?.size);
+    const height = controlHeights[size];
+    const paddingX = controlPaddingX[size];
+    return {
+        fontSize: controlFontSizes[size],
+        // Fixed control heights. Multiline fields and chip-filled
+        // Autocomplete roots grow, bounded by minHeight instead.
+        '&:not(.MuiInputBase-multiline):not(.MuiAutocomplete-inputRoot)': {
+            height,
+        },
+        '&.MuiAutocomplete-inputRoot': {
+            minHeight: height,
+            paddingTop: 0,
+            paddingBottom: 0,
+            // center the value/tags vertically; without this the zeroed
+            // padding leaves the content stuck to the top of the field
+            alignItems: 'center',
+        },
+        '&:not(.MuiInputBase-multiline) .MuiOutlinedInput-input': {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: paddingX,
+        },
+        // Multiline fields: match the single-line horizontal padding (MUI's
+        // stock multiline padding is different and looks inconsistent), and
+        // read as a distinct box at least two lines tall. The min-height acts
+        // as a floor; fields with explicit rows/minRows still grow beyond it.
+        '&.MuiInputBase-multiline': {
+            paddingTop: 8,
+            paddingBottom: 8,
+            paddingLeft: paddingX,
+            paddingRight: paddingX,
+        },
+        // Floor only: short multiline fields read as a ~2-line box. Fields
+        // with explicit minRows/rows are already taller, so this is a no-op for
+        // them. CRITICAL: exclude the aria-hidden shadow textarea MUI uses to
+        // measure row height — styling it inflates the measured row height and
+        // multiplies the height of minRows fields.
+        '&.MuiInputBase-multiline .MuiInputBase-input:not([aria-hidden])': {
+            minHeight: '4rem',
+        },
+        '& .MuiSelect-select': {
+            display: 'flex',
+            alignItems: 'center',
+            // Fill the field height so the whole control (not just the text) is
+            // the clickable target and shows the pointer cursor. MUI puts the
+            // click handler + `cursor: pointer` on `.MuiSelect-select`; with the
+            // zeroed vertical padding above it would otherwise sit shorter than
+            // the fixed-height field, leaving dead strips top and bottom.
+            height: '100%',
+            boxSizing: 'border-box',
+        },
+        '& .MuiSelect-icon': {
+            fontSize: controlIconSizes[size],
+        },
+    };
+};
+
 /**
  * Component overrides shared verbatim by the light and dark themes.
  * Spread FIRST in each theme's `components` object — keys also defined
@@ -183,4 +250,78 @@ export const controlOverrides: Components<Theme> = {
             }),
         },
     },
+
+    // Unsized fields keep today's visual weight (old `small` ≈ new `large`).
+    MuiTextField: {
+        defaultProps: {
+            size: 'large',
+        },
+    },
+
+    MuiOutlinedInput: {
+        styleOverrides: {
+            root: ({ ownerState }) => outlinedInputSizing(ownerState),
+        },
+    },
+
+    // Vertically center the value/tags in Autocompletes. MUI applies an
+    // asymmetric paddingTop to its inputRoot here (outranking a rule coming
+    // from MuiOutlinedInput), which leaves a single selected value sitting
+    // high in the field. Override it at MUI's own injection point.
+    MuiAutocomplete: {
+        styleOverrides: {
+            inputRoot: {
+                alignItems: 'center',
+                paddingTop: 0,
+                paddingBottom: 0,
+                // summary-style selects (no chips): keep the value + input on
+                // one line instead of wrapping the input below a long value
+                '&:not(:has(.MuiChip-root))': {
+                    flexWrap: 'nowrap',
+                },
+                // chip pickers: give symmetric vertical padding so the top/
+                // bottom spacing around the chips stays consistent when they
+                // wrap to multiple lines (otherwise the zeroed padding leaves
+                // wrapped rows flush to the top while a single row reads as
+                // centered). Pairs with the chips' own 3px margin.
+                '&:has(.MuiChip-root)': {
+                    paddingTop: 3,
+                    paddingBottom: 3,
+                },
+            },
+        },
+    },
+
+    // Helper/error text sits flush with the field's left edge. MUI's default
+    // "contained" variant indents it 14px, which breaks the left-alignment
+    // rhythm with the field above it and the label.
+    MuiFormHelperText: {
+        styleOverrides: {
+            contained: {
+                marginLeft: 0,
+                marginRight: 0,
+            },
+        },
+    },
+
+    MuiInputLabel: {
+        styleOverrides: {
+            root: ({ ownerState }) => {
+                const size = sizeOf(ownerState?.size);
+                const height = controlHeights[size];
+                const paddingX = controlPaddingX[size];
+                // Approx. rendered line height (px) of the resting label across
+                // the control font sizes (12–14px). Used only to vertically
+                // center the non-floating label inside the (shorter) field.
+                const labelLineHeight = 20;
+                return {
+                    // Center the resting (non-floating) label in the shorter field.
+                    '&.MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
+                        fontSize: controlFontSizes[size],
+                        transform: `translate(${paddingX}px, ${Math.round((height - labelLineHeight) / 2)}px) scale(1)`,
+                    },
+                };
+            },
+        },
+    },
 };
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index c9e03b4af7..eaff63cd81 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -7,6 +7,7 @@ import {
     controlOverrides,
     iconButtonRoot,
     iconButtonSizes,
+    outlinedInputSizing,
     subtleOutlinedButton,
 } from './controls.js';
 import { baseTheme } from './theme.js';
@@ -601,9 +602,14 @@ export const darkTheme = createTheme({
         },
 
         // Inputs
+        // NOTE: this redefines the `MuiOutlinedInput` key, which fully replaces
+        // (not deep-merges) the one from `...controlOverrides`. So the shared
+        // input sizing must be re-applied here via `outlinedInputSizing`. If you
+        // change input sizing in controls.ts, this spread keeps dark mode in sync.
         MuiOutlinedInput: {
             styleOverrides: {
-                root: ({ theme }) => ({
+                root: ({ theme, ownerState }) => ({
+                    ...outlinedInputSizing(ownerState),
                     fieldset: {
                         borderColor: '#646382',
                     },
diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
index 4be2de00a2..8704b2055a 100644
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@@ -240,3 +240,34 @@ declare module '@mui/material/FormHelperText' {
         'data-testid'?: string;
     }
 }
+
+/*
+ * Design system v2: inputs and selects share the button height scale
+ * (small/medium/large, see themes/controls.ts). MUI only types
+ * 'small' | 'medium' for inputs, so allow 'large' as well.
+ */
+declare module '@mui/material/InputBase' {
+    interface InputBasePropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/material/TextField' {
+    interface TextFieldPropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/material/FormControl' {
+    interface FormControlPropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/material/Autocomplete' {
+    interface AutocompletePropsSizeOverrides {
+        large: true;
+    }
+}
+declare module '@mui/material/InputLabel' {
+    interface InputLabelPropsSizeOverrides {
+        large: true;
+    }
+}