diff --git a/frontend/package.json b/frontend/package.json
index 1e32072215..83faec94bf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -73,6 +73,7 @@
     "lodash.clonedeep": "4.5.0",
     "lodash.flow": "3.5.0",
     "node-fetch": "2.6.6",
+    "prettier": "^2.4.1",
     "react": "17.0.2",
     "react-dnd": "14.0.4",
     "react-dnd-html5-backend": "14.0.2",
diff --git a/frontend/src/component/api-token/ApiTokenCreate/ApiTokenCreate.tsx b/frontend/src/component/api-token/ApiTokenCreate/ApiTokenCreate.tsx
index 3ae313f3e3..0624936db1 100644
--- a/frontend/src/component/api-token/ApiTokenCreate/ApiTokenCreate.tsx
+++ b/frontend/src/component/api-token/ApiTokenCreate/ApiTokenCreate.tsx
@@ -144,6 +144,8 @@ const ApiTokenCreate = ({
         { key: 'ADMIN', label: 'Admin', title: 'Admin API token' },
     ];
 
+    const formId = 'create-api-token-form';
+
     return (
         <Dialogue
             onClick={() => submit()}
@@ -152,8 +154,10 @@ const ApiTokenCreate = ({
             primaryButtonText="Create"
             secondaryButtonText="Cancel"
             title="New API token"
+            formId={formId}
         >
             <form
+                id={formId}
                 onSubmit={submit}
                 className={classNames(
                     styles.addApiKeyForm,
@@ -161,6 +165,7 @@ const ApiTokenCreate = ({
                 )}
             >
                 <TextField
+                    autoFocus
                     value={data.username}
                     name="username"
                     onChange={setUsername}
diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx
index e795fe854f..b9e3b20c38 100644
--- a/frontend/src/component/common/Dialogue/Dialogue.tsx
+++ b/frontend/src/component/common/Dialogue/Dialogue.tsx
@@ -22,6 +22,7 @@ interface IDialogue {
     fullWidth?: boolean;
     maxWidth?: 'lg' | 'sm' | 'xs' | 'md' | 'xl';
     disabledPrimaryButton?: boolean;
+    formId?: string;
 }
 
 const Dialogue: React.FC<IDialogue> = ({
@@ -35,8 +36,15 @@ const Dialogue: React.FC<IDialogue> = ({
     secondaryButtonText,
     maxWidth = 'sm',
     fullWidth = false,
+    formId,
 }) => {
     const styles = useStyles();
+    const handleClick = formId
+        ? (e: React.SyntheticEvent) => {
+              e.preventDefault();
+              onClick(e);
+          }
+        : onClick;
     return (
         <Dialog
             open={open}
@@ -61,12 +69,14 @@ const Dialogue: React.FC<IDialogue> = ({
                     condition={Boolean(onClick)}
                     show={
                         <Button
+                            form={formId}
                             color="primary"
                             variant="contained"
-                            onClick={onClick}
-                            autoFocus
+                            onClick={handleClick}
+                            autoFocus={!formId}
                             disabled={disabledPrimaryButton}
                             data-test={DIALOGUE_CONFIRM_ID}
+                            type={formId ? 'submit' : 'button'}
                         >
                             {primaryButtonText || "Yes, I'm sure"}
                         </Button>
@@ -77,7 +87,7 @@ const Dialogue: React.FC<IDialogue> = ({
                     condition={Boolean(onClose)}
                     show={
                         <Button onClick={onClose}>
-                            {secondaryButtonText || 'No take me back'}{' '}
+                            {secondaryButtonText || 'No, take me back'}
                         </Button>
                     }
                 />
diff --git a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
index 90c24a872c..4940910c1f 100644
--- a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
+++ b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
@@ -75,6 +75,8 @@ const EditEnvironment = ({
         setType(env.type);
     };
 
+    const formId = 'edit-environment-form';
+
     return (
         <Dialogue
             open={editEnvironment}
@@ -84,6 +86,7 @@ const EditEnvironment = ({
             primaryButtonText="Save"
             secondaryButtonText="Cancel"
             disabledPrimaryButton={isDisabled()}
+            formId={formId}
         >
             <div className={styles.body} ref={ref}>
                 <h3 className={styles.formHeader} data-loading>
@@ -92,7 +95,7 @@ const EditEnvironment = ({
                 <h3 className={styles.subheader} data-loading>
                     <CloudCircle className={styles.icon} /> {env.name}
                 </h3>
-                <form>
+                <form id={formId}>
                     <EnvironmentTypeSelector
                         onChange={handleTypeChange}
                         value={type}
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
index 8a2555fa10..e1e1672aa5 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
@@ -34,6 +34,8 @@ const EnvironmentDeleteConfirm = ({
         setConfirmName('');
     };
 
+    const formId = 'delete-environment-confirmation-form';
+
     return (
         <Dialogue
             title="Are you sure you want to delete this environment?"
@@ -43,6 +45,7 @@ const EnvironmentDeleteConfirm = ({
             onClick={handleDeleteEnvironment}
             disabledPrimaryButton={env?.name !== confirmName}
             onClose={handleCancel}
+            formId={formId}
         >
             <Alert severity="error">
                 Danger. Deleting this environment will result in removing all
@@ -59,12 +62,15 @@ const EnvironmentDeleteConfirm = ({
                 environment in the textfield below: <strong>{env?.name}</strong>
             </p>
 
-            <Input
-                onChange={handleChange}
-                value={confirmName}
-                label="Environment name"
-                className={styles.environmentDeleteInput}
-            />
+            <form id={formId}>
+                <Input
+                    autoFocus
+                    onChange={handleChange}
+                    value={confirmName}
+                    label="Environment name"
+                    className={styles.environmentDeleteInput}
+                />
+            </form>
         </Dialogue>
     );
 };
diff --git a/frontend/src/component/feature/FeatureCreate/FeatureCreate.tsx b/frontend/src/component/feature/FeatureCreate/FeatureCreate.tsx
index 127be7e938..a482e37bd8 100644
--- a/frontend/src/component/feature/FeatureCreate/FeatureCreate.tsx
+++ b/frontend/src/component/feature/FeatureCreate/FeatureCreate.tsx
@@ -110,6 +110,7 @@ const FeatureCreate = () => {
                 <input type="hidden" name="project" value={projectId} />
                 <div className={styles.formContainer}>
                     <Input
+                        autoFocus
                         label="Name"
                         placeholder="Unique-name"
                         className={styles.nameInput}
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/AddTagDialog/AddTagDialog.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/AddTagDialog/AddTagDialog.tsx
index 9f91d38b30..a4d72e5b18 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/AddTagDialog/AddTagDialog.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/AddTagDialog/AddTagDialog.tsx
@@ -66,6 +66,8 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
         }
     };
 
+    const formId = 'add-tag-form';
+
     return (
         <>
             <Dialogue
@@ -76,14 +78,16 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
                 onClick={onSubmit}
                 disabledPrimaryButton={loading}
                 onClose={onCancel}
+                formId={formId}
             >
                 <>
                     <DialogContentText>
-                        Tags allows you to group features together
+                        Tags allow you to group features together
                     </DialogContentText>
-                    <form onSubmit={onSubmit}>
+                    <form id={formId} onSubmit={onSubmit}>
                         <section className={styles.dialogFormContent}>
                             <TagSelect
+                                autoFocus
                                 name="type"
                                 value={tag.type}
                                 onChange={e => setValue('type', e.target.value)}
diff --git a/frontend/src/component/feature/FeatureView2/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx b/frontend/src/component/feature/FeatureView2/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
index 43cd726101..d1c854cf91 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
@@ -212,6 +212,8 @@ const AddVariant = ({
 
     const isFixWeight = data.weightType === weightTypes.FIX;
 
+    const formId = 'add-feature-variant-form';
+
     return (
         <Dialogue
             open={showDialog}
@@ -224,11 +226,17 @@ const AddVariant = ({
             title={title}
             fullWidth
             maxWidth="md"
+            formId={formId}
         >
-            <form onSubmit={submit} className={commonStyles.contentSpacingY}>
+            <form
+                id={formId}
+                onSubmit={submit}
+                className={commonStyles.contentSpacingY}
+            >
                 <p style={{ color: 'red' }}>{error.general}</p>
                 <TextField
                     label="Variant name"
+                    autoFocus
                     name="name"
                     placeholder=""
                     className={commonStyles.fullWidth}
diff --git a/frontend/src/component/feature/add-tag-dialog-component.jsx b/frontend/src/component/feature/add-tag-dialog-component.jsx
index b2f0fc2be1..19bff270b6 100644
--- a/frontend/src/component/feature/add-tag-dialog-component.jsx
+++ b/frontend/src/component/feature/add-tag-dialog-component.jsx
@@ -62,6 +62,7 @@ class AddTagDialogComponent extends Component {
     };
     render() {
         const { tag, errors, openDialog } = this.state;
+        const formId = 'add-tag-dialog-form';
         return (
             <React.Fragment>
                 <Button onClick={this.handleOpenDialog.bind(this)}>
@@ -75,14 +76,16 @@ class AddTagDialogComponent extends Component {
                     title="Add tags to feature toggle"
                     onClick={this.onSubmit}
                     onClose={this.onCancel}
+                    formId={formId}
                 >
                     <>
                         <DialogContentText>
-                            Tags allows you to group features together
+                            Tags allow you to group features together
                         </DialogContentText>
-                        <form onSubmit={this.onSubmit}>
+                        <form id={formId} onSubmit={this.onSubmit}>
                             <section className={styles.dialogueFormContent}>
                                 <TagSelect
+                                    autoFocus
                                     name="type"
                                     value={tag.type}
                                     onChange={v =>
diff --git a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
index 1e0b99209e..47c9ae465c 100644
--- a/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
+++ b/frontend/src/component/feature/variant/AddVariant/AddVariant.jsx
@@ -178,6 +178,8 @@ const AddVariant = ({
 
     const isFixWeight = data.weightType === weightTypes.FIX;
 
+    const formId = 'add-variant-form';
+
     return (
         <Dialog
             open={showDialog}
@@ -190,10 +192,16 @@ const AddVariant = ({
             title={title}
             fullWidth
             maxWidth="md"
+            formId={formId}
         >
-            <form onSubmit={submit} className={commonStyles.contentSpacingY}>
+            <form
+                id={formId}
+                onSubmit={submit}
+                className={commonStyles.contentSpacingY}
+            >
                 <p style={{ color: 'red' }}>{error.general}</p>
                 <TextField
+                    autoFocus
                     label="Variant name"
                     name="name"
                     placeholder=""
diff --git a/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx b/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
index abd63fe1aa..614b145ca2 100644
--- a/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
@@ -27,6 +27,8 @@ const EnvironmentDisableConfirm = ({
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
         setConfirmName(e.currentTarget.value);
 
+    const formId = 'disable-environment-confirmation-form';
+
     return (
         <Dialogue
             title="Are you sure you want to disable this environment?"
@@ -36,10 +38,11 @@ const EnvironmentDisableConfirm = ({
             onClick={() => handleDisableEnvironment()}
             disabledPrimaryButton={env?.name !== confirmName}
             onClose={handleCancelDisableEnvironment}
+            formId={formId}
         >
             <Alert severity="error">
-                Danger. Disabling an environment can impact client applications 
-                connected to the environment and result in feature toggles being 
+                Danger. Disabling an environment can impact client applications
+                connected to the environment and result in feature toggles being
                 disabled.
             </Alert>
 
@@ -48,12 +51,15 @@ const EnvironmentDisableConfirm = ({
                 environment in the textfield below: <strong>{env?.name}</strong>
             </p>
 
-            <Input
-                onChange={handleChange}
-                value={confirmName}
-                label="Environment name"
-                className={styles.environmentDeleteInput}
-            />
+            <form id={formId}>
+                <Input
+                    autoFocus
+                    onChange={handleChange}
+                    value={confirmName}
+                    label="Environment name"
+                    className={styles.environmentDeleteInput}
+                />
+            </form>
         </Dialogue>
     );
 };
diff --git a/frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap b/frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap
index 29c4355b48..c7c3122dc3 100644
--- a/frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap
+++ b/frontend/src/component/tag-types/__tests__/__snapshots__/tag-type-create-component-test.js.snap
@@ -37,7 +37,7 @@ exports[`it supports editMode 1`] = `
       <h6
         className="MuiTypography-root MuiTypography-subtitle1"
       >
-        Tag types allows you to group tags together in the management UI
+        Tag types allow you to group tags together in the management UI
       </h6>
       <form
         className="addTagTypeForm contentSpacing"
@@ -140,7 +140,7 @@ exports[`renders correctly for creating 1`] = `
       <h6
         className="MuiTypography-root MuiTypography-subtitle1"
       >
-        Tag types allows you to group tags together in the management UI
+        Tag types allow you to group tags together in the management UI
       </h6>
       <form
         className="addTagTypeForm contentSpacing"
@@ -243,7 +243,7 @@ exports[`renders correctly for creating without permissions 1`] = `
       <h6
         className="MuiTypography-root MuiTypography-subtitle1"
       >
-        Tag types allows you to group tags together in the management UI
+        Tag types allow you to group tags together in the management UI
       </h6>
       <form
         className="addTagTypeForm contentSpacing"
diff --git a/frontend/src/component/tag-types/form-tag-type-component.js b/frontend/src/component/tag-types/form-tag-type-component.js
index e0e80c38c6..0f07f700d7 100644
--- a/frontend/src/component/tag-types/form-tag-type-component.js
+++ b/frontend/src/component/tag-types/form-tag-type-component.js
@@ -71,7 +71,7 @@ const AddTagTypeComponent = ({
                 )}
             >
                 <Typography variant="subtitle1">
-                    Tag types allows you to group tags together in the
+                    Tag types allow you to group tags together in the
                     management UI
                 </Typography>
                 <form
diff --git a/frontend/src/page/admin/users/AddUser/AddUser.tsx b/frontend/src/page/admin/users/AddUser/AddUser.tsx
index 6550d85841..1c5ec2075d 100644
--- a/frontend/src/page/admin/users/AddUser/AddUser.tsx
+++ b/frontend/src/page/admin/users/AddUser/AddUser.tsx
@@ -61,11 +61,14 @@ const AddUser = ({
         closeDialog();
     };
 
+    const formId = 'add-user-dialog-form';
+
     return (
         <Dialogue
             onClick={e => {
                 submit(e);
             }}
+            formId={formId}
             open={showDialog}
             onClose={onCancel}
             primaryButtonText="Add user"
@@ -74,6 +77,7 @@ const AddUser = ({
             fullWidth
         >
             <AddUserForm
+                formId={formId}
                 userApiErrors={userApiErrors}
                 data={data}
                 setData={setData}
diff --git a/frontend/src/page/admin/users/AddUser/AddUserForm/AddUserForm.jsx b/frontend/src/page/admin/users/AddUser/AddUserForm/AddUserForm.jsx
index e6145c5b64..cb3e867341 100644
--- a/frontend/src/page/admin/users/AddUser/AddUserForm/AddUserForm.jsx
+++ b/frontend/src/page/admin/users/AddUser/AddUserForm/AddUserForm.jsx
@@ -30,6 +30,7 @@ function AddUserForm({
     roles,
     userLoading,
     userApiErrors,
+    formId,
 }) {
     const ref = useLoading(userLoading);
     const commonStyles = useCommonStyles();
@@ -76,7 +77,7 @@ function AddUserForm({
         userApiErrors[ADD_USER_ERROR] || userApiErrors[UPDATE_USER_ERROR];
     return (
         <div ref={ref}>
-            <form onSubmit={submit}>
+            <form id={formId} onSubmit={submit}>
                 <DialogContent>
                     <ConditionallyRender
                         condition={apiError}
@@ -110,6 +111,7 @@ function AddUserForm({
                         />
 
                         <TextField
+                            autoFocus
                             label="Full name"
                             data-loading
                             name="name"
diff --git a/frontend/src/page/admin/users/update-user-component.jsx b/frontend/src/page/admin/users/update-user-component.jsx
index ef28aa3021..787d498718 100644
--- a/frontend/src/page/admin/users/update-user-component.jsx
+++ b/frontend/src/page/admin/users/update-user-component.jsx
@@ -44,11 +44,14 @@ function AddUser({
         closeDialog();
     };
 
+    const formId = 'update-user-dialog-form'
+
     return (
         <Dialogue
             onClick={e => {
                 submit(e);
             }}
+            formId={formId}
             open={showDialog}
             onClose={onCancel}
             primaryButtonText="Update user"
@@ -64,6 +67,7 @@ function AddUser({
                 error={error}
                 userApiErrors={userApiErrors}
                 userLoading={userLoading}
+                formId={formId}
             />
         </Dialogue>
     );
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 212c51461e..0c4fc24405 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -10155,6 +10155,11 @@ prepend-http@^1.0.0:
   resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
+  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz"