diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts b/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts
new file mode 100644
index 0000000000..d405802eee
--- /dev/null
+++ b/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts
@@ -0,0 +1,22 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    container: {
+        display: 'inline-grid',
+        alignItems: 'center',
+        outline: 0,
+
+        '&:is(:focus-visible, :active) > *, &:hover > *': {
+            outlineStyle: 'solid',
+            outlineWidth: 2,
+            outlineOffset: 0,
+            outlineColor: theme.palette.primary.main,
+            borderRadius: '100%',
+            color: theme.palette.primary.main,
+        },
+    },
+    icon: {
+        fontSize: '1rem',
+        color: theme.palette.grey[600],
+    },
+}));
diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.tsx b/frontend/src/component/common/HelpIcon/HelpIcon.tsx
new file mode 100644
index 0000000000..198bc710b5
--- /dev/null
+++ b/frontend/src/component/common/HelpIcon/HelpIcon.tsx
@@ -0,0 +1,27 @@
+import { Tooltip } from '@material-ui/core';
+import { Info } from '@material-ui/icons';
+import { useStyles } from 'component/common/HelpIcon/HelpIcon.styles';
+import React from 'react';
+
+interface IHelpIconProps {
+    tooltip: string;
+    style?: React.CSSProperties;
+}
+
+export const HelpIcon = ({ tooltip, style }: IHelpIconProps) => {
+    const styles = useStyles();
+
+    return (
+        <Tooltip title={tooltip} arrow>
+            <span
+                className={styles.container}
+                style={style}
+                tabIndex={0}
+                role="tooltip"
+                aria-label="Help"
+            >
+                <Info className={styles.icon} />
+            </span>
+        </Tooltip>
+    );
+};
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
index 0aba375799..11a02a30d5 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
@@ -16,7 +16,12 @@ export const useStyles = makeStyles(theme => ({
     weightInput: {
         marginRight: '0.8rem',
     },
-    label: { marginBottom: '1rem' },
+    label: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '1ch',
+        marginBottom: '1rem',
+    },
     info: {
         width: '18.5px',
         height: '18.5px',
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
index fc494c9677..528317b4f6 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
@@ -5,9 +5,7 @@ import {
     FormControlLabel,
     Grid,
     InputAdornment,
-    Tooltip,
 } from '@material-ui/core';
-import { Info } from '@material-ui/icons';
 import { weightTypes } from './enums';
 import { OverrideConfig } from './OverrideConfig/OverrideConfig';
 import ConditionallyRender from 'component/common/ConditionallyRender';
@@ -26,6 +24,7 @@ import { useStyles } from './AddFeatureVariant.styles';
 import Input from 'component/common/Input/Input';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 const payloadOptions = [
     { key: 'string', label: 'string' },
@@ -268,6 +267,7 @@ export const AddVariant = ({
                     label="Variant name"
                     autoFocus
                     name="name"
+                    id="variant-name"
                     className={styles.input}
                     errorText={error.name}
                     value={data.name || ''}
@@ -317,7 +317,7 @@ export const AddVariant = ({
                             <Grid item md={4}>
                                 <Input
                                     id="weight"
-                                    label="Weight"
+                                    label="Variant weight"
                                     name="weight"
                                     data-testid={'VARIANT_WEIGHT_INPUT'}
                                     InputProps={{
@@ -345,12 +345,7 @@ export const AddVariant = ({
                 </Grid>
                 <p className={styles.label}>
                     <strong>Payload </strong>
-                    <Tooltip
-                        title="Passed to the variant object. Can be anything
-                        (json, value, csv)"
-                    >
-                        <Info className={styles.info} />
-                    </Tooltip>
+                    <HelpIcon tooltip="Passed along with the the variant object." />
                 </p>
                 <Grid container>
                     <Grid item md={2} sm={2} xs={4}>
@@ -368,7 +363,9 @@ export const AddVariant = ({
                         <Input
                             error={Boolean(error.payload)}
                             errorText={error.payload}
-                            name="value"
+                            name="variant-payload-value"
+                            id="variant-payload-value"
+                            label="Value"
                             className={commonStyles.fullWidth}
                             value={payload.value}
                             onChange={e => onPayload('value')(e.target.value)}
@@ -376,9 +373,8 @@ export const AddVariant = ({
                             placeholder={
                                 payload.type === 'json'
                                     ? '{ "hello": "world" }'
-                                    : 'value'
+                                    : ''
                             }
-                            label="value"
                         />
                     </Grid>
                 </Grid>
@@ -387,9 +383,7 @@ export const AddVariant = ({
                     show={
                         <p className={styles.label}>
                             <strong>Overrides </strong>
-                            <Tooltip title="Here you can specify which users should get this variant.">
-                                <Info className={styles.info} />
-                            </Tooltip>
+                            <HelpIcon tooltip="Here you can specify which users should get this variant." />
                         </p>
                     }
                 />
diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
index 8c8545ab90..5efefd91da 100644
--- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
@@ -1,6 +1,4 @@
-import { Tooltip, Typography } from '@material-ui/core';
-import { Info } from '@material-ui/icons';
-
+import { Typography } from '@material-ui/core';
 import { IParameter } from 'interfaces/strategy';
 import RolloutSlider from '../RolloutSlider/RolloutSlider';
 import Select from 'component/common/select';
@@ -10,6 +8,7 @@ import {
     FLEXIBLE_STRATEGY_GROUP_ID,
     FLEXIBLE_STRATEGY_STICKINESS_ID,
 } from 'utils/testIds';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 const builtInStickinessOptions = [
     { key: 'default', label: 'default' },
@@ -81,22 +80,14 @@ const FlexibleStrategy = ({
                 <Typography
                     variant="subtitle2"
                     style={{
-                        marginBottom: '0.5rem',
+                        marginBottom: '1rem',
                         display: 'flex',
-                        alignItems: 'center',
+                        gap: '1ch',
                     }}
                     component="h2"
                 >
                     Stickiness
-                    <Tooltip title="Stickiness defines what parameter should be used to ensure that your users get consistency in features. By default unleash will use the first value present in the context in the order of userId, sessionId and random.">
-                        <Info
-                            style={{
-                                fontSize: '1rem',
-                                color: 'gray',
-                                marginLeft: '0.2rem',
-                            }}
-                        />
-                    </Tooltip>
+                    <HelpIcon tooltip="Stickiness defines what parameter should be used to ensure that your users get consistency in features. By default unleash will use the first value present in the context in the order of userId, sessionId and random." />
                 </Typography>
                 <Select
                     id="stickiness-select"
@@ -116,22 +107,14 @@ const FlexibleStrategy = ({
                 <Typography
                     variant="subtitle2"
                     style={{
-                        marginBottom: '0.5rem',
+                        marginBottom: '1rem',
                         display: 'flex',
-                        alignItems: 'center',
+                        gap: '1ch',
                     }}
                     component="h2"
                 >
                     GroupId
-                    <Tooltip title="GroupId is used to ensure that different toggles will hash differently for the same user. The groupId defaults to feature toggle name, but you can override it to correlate rollout of multiple feature toggles.">
-                        <Info
-                            style={{
-                                fontSize: '1rem',
-                                color: 'gray',
-                                marginLeft: '0.2rem',
-                            }}
-                        />
-                    </Tooltip>
+                    <HelpIcon tooltip="GroupId is used to ensure that different toggles will hash differently for the same user. The groupId defaults to feature toggle name, but you can override it to correlate rollout of multiple feature toggles." />
                 </Typography>
                 <Input
                     label="groupId"
diff --git a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
index 5c87cc096d..3ec255a42f 100644
--- a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
+++ b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
@@ -14,9 +14,6 @@ const StyledSlider = withStyles({
         border: '2px solid currentColor',
         marginTop: -8,
         marginLeft: -12,
-        '&:focus, &:hover, &$active': {
-            boxShadow: 'inherit',
-        },
     },
     active: {},
     valueLabel: {
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts
index ea612bf84b..8d4edd864c 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts
@@ -35,13 +35,11 @@ export const useStyles = makeStyles(theme => ({
         marginBottom: '0',
         display: 'flex',
         alignItems: 'center',
+        gap: '1ch',
     },
     statusBarSuccess: {
         backgroundColor: theme.palette.primary.main,
     },
-    helpIcon: {
-        height: '17.5px',
-    },
     repeatingError: {
         marginTop: '0.5rem',
         bottom: '0',
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
index 63d420bea4..dbccbd8f08 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
@@ -1,13 +1,13 @@
-import { Tooltip, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import classnames from 'classnames';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { BAD_REQUEST, OK } from 'constants/statusCodes';
 import { useStyles } from './PasswordChecker.styles';
-import HelpIcon from '@material-ui/icons/Help';
 import { useCallback } from 'react';
 import { formatApiPath } from 'utils/formatPath';
 import { Alert } from '@material-ui/lab';
 import ConditionallyRender from 'component/common/ConditionallyRender';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 interface IPasswordCheckerProps {
     password: string;
@@ -157,19 +157,10 @@ const PasswordChecker = ({
 
     return (
         <>
-            <Tooltip
-                arrow
-                title="Your password needs to be at least ten characters long, and include an uppercase letter, a lowercase letter, a number and a symbol to be a valid OWASP password"
-            >
-                <Typography
-                    variant="body2"
-                    className={styles.title}
-                    data-loading
-                >
-                    Please set a strong password
-                    <HelpIcon className={styles.helpIcon} />
-                </Typography>
-            </Tooltip>
+            <Typography variant="body2" className={styles.title} data-loading>
+                Please set a strong password
+                <HelpIcon tooltip="Your password needs to be at least ten characters long, and include an uppercase letter, a lowercase letter, a number and a symbol to be a valid OWASP password" />
+            </Typography>
             <div
                 className={styles.container}
                 style={{