diff --git a/frontend/src/js/common-ui/AsyncAutocomplete.tsx b/frontend/src/js/common-ui/AsyncAutocomplete.tsx
index d7a9f1bb..0c4373fe 100644
--- a/frontend/src/js/common-ui/AsyncAutocomplete.tsx
+++ b/frontend/src/js/common-ui/AsyncAutocomplete.tsx
@@ -13,8 +13,7 @@
 //    limitations under the License.
 import React, { useEffect, useState } from 'react';
 
-import { Autocomplete, TextField } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { Autocomplete, TextField, useTheme } from '@mui/material';
 
 import { TIMEOUTS } from '@northern.tech/store/constants';
 import { useDebounce } from '@northern.tech/utils/debouncehook';
@@ -85,14 +84,16 @@ export const AsyncAutocomplete = ({
           label={label}
           placeholder={placeholder}
           style={styles.textField}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {loading && <Loader show small table style={{ marginTop: theme.spacing(-4) }} />}
-                {params.InputProps.endAdornment}
-              </>
-            )
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading && <Loader show small table style={{ marginTop: theme.spacing(-4) }} />}
+                  {params.InputProps.endAdornment}
+                </>
+              )
+            }
           }}
         />
       )}
diff --git a/frontend/src/js/common-ui/ChipSelect.tsx b/frontend/src/js/common-ui/ChipSelect.tsx
index a13700ea..1d5fddd0 100644
--- a/frontend/src/js/common-ui/ChipSelect.tsx
+++ b/frontend/src/js/common-ui/ChipSelect.tsx
@@ -18,7 +18,7 @@ import { Autocomplete, TextField } from '@mui/material';
 
 import { duplicateFilter, unionizeStrings } from '@northern.tech/utils/helpers';
 
-export const ChipSelect = ({ className = '', name, disabled = false, inputRef, label = '', options = [], placeholder = '' }) => {
+export const ChipSelect = ({ className = '', name, disabled = false, helperText, inputRef, label = '', options = [], placeholder = '' }) => {
   const [value, setValue] = useState('');
 
   const { control, getValues } = useFormContext();
@@ -72,13 +72,17 @@ export const ChipSelect = ({ className = '', name, disabled = false, inputRef, l
             <TextField
               {...params}
               fullWidth
-              inputProps={{ ...params.inputProps, value }}
-              InputProps={{ ...params.InputProps, disableUnderline: disabled }}
+              slotProps={{
+                htmlInput: { ...params.inputProps, value },
+                input: { ...params.InputProps, disableUnderline: disabled }
+              }}
               key={`${name}-input`}
               label={label}
+              variant={disabled ? 'standard' : 'outlined'}
               onBlur={e => onTextInputLeave(e.target.value, formOnChange)}
               onChange={e => onTextInputChange(e.target.value, 'input', formOnChange)}
               placeholder={currentSelection.length ? '' : placeholder}
+              helperText={helperText}
               inputRef={inputRef}
             />
           )}
diff --git a/frontend/src/js/common-ui/DeviceNameInput.tsx b/frontend/src/js/common-ui/DeviceNameInput.tsx
index e73f47ad..227fd8e2 100644
--- a/frontend/src/js/common-ui/DeviceNameInput.tsx
+++ b/frontend/src/js/common-ui/DeviceNameInput.tsx
@@ -15,7 +15,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 // material ui
-import { Input, InputAdornment } from '@mui/material';
+import { InputAdornment, OutlinedInput } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 
 import { setDeviceTags } from '@northern.tech/store/thunks';
@@ -71,7 +71,7 @@ export const DeviceNameInput = ({ device, isHovered }) => {
   const onInputClick = e => e.stopPropagation();
 
   return (
-    <Input
+    <OutlinedInput
       id={`${device.id}-id-input`}
       className={classes.input}
       disabled={!isEditing}
diff --git a/frontend/src/js/common-ui/Search.tsx b/frontend/src/js/common-ui/Search.tsx
index 805c16ab..3190dbfd 100644
--- a/frontend/src/js/common-ui/Search.tsx
+++ b/frontend/src/js/common-ui/Search.tsx
@@ -16,21 +16,12 @@ import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-fo
 
 import { Search as SearchIcon } from '@mui/icons-material';
 import { InputAdornment, TextField } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 
 import { TIMEOUTS } from '@northern.tech/store/constants';
 import { useDebounce } from '@northern.tech/utils/debouncehook';
 
 import Loader from './Loader';
 
-const useStyles = makeStyles()(() => ({
-  root: {
-    input: {
-      fontSize: '13px'
-    }
-  }
-}));
-
 const endAdornment = (
   <InputAdornment position="end">
     <Loader show small style={{ marginTop: -10 }} />
@@ -46,8 +37,7 @@ const startAdornment = (
 // due to search not working reliably for single letter searches, only start at 2
 const MINIMUM_SEARCH_LENGTH = 2;
 
-export const ControlledSearch = ({ isSearching, name = 'search', onSearch, placeholder = 'Search devices', style = {} }) => {
-  const { classes } = useStyles();
+export const ControlledSearch = ({ className = '', isSearching, name = 'search', onSearch, placeholder = 'Search devices', style = {} }) => {
   const { control, watch } = useFormContext();
   const inputRef = useRef();
   const focusLockRef = useRef(true);
@@ -102,8 +92,8 @@ export const ControlledSearch = ({ isSearching, name = 'search', onSearch, place
       control={control}
       render={({ field }) => (
         <TextField
-          className={classes.root}
-          InputProps={adornments}
+          className={className}
+          slotProps={{ input: adornments }}
           onKeyUp={onTriggerSearch}
           onFocus={onFocus}
           placeholder={placeholder}
@@ -120,13 +110,13 @@ export const ControlledSearch = ({ isSearching, name = 'search', onSearch, place
 ControlledSearch.displayName = 'ConnectedSearch';
 
 const Search = props => {
-  const { searchTerm, onSearch, trigger } = props;
+  const { className = '', searchTerm, onSearch, trigger } = props;
   const methods = useForm({ mode: 'onChange', defaultValues: { search: searchTerm ?? '' } });
   const { handleSubmit } = methods;
   const onSubmit = useCallback(search => onSearch(search, !trigger), [onSearch, trigger]);
   return (
     <FormProvider {...methods}>
-      <form noValidate onSubmit={handleSubmit(({ search }) => onSearch(search, !trigger))}>
+      <form className={className} noValidate onSubmit={handleSubmit(({ search }) => onSearch(search, !trigger))}>
         <ControlledSearch {...props} onSearch={onSubmit} />
         <input className="hidden" type="submit" />
       </form>
diff --git a/frontend/src/js/common-ui/__snapshots__/DeviceNameInput.test.tsx.snap b/frontend/src/js/common-ui/__snapshots__/DeviceNameInput.test.tsx.snap
index 0ec7b8c3..f02b8663 100644
--- a/frontend/src/js/common-ui/__snapshots__/DeviceNameInput.test.tsx.snap
+++ b/frontend/src/js/common-ui/__snapshots__/DeviceNameInput.test.tsx.snap
@@ -19,6 +19,8 @@ exports[`DeviceNameInput Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
   color: rgba(10, 10, 11, 0.78);
   font-size: 0.8125rem;
 }
@@ -28,73 +30,30 @@ exports[`DeviceNameInput Component renders correctly 1`] = `
   cursor: default;
 }
 
-.emotion-0::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-0.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-0.Mui-error::before,
-.emotion-0.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-0::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-0:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-0:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-0:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-0:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-0.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-0::after {
-  border-bottom: 2px solid #337a87;
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-0:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-0.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-0:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-0:after {
-  border-bottom: 2px solid #337a87;
+.emotion-0.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-1 {
@@ -115,6 +74,8 @@ exports[`DeviceNameInput Component renders correctly 1`] = `
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-1::-webkit-input-placeholder {
@@ -186,6 +147,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-1:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -341,11 +306,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   margin-right: 8px;
 }
 
+.emotion-6 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-7 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <div
-  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-0"
+  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-0"
 >
   <input
-    class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-1"
+    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-1"
     disabled=""
     id="a1-id-input"
     placeholder="a1..."
@@ -380,5 +373,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
       Edit
     </button>
   </div>
+  <fieldset
+    aria-hidden="true"
+    class="MuiOutlinedInput-notchedOutline emotion-6"
+  >
+    <legend
+      class="emotion-7"
+    >
+      <span
+        aria-hidden="true"
+        class="notranslate"
+      >
+        ​
+      </span>
+    </legend>
+  </fieldset>
 </div>
 `;
diff --git a/frontend/src/js/common-ui/__snapshots__/Search.test.tsx.snap b/frontend/src/js/common-ui/__snapshots__/Search.test.tsx.snap
index a0caaa19..f7537d1c 100644
--- a/frontend/src/js/common-ui/__snapshots__/Search.test.tsx.snap
+++ b/frontend/src/js/common-ui/__snapshots__/Search.test.tsx.snap
@@ -15,14 +15,9 @@ exports[`Search Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-0 input {
-  font-size: 13px;
-}
-
 .emotion-1 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -41,6 +36,9 @@ exports[`Search Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-left: 14px;
+  padding-right: 14px;
 }
 
 .emotion-1.Mui-disabled {
@@ -48,77 +46,30 @@ exports[`Search Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-1 {
-  margin-top: 16px;
-}
-
-.emotion-1::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-1.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-1.Mui-error::before,
-.emotion-1.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-1::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-1:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-1:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-1:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-1:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-1.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-1::after {
-  border-bottom: 2px solid #337a87;
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-1:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-1.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-1:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-1:after {
-  border-bottom: 2px solid #337a87;
+.emotion-1.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-2 {
@@ -177,6 +128,10 @@ label+.emotion-1 {
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
   padding-top: 1px;
+  padding: 16.5px 14px;
+  padding: 8.5px 14px;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -248,6 +203,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -263,17 +222,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   margin-left: 8px;
 }
 
+.emotion-6 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-7 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <form
+  class=""
   novalidate=""
 >
   <div
     class="MuiFormControl-root MuiTextField-root emotion-0"
   >
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd emotion-1"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd emotion-1"
     >
       <div
-        class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-standard MuiInputAdornment-sizeSmall emotion-2"
+        class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall emotion-2"
       >
         <span
           aria-hidden="true"
@@ -295,7 +283,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
       </div>
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd emotion-4"
+        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd emotion-4"
         id=":r0:"
         name="search"
         placeholder="Search devices"
@@ -303,7 +291,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         value="something"
       />
       <div
-        class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall emotion-5"
+        class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall emotion-5"
       >
         <div
           class="loaderContainer"
@@ -327,6 +315,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           </div>
         </div>
       </div>
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline emotion-6"
+      >
+        <legend
+          class="emotion-7"
+        >
+          <span
+            aria-hidden="true"
+            class="notranslate"
+          >
+            ​
+          </span>
+        </legend>
+      </fieldset>
     </div>
   </div>
   <input
diff --git a/frontend/src/js/common-ui/dialogs/__snapshots__/PhysicalDeviceOnboarding.test.tsx.snap b/frontend/src/js/common-ui/dialogs/__snapshots__/PhysicalDeviceOnboarding.test.tsx.snap
index 38f3c4ab..ff625de2 100644
--- a/frontend/src/js/common-ui/dialogs/__snapshots__/PhysicalDeviceOnboarding.test.tsx.snap
+++ b/frontend/src/js/common-ui/dialogs/__snapshots__/PhysicalDeviceOnboarding.test.tsx.snap
@@ -150,7 +150,6 @@ exports[`PhysicalDeviceOnboarding Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -178,6 +177,13 @@ exports[`PhysicalDeviceOnboarding Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-2.Mui-focused {
@@ -215,6 +221,8 @@ exports[`PhysicalDeviceOnboarding Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -222,77 +230,30 @@ exports[`PhysicalDeviceOnboarding Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -313,6 +274,8 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -384,6 +347,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
   position: absolute;
   right: 0;
@@ -515,6 +482,47 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
 }
 
 .emotion-9 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-10 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-10>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-11 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -531,7 +539,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-9 iconButton {
+.emotion-11 iconButton {
   margin-right: 8px;
 }
 
@@ -554,7 +562,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         style="margin-top: 0px;"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-2"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-2"
           data-shrink="false"
           for="device-type-selection"
           id="device-type-selection-label"
@@ -562,7 +570,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           Device type
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
         >
           <input
             aria-autocomplete="list"
@@ -570,7 +578,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
             aria-invalid="false"
             autocapitalize="none"
             autocomplete="off"
-            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
             id="device-type-selection"
             placeholder="Choose a device type"
             role="combobox"
@@ -605,6 +613,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
               </svg>
             </button>
           </div>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-9"
+          >
+            <legend
+              class="emotion-10"
+            >
+              <span>
+                Device type
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
     </div>
@@ -615,7 +635,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-11"
         data-testid="InfoOutlinedIcon"
         focusable="false"
         viewBox="0 0 24 24"
@@ -798,7 +818,6 @@ exports[`PhysicalDeviceOnboarding Component tiny onboarding tips renders DeviceT
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -832,6 +851,23 @@ exports[`PhysicalDeviceOnboarding Component tiny onboarding tips renders DeviceT
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
 .emotion-2.Mui-focused {
@@ -869,6 +905,8 @@ exports[`PhysicalDeviceOnboarding Component tiny onboarding tips renders DeviceT
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -876,77 +914,30 @@ exports[`PhysicalDeviceOnboarding Component tiny onboarding tips renders DeviceT
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -967,6 +958,8 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -1038,6 +1031,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
   position: absolute;
   right: 0;
@@ -1169,6 +1166,50 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
 }
 
 .emotion-9 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-10 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-10>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-11 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1185,11 +1226,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-9 iconButton {
+.emotion-11 iconButton {
   margin-right: 8px;
 }
 
-.emotion-10 {
+.emotion-12 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1207,15 +1248,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   color: #337a87;
 }
 
-.emotion-10 iconButton {
+.emotion-12 iconButton {
   margin-right: 8px;
 }
 
-.emotion-10.read {
+.emotion-12.read {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-11 {
+.emotion-13 {
   position: absolute;
   top: -5px;
   bottom: 0;
@@ -1225,7 +1266,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-11.read {
+.emotion-13.read {
   border-color: rgba(0, 0, 0, 0.38);
 }
 
@@ -1248,7 +1289,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         style="margin-top: 0px;"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-2"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-2"
           data-shrink="true"
           for="device-type-selection"
           id="device-type-selection-label"
@@ -1256,7 +1297,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           Device type
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
         >
           <input
             aria-autocomplete="list"
@@ -1264,7 +1305,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
             aria-invalid="false"
             autocapitalize="none"
             autocomplete="off"
-            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
             id="device-type-selection"
             placeholder="Choose a device type"
             role="combobox"
@@ -1299,6 +1340,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
               </svg>
             </button>
           </div>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-9"
+          >
+            <legend
+              class="emotion-10"
+            >
+              <span>
+                Device type
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
     </div>
@@ -1309,7 +1362,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-11"
         data-testid="InfoOutlinedIcon"
         focusable="false"
         viewBox="0 0 24 24"
@@ -1328,7 +1381,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-10"
+          class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-12"
           data-testid="HelpIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -1338,7 +1391,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           />
         </svg>
         <div
-          class="emotion-11 "
+          class="emotion-13 "
         />
       </div>
     </div>
diff --git a/frontend/src/js/common-ui/forms/AddonSelect.tsx b/frontend/src/js/common-ui/forms/AddonSelect.tsx
index cff1bbc5..d3faa400 100644
--- a/frontend/src/js/common-ui/forms/AddonSelect.tsx
+++ b/frontend/src/js/common-ui/forms/AddonSelect.tsx
@@ -33,6 +33,8 @@ export const AddonSelect = (props: AddonSelectProps) => {
       <InputLabel id="addons-selection-label">Select Addons</InputLabel>
       <Select
         multiple
+        label="Select Addons"
+        labelId="addons-selection-label"
         value={selectedAddons}
         onChange={onSelectedChange}
         renderValue={selected => selected.map((role: AddonId) => 'Mender ' + ADDONS[role].title).join(', ')}
diff --git a/frontend/src/js/common-ui/forms/CountrySelect.tsx b/frontend/src/js/common-ui/forms/CountrySelect.tsx
index b3f98d7f..bdcae1bb 100644
--- a/frontend/src/js/common-ui/forms/CountrySelect.tsx
+++ b/frontend/src/js/common-ui/forms/CountrySelect.tsx
@@ -57,7 +57,10 @@ export const ControlledCountrySelect = ({ control, id, required }) => {
   return (
     <Controller
       rules={{ required }}
-      render={({ field: { onChange }, ...props }) => <CountrySelect defaultValue={defaultCountry} onChange={onChange} id={id} {...props} />}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      render={({ field: { onChange }, formState, fieldState, ...props }) => (
+        <CountrySelect defaultValue={defaultCountry} onChange={onChange} id={id} {...props} />
+      )}
       name="country"
       control={control}
     />
diff --git a/frontend/src/js/common-ui/forms/FileUpload.tsx b/frontend/src/js/common-ui/forms/FileUpload.tsx
index 9bc0603e..c2857fe0 100644
--- a/frontend/src/js/common-ui/forms/FileUpload.tsx
+++ b/frontend/src/js/common-ui/forms/FileUpload.tsx
@@ -58,7 +58,7 @@ export const FileUpload = ({ enableContentReading = true, fileNameSelection, onF
 
   return filename ? (
     <div style={style}>
-      <TextField id="keyfile" value={filename} disabled={true} style={{ color: 'rgba(0, 0, 0, 0.8)', borderBottom: '1px solid rgb(224, 224, 224)' }} />
+      <TextField id="keyfile" value={filename} disabled style={{ color: 'rgba(0, 0, 0, 0.8)', borderBottom: '1px solid rgb(224, 224, 224)' }} />
       <IconButton style={{ top: '6px' }} onClick={onClear} size="large">
         <ClearIcon />
       </IconButton>
diff --git a/frontend/src/js/common-ui/forms/Filters.tsx b/frontend/src/js/common-ui/forms/Filters.tsx
index 7097c201..c6d4e516 100644
--- a/frontend/src/js/common-ui/forms/Filters.tsx
+++ b/frontend/src/js/common-ui/forms/Filters.tsx
@@ -77,7 +77,7 @@ export const Filters = ({ className = '', defaultValues, filters = [], initialVa
       <form className={`margin-bottom relative margin-top ${classes.filters} ${className}`} noValidate>
         {filters.map(({ key, title, Component, componentProps }) => (
           <div className="filter-item" key={key}>
-            <h5 className="margin-top-small margin-bottom-none muted">{title}</h5>
+            <h5 className="margin-top-small margin-bottom-small muted">{title}</h5>
             <Component name={key} {...componentProps} />
           </div>
         ))}
diff --git a/frontend/src/js/common-ui/forms/KeyValueEditor.tsx b/frontend/src/js/common-ui/forms/KeyValueEditor.tsx
index 637ba062..84c135ff 100644
--- a/frontend/src/js/common-ui/forms/KeyValueEditor.tsx
+++ b/frontend/src/js/common-ui/forms/KeyValueEditor.tsx
@@ -14,13 +14,17 @@
 import React, { createRef, useEffect, useState } from 'react';
 
 import { Clear as ClearIcon, Add as ContentAddIcon } from '@mui/icons-material';
-import { Fab, FormControl, FormHelperText, IconButton, Input } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { Fab, FormControl, FormHelperText, IconButton, OutlinedInput } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
 const emptyInput = { helptip: null, key: '', value: '' };
 
+const useStyles = makeStyles()(theme => ({
+  spacer: { minWidth: theme.spacing(30) }
+}));
+
 export const KeyValueEditor = ({ disabled, errortext, initialInput = {}, inputHelpTipsMap = {}, onInputChange, reset }) => {
-  const theme = useTheme();
+  const { classes } = useStyles();
   const [inputs, setInputs] = useState([{ ...emptyInput }]);
   const [error, setError] = useState('');
 
@@ -86,11 +90,11 @@ export const KeyValueEditor = ({ disabled, errortext, initialInput = {}, inputHe
         return (
           <div className="key-value-container relative" key={index}>
             <FormControl>
-              <Input disabled={disabled} value={input.key} placeholder="Key" onChange={e => updateInputs('key', index, e)} type="text" />
+              <OutlinedInput disabled={disabled} value={input.key} placeholder="Key" onChange={e => updateInputs('key', index, e)} type="text" />
               {hasError && <FormHelperText>{errortext || error}</FormHelperText>}
             </FormControl>
             <FormControl>
-              <Input disabled={disabled} value={`${input.value}`} placeholder="Value" onChange={e => updateInputs('value', index, e)} type="text" />
+              <OutlinedInput disabled={disabled} value={input.value} placeholder="Value" onChange={e => updateInputs('value', index, e)} type="text" />
             </FormControl>
             {inputs.length > 1 && !hasRemovalDisabled ? (
               <IconButton disabled={disabled} onClick={() => removeInput(index)} size="large">
@@ -99,12 +103,12 @@ export const KeyValueEditor = ({ disabled, errortext, initialInput = {}, inputHe
             ) : (
               <span />
             )}
-            {Helptip && <Helptip anchor={{ left: -35, top: 5 }} {...inputs[index].helptip.props} />}
+            {Helptip && <Helptip anchor={{ left: -35, top: 15, position: 'absolute' }} {...inputs[index].helptip.props} />}
           </div>
         );
       })}
       <div className="key-value-container">
-        <div style={{ minWidth: theme.spacing(30) }}>
+        <div className={classes.spacer}>
           <Fab
             disabled={disabled || !inputs[inputs.length - 1].key || !inputs[inputs.length - 1].value}
             style={{ marginBottom: 10 }}
@@ -115,7 +119,7 @@ export const KeyValueEditor = ({ disabled, errortext, initialInput = {}, inputHe
             <ContentAddIcon />
           </Fab>
         </div>
-        <div style={{ minWidth: theme.spacing(30) }} />
+        <div className={classes.spacer} />
         {inputs.length > 1 ? (
           <a className="margin-left-small" onClick={onClearClick}>
             clear all
diff --git a/frontend/src/js/common-ui/forms/PasswordInput.tsx b/frontend/src/js/common-ui/forms/PasswordInput.tsx
index 942be7a1..01ae55a2 100644
--- a/frontend/src/js/common-ui/forms/PasswordInput.tsx
+++ b/frontend/src/js/common-ui/forms/PasswordInput.tsx
@@ -15,7 +15,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 import { CheckCircle as CheckIcon, Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from '@mui/icons-material';
-import { Button, FormControl, FormHelperText, IconButton, Input, InputAdornment, InputLabel } from '@mui/material';
+import { Button, FormControl, FormHelperText, IconButton, InputAdornment, InputLabel, OutlinedInput } from '@mui/material';
 
 import { TIMEOUTS } from '@northern.tech/store/constants';
 import { toggle } from '@northern.tech/utils/helpers';
@@ -146,6 +146,7 @@ export const PasswordInput = ({
     return score > SCORE_THRESHOLD && isValid;
   };
 
+  const showAsNotched = label && typeof label !== 'string' ? { notched: true } : {};
   return (
     <div className={className}>
       <div className="password-wrapper">
@@ -158,9 +159,10 @@ export const PasswordInput = ({
               <InputLabel htmlFor={id} {...InputLabelProps}>
                 {label}
               </InputLabel>
-              <Input
+              <OutlinedInput
                 autoComplete={autocomplete}
                 id={id}
+                label={label}
                 name={id}
                 type={visible ? 'text' : 'password'}
                 defaultValue={defaultValue}
@@ -181,6 +183,7 @@ export const PasswordInput = ({
                     </IconButton>
                   </InputAdornment>
                 }
+                {...showAsNotched}
               />
               <FormHelperText>{(errors[errorKey] || error)?.message}</FormHelperText>
             </FormControl>
diff --git a/frontend/src/js/common-ui/forms/TextInput.tsx b/frontend/src/js/common-ui/forms/TextInput.tsx
index 32ffbce1..4368c97e 100644
--- a/frontend/src/js/common-ui/forms/TextInput.tsx
+++ b/frontend/src/js/common-ui/forms/TextInput.tsx
@@ -14,7 +14,7 @@
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { FormControl, FormHelperText, Input, InputLabel } from '@mui/material';
+import { FormControl, FormHelperText, InputLabel, OutlinedInput } from '@mui/material';
 
 import { runValidations } from './Form';
 
@@ -65,9 +65,10 @@ export const TextInput = ({
           <InputLabel htmlFor={id} {...InputLabelProps}>
             {label}
           </InputLabel>
-          <Input
+          <OutlinedInput
             autoComplete={autocomplete}
             id={id}
+            label={label}
             name={id}
             disabled={disabled}
             inputRef={inputRef => {
@@ -80,7 +81,6 @@ export const TextInput = ({
             onChange={({ target: { value } }) => onChange(value)}
             onBlur={() => (validations.includes('trim') ? onChange((value ?? passedValue).trim()) : onBlur)}
             placeholder={hint}
-            required={required}
             type={type}
             {...InputProps}
           />
diff --git a/frontend/src/js/common-ui/forms/__snapshots__/Form.test.tsx.snap b/frontend/src/js/common-ui/forms/__snapshots__/Form.test.tsx.snap
index d5926b39..46c28b97 100644
--- a/frontend/src/js/common-ui/forms/__snapshots__/Form.test.tsx.snap
+++ b/frontend/src/js/common-ui/forms/__snapshots__/Form.test.tsx.snap
@@ -156,7 +156,6 @@ exports[`Form Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -184,6 +183,13 @@ exports[`Form Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-6.Mui-focused {
@@ -220,6 +226,8 @@ exports[`Form Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-7.Mui-disabled {
@@ -227,77 +235,30 @@ exports[`Form Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-7 {
-  margin-top: 16px;
-}
-
-.emotion-7::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-7.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-7.Mui-error::before,
-.emotion-7.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-7::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-7:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-7:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-7:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-7:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-7.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-7::after {
-  border-bottom: 2px solid #337a87;
+.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-7:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-7.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-7:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-7:after {
-  border-bottom: 2px solid #337a87;
+.emotion-7.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-8 {
@@ -318,6 +279,8 @@ label+.emotion-7 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-8::-webkit-input-placeholder {
@@ -389,6 +352,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-8:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -503,6 +470,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
 }
 
 .emotion-13 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-14 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-15 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -513,17 +508,165 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-13.Mui-error {
+.emotion-15.Mui-error {
   color: #ab1000;
 }
 
+.emotion-18 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+}
+
+.emotion-18.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-18:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-18:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-18.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-18.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
 .emotion-19 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+}
+
+.emotion-19::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19:focus {
+  outline: 0;
+}
+
+.emotion-19:invalid {
+  box-shadow: none;
+}
+
+.emotion-19::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-19.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-19:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-19:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -538,7 +681,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-top: 32px;
 }
 
-.emotion-20 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -597,57 +740,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-20::-moz-focus-inner {
+.emotion-24::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-20 {
+  .emotion-24 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-20:active {
+.emotion-24:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-focusVisible {
+.emotion-24.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -655,15 +798,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   }
 }
 
-.emotion-20.MuiButton-loading {
+.emotion-24.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   colors: #337a87;
 }
 
-.emotion-20.MuiButton-text {
+.emotion-24.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -710,23 +853,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
         style="width: 400px;"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-6"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-6"
           data-shrink="false"
           for="password"
         />
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-7"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-7"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-8"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-8"
             id="password"
             name="password"
             type="password"
             value=""
           />
           <div
-            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-9"
+            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-9"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-10"
@@ -750,9 +893,24 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </svg>
             </button>
           </div>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-13"
+          >
+            <legend
+              class="emotion-14"
+            >
+              <span
+                aria-hidden="true"
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
         </div>
         <p
-          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-13"
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-15"
         />
       </div>
     </div>
@@ -776,31 +934,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
     style="width: 400px;"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-6"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-6"
       data-shrink="false"
       for="textbox"
     />
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-7"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiInput-input emotion-8"
+        class="MuiInputBase-input MuiOutlinedInput-input emotion-19"
         id="textbox"
         name="textbox"
         type="text"
         value=""
       />
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline emotion-13"
+      >
+        <legend
+          class="emotion-14"
+        >
+          <span
+            aria-hidden="true"
+            class="notranslate"
+          >
+            ​
+          </span>
+        </legend>
+      </fieldset>
     </div>
     <p
-      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-13"
+      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-15"
     />
   </div>
   <div
-    class="button-wrapper emotion-19 "
+    class="button-wrapper emotion-23 "
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-20"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-24"
       disabled=""
       id=":r1:"
       tabindex="-1"
diff --git a/frontend/src/js/common-ui/forms/__snapshots__/TimeFramePicker.test.tsx.snap b/frontend/src/js/common-ui/forms/__snapshots__/TimeFramePicker.test.tsx.snap
index 291830bd..2cfc53e1 100644
--- a/frontend/src/js/common-ui/forms/__snapshots__/TimeFramePicker.test.tsx.snap
+++ b/frontend/src/js/common-ui/forms/__snapshots__/TimeFramePicker.test.tsx.snap
@@ -156,7 +156,6 @@ exports[`Form Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -184,6 +183,13 @@ exports[`Form Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-6.Mui-focused {
@@ -220,6 +226,8 @@ exports[`Form Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-7.Mui-disabled {
@@ -227,77 +235,30 @@ exports[`Form Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-7 {
-  margin-top: 16px;
-}
-
-.emotion-7::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-7.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-7.Mui-error::before,
-.emotion-7.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-7::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-7:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-7:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-7:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-7:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-7.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-7::after {
-  border-bottom: 2px solid #337a87;
+.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-7:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-7:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-7.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-7:after {
-  border-bottom: 2px solid #337a87;
+.emotion-7.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-8 {
@@ -318,6 +279,8 @@ label+.emotion-7 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-8::-webkit-input-placeholder {
@@ -389,6 +352,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-8:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -503,6 +470,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
 }
 
 .emotion-13 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-14 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-15 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -513,17 +508,165 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-13.Mui-error {
+.emotion-15.Mui-error {
   color: #ab1000;
 }
 
+.emotion-18 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+}
+
+.emotion-18.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-18:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-18:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-18.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-18.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
 .emotion-19 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+}
+
+.emotion-19::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19:focus {
+  outline: 0;
+}
+
+.emotion-19:invalid {
+  box-shadow: none;
+}
+
+.emotion-19::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-19.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-19:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-19:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -538,7 +681,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-top: 32px;
 }
 
-.emotion-20 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -597,57 +740,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-20::-moz-focus-inner {
+.emotion-24::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-20 {
+  .emotion-24 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-20:active {
+.emotion-24:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-focusVisible {
+.emotion-24.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -655,15 +798,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   }
 }
 
-.emotion-20.MuiButton-loading {
+.emotion-24.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   colors: #337a87;
 }
 
-.emotion-20.MuiButton-text {
+.emotion-24.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -710,23 +853,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
         style="width: 400px;"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-6"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-6"
           data-shrink="false"
           for="password"
         />
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-7"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-7"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-8"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-8"
             id="password"
             name="password"
             type="password"
             value=""
           />
           <div
-            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-9"
+            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-9"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-10"
@@ -750,9 +893,24 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </svg>
             </button>
           </div>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-13"
+          >
+            <legend
+              class="emotion-14"
+            >
+              <span
+                aria-hidden="true"
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
         </div>
         <p
-          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-13"
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-15"
         />
       </div>
     </div>
@@ -776,31 +934,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
     style="width: 400px;"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-6"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-6"
       data-shrink="false"
       for="textbox"
     />
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-7"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiInput-input emotion-8"
+        class="MuiInputBase-input MuiOutlinedInput-input emotion-19"
         id="textbox"
         name="textbox"
         type="text"
         value=""
       />
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline emotion-13"
+      >
+        <legend
+          class="emotion-14"
+        >
+          <span
+            aria-hidden="true"
+            class="notranslate"
+          >
+            ​
+          </span>
+        </legend>
+      </fieldset>
     </div>
     <p
-      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-13"
+      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-15"
     />
   </div>
   <div
-    class="button-wrapper emotion-19 "
+    class="button-wrapper emotion-23 "
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-20"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-24"
       disabled=""
       id=":r1:"
       tabindex="-1"
@@ -825,7 +998,6 @@ exports[`TimeframePicker Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -874,6 +1046,23 @@ exports[`TimeframePicker Component renders correctly 1`] = `
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
 .emotion-1.Mui-focused {
@@ -910,6 +1099,8 @@ exports[`TimeframePicker Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-2.Mui-disabled {
@@ -917,77 +1108,30 @@ exports[`TimeframePicker Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-2 {
-  margin-top: 16px;
-}
-
-.emotion-2::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-2.Mui-error::before,
-.emotion-2.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-2::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-2:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-2:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-2.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-2::after {
-  border-bottom: 2px solid #337a87;
+.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-2:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-2:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-2.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-2:after {
-  border-bottom: 2px solid #337a87;
+.emotion-2.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-3 {
@@ -1008,6 +1152,8 @@ label+.emotion-2 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-3::-webkit-input-placeholder {
@@ -1079,6 +1225,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-3:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1212,6 +1362,50 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   margin-right: 8px;
 }
 
+.emotion-8 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-9 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-9>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
 <div>
   <div
     class="flexbox"
@@ -1221,7 +1415,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
       class="MuiFormControl-root MuiTextField-root emotion-0"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-1"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-1"
         data-shrink="true"
         for=":r5:"
         id=":r5:-label"
@@ -1229,12 +1423,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
         From
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-adornedEnd emotion-2"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-adornedEnd emotion-2"
       >
         <input
           aria-invalid="false"
           autocomplete="off"
-          class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-3"
+          class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-3"
           disabled=""
           id=":r5:"
           inputmode="text"
@@ -1243,7 +1437,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
           value="January 13th"
         />
         <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-4"
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-4"
         >
           <button
             aria-label="Choose date, selected date is Jan 13, 2019"
@@ -1269,13 +1463,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
             </svg>
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-8"
+        >
+          <legend
+            class="emotion-9"
+          >
+            <span>
+              From
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
     <div
       class="MuiFormControl-root MuiTextField-root emotion-0"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-1"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-1"
         data-shrink="true"
         for=":r8:"
         id=":r8:-label"
@@ -1283,12 +1489,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
         To
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-2"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-2"
       >
         <input
           aria-invalid="false"
           autocomplete="off"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-3"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-3"
           id=":r8:"
           inputmode="text"
           placeholder="MMMM DD"
@@ -1296,7 +1502,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
           value="January 13th"
         />
         <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-4"
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-4"
         >
           <button
             aria-label="Choose date, selected date is Jan 13, 2019"
@@ -1321,6 +1527,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
             </svg>
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-8"
+        >
+          <legend
+            class="emotion-9"
+          >
+            <span>
+              To
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
diff --git a/frontend/src/js/components/__snapshots__/App.test.tsx.snap b/frontend/src/js/components/__snapshots__/App.test.tsx.snap
index fcbab630..cab3b65a 100644
--- a/frontend/src/js/components/__snapshots__/App.test.tsx.snap
+++ b/frontend/src/js/components/__snapshots__/App.test.tsx.snap
@@ -99,6 +99,12 @@ exports[`App Component is embedded in working providers 1`] = `
 }
 
 .emotion-4 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+.emotion-5 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -112,15 +118,13 @@ exports[`App Component is embedded in working providers 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
 }
 
-.emotion-4 input {
-  font-size: 13px;
-}
-
-.emotion-5 {
+.emotion-6 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -138,87 +142,42 @@ exports[`App Component is embedded in working providers 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-left: 14px;
 }
 
-.emotion-5.Mui-disabled {
+.emotion-6.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-5 {
-  margin-top: 16px;
-}
-
-.emotion-5::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-5.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-5.Mui-error::before,
-.emotion-5.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-5::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-5:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-6:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-5:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-6:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-5.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-5::after {
-  border-bottom: 2px solid #337a87;
+.emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-5:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-5:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-6.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-5:after {
-  border-bottom: 2px solid #337a87;
+.emotion-6.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -233,7 +192,7 @@ label+.emotion-5 {
   margin-right: 8px;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -251,11 +210,11 @@ label+.emotion-5 {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-7 iconButton {
+.emotion-8 iconButton {
   margin-right: 8px;
 }
 
-.emotion-8 {
+.emotion-9 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -274,78 +233,113 @@ label+.emotion-5 {
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
   padding-top: 1px;
+  padding: 16.5px 14px;
+  padding: 8.5px 14px;
+  padding-left: 0;
 }
 
-.emotion-8::-webkit-input-placeholder {
+.emotion-9::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-8::-moz-placeholder {
+.emotion-9::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-8::-ms-input-placeholder {
+.emotion-9::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-8:focus {
+.emotion-9:focus {
   outline: 0;
 }
 
-.emotion-8:invalid {
+.emotion-9:invalid {
   box-shadow: none;
 }
 
-.emotion-8::-webkit-search-decoration {
+.emotion-9::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-8::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-8::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-8::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-9.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-8:-webkit-autofill {
+.emotion-9:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-9 {
+.emotion-9:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-10 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-11 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-12 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -362,11 +356,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-9 iconButton {
+.emotion-12 iconButton {
   margin-right: 8px;
 }
 
-.emotion-10 {
+.emotion-13 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -387,11 +381,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-size: 20px;
 }
 
-.emotion-10 iconButton {
+.emotion-13 iconButton {
   margin-right: 8px;
 }
 
-.emotion-11 {
+.emotion-14 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -453,33 +447,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   text-transform: none;
 }
 
-.emotion-11::-moz-focus-inner {
+.emotion-14::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-11.Mui-disabled {
+.emotion-14.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-11 {
+  .emotion-14 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-11:hover {
+.emotion-14:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-11.Mui-disabled {
+.emotion-14.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-11:hover {
+  .emotion-14:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -487,34 +481,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   }
 }
 
-.emotion-11.MuiButton-loading {
+.emotion-14.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-11:hover {
+.emotion-14:hover {
   colors: #337a87;
 }
 
-.emotion-11.MuiButton-text {
+.emotion-14.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-11 .MuiMenuItem-root:hover,
-.emotion-11 .MuiListItemText-root:hover {
+.emotion-14 .MuiMenuItem-root:hover,
+.emotion-14 .MuiListItemText-root:hover {
   color: #679ba5;
 }
 
-.emotion-12 {
+.emotion-15 {
   display: inherit;
   margin-right: 8px;
   margin-left: -4px;
 }
 
-.emotion-12>*:nth-of-type(1) {
+.emotion-15>*:nth-of-type(1) {
   font-size: 20px;
 }
 
-.emotion-13 {
+.emotion-16 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -532,16 +526,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   color: #cfcfcf;
 }
 
-.emotion-13 iconButton {
+.emotion-16 iconButton {
   margin-right: 8px;
 }
 
-.emotion-14 {
+.emotion-17 {
   background-color: #f7f7f7;
   border-right: 1px solid #e6f2f1;
 }
 
-.emotion-15 {
+.emotion-18 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -550,7 +544,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   padding-bottom: 8px;
 }
 
-.emotion-16 {
+.emotion-19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -578,25 +572,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   padding: 22px 16px 22px 42px;
 }
 
-.emotion-16.undefined {
+.emotion-19.undefined {
   opacity: 1;
 }
 
-.emotion-16.active {
+.emotion-19.active {
   background-color: #fff;
 }
 
-.emotion-16.leftNav.active {
+.emotion-19.leftNav.active {
   border-top: 1px solid #d4e9e7;
   border-bottom: 1px solid #d4e9e7;
 }
 
-.emotion-16.navLink,
-.emotion-16.navLink .MuiListItemText-root {
+.emotion-19.navLink,
+.emotion-19.navLink .MuiListItemText-root {
   color: #969696;
 }
 
-.emotion-17 {
+.emotion-20 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -608,15 +602,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   color: rgba(10, 10, 11, 0.78);
 }
 
-.MuiTypography-root:where(.emotion-17 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-20 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-17 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-20 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-18 {
+.emotion-21 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -624,7 +618,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-size: 0.9286rem;
 }
 
-.emotion-31 {
+.emotion-34 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -638,7 +632,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   right: 0;
 }
 
-.emotion-32 {
+.emotion-35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -666,25 +660,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   padding: 16px 16px 16px 42px;
 }
 
-.emotion-32.undefined {
+.emotion-35.undefined {
   opacity: 1;
 }
 
-.emotion-32.active {
+.emotion-35.active {
   background-color: #fff;
 }
 
-.emotion-32.leftNav.active {
+.emotion-35.leftNav.active {
   border-top: 1px solid #d4e9e7;
   border-bottom: 1px solid #d4e9e7;
 }
 
-.emotion-32.navLink,
-.emotion-32.navLink .MuiListItemText-root {
+.emotion-35.navLink,
+.emotion-35.navLink .MuiListItemText-root {
   color: #969696;
 }
 
-.emotion-36 {
+.emotion-39 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -698,15 +692,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   color: rgba(10, 10, 11, 0.78);
 }
 
-.MuiTypography-root:where(.emotion-36 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-39 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-36 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-39 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-38 {
+.emotion-41 {
   margin: 0;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -715,14 +709,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-39 {
+.emotion-42 {
   font-size: 13px;
   position: relative;
   top: 6px;
   color: #337a87;
 }
 
-.emotion-40 {
+.emotion-43 {
   -webkit-column-gap: 48px;
   column-gap: 48px;
   display: -webkit-box;
@@ -736,7 +730,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-bottom: 48px;
 }
 
-.emotion-41 {
+.emotion-44 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -757,12 +751,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
 }
 
 @media (min-width:1536px) {
-  .emotion-41 {
+  .emotion-44 {
     min-width: 50vw;
   }
 }
 
-.emotion-43 {
+.emotion-46 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -819,63 +813,63 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   z-index: 1;
 }
 
-.emotion-43::-moz-focus-inner {
+.emotion-46::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-43.Mui-disabled {
+.emotion-46.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-43 {
+  .emotion-46 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-43:active {
+.emotion-46:active {
   box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
 }
 
-.emotion-43:hover {
+.emotion-46:hover {
   background-color: #f5f5f5;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover: none) {
-  .emotion-43:hover {
+  .emotion-46:hover {
     background-color: #e6f2f1;
   }
 }
 
-.emotion-43.Mui-focusVisible {
+.emotion-46.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-43:hover {
+.emotion-46:hover {
   background-color: rgb(35, 85, 94);
 }
 
 @media (hover: none) {
-  .emotion-43:hover {
+  .emotion-46:hover {
     background-color: #337a87;
   }
 }
 
-.emotion-43.Mui-disabled {
+.emotion-46.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-45 {
+.emotion-48 {
   gap: 16px;
 }
 
-.emotion-46 {
+.emotion-49 {
   max-width: 100%;
   font-family: Lato,sans-serif;
   font-size: 0.7545rem;
@@ -914,12 +908,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   text-transform: uppercase;
 }
 
-.emotion-46.Mui-disabled {
+.emotion-49.Mui-disabled {
   opacity: 0.38;
   pointer-events: none;
 }
 
-.emotion-46 .MuiChip-avatar {
+.emotion-49 .MuiChip-avatar {
   margin-left: 5px;
   margin-right: -6px;
   width: 24px;
@@ -928,17 +922,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-size: 0.6964rem;
 }
 
-.emotion-46 .MuiChip-avatarColorPrimary {
+.emotion-49 .MuiChip-avatarColorPrimary {
   color: #fff;
   background-color: rgb(35, 85, 94);
 }
 
-.emotion-46 .MuiChip-avatarColorSecondary {
+.emotion-49 .MuiChip-avatarColorSecondary {
   color: #fff;
   background-color: rgb(65, 10, 46);
 }
 
-.emotion-46 .MuiChip-avatarSmall {
+.emotion-49 .MuiChip-avatarSmall {
   margin-left: 4px;
   margin-right: -4px;
   width: 18px;
@@ -946,12 +940,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-size: 0.5804rem;
 }
 
-.emotion-46 .MuiChip-icon {
+.emotion-49 .MuiChip-icon {
   margin-left: 5px;
   margin-right: -6px;
 }
 
-.emotion-46 .MuiChip-deleteIcon {
+.emotion-49 .MuiChip-deleteIcon {
   -webkit-tap-highlight-color: transparent;
   color: rgba(10, 10, 11, 0.26);
   font-size: 22px;
@@ -959,23 +953,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin: 0 5px 0 -6px;
 }
 
-.emotion-46 .MuiChip-deleteIcon:hover {
+.emotion-49 .MuiChip-deleteIcon:hover {
   color: rgba(10, 10, 11, 0.4);
 }
 
-.emotion-46 .MuiChip-icon {
+.emotion-49 .MuiChip-icon {
   color: #bcbcbc;
 }
 
-.emotion-46:hover {
+.emotion-49:hover {
   font-weight: bold;
 }
 
-.emotion-46:hover {
+.emotion-49:hover {
   font-weight: bold;
 }
 
-.emotion-47 {
+.emotion-50 {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 12px;
@@ -983,7 +977,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   white-space: nowrap;
 }
 
-.emotion-48 {
+.emotion-51 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1001,15 +995,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   color: #337a87;
 }
 
-.emotion-48 iconButton {
+.emotion-51 iconButton {
   margin-right: 8px;
 }
 
-.emotion-48.read {
+.emotion-51.read {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-49 {
+.emotion-52 {
   position: absolute;
   top: -5px;
   bottom: 0;
@@ -1019,16 +1013,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-49.read {
+.emotion-52.read {
   border-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-50 {
+.emotion-53 {
   font-size: 1rem;
   cursor: pointer;
 }
 
-.emotion-53 {
+.emotion-56 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1039,28 +1033,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   padding-top: 0;
 }
 
-.emotion-53 .deployments .dashboard>h4 {
+.emotion-56 .deployments .dashboard>h4 {
   margin-top: 48px;
 }
 
-.emotion-53 .deployments .dashboard>h4.margin-top-none {
+.emotion-56 .deployments .dashboard>h4.margin-top-none {
   margin-top: 0;
 }
 
 @media (min-width:1536px) {
-  .emotion-53 {
+  .emotion-56 {
     border-left: 1px solid #e9e9e9;
     margin-top: -16px;
     padding-left: 48px;
     padding-top: 16px;
   }
 
-  .emotion-53 .deployments .dashboard>h4 {
+  .emotion-56 .deployments .dashboard>h4 {
     margin-top: 0;
   }
 }
 
-.emotion-54 {
+.emotion-57 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1075,11 +1069,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   padding: 8px;
 }
 
-.emotion-54>div:last-child {
+.emotion-57>div:last-child {
   width: 100%;
 }
 
-.emotion-55 {
+.emotion-58 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1096,11 +1090,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-size: inherit;
 }
 
-.emotion-55 iconButton {
+.emotion-58 iconButton {
   margin-right: 8px;
 }
 
-.emotion-59 {
+.emotion-62 {
   background-color: #f7f7f7;
   padding: 10px 20px;
   border-radius: 4px;
@@ -1111,61 +1105,61 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   min-height: 70px;
 }
 
-.emotion-59 .chart-container {
+.emotion-62 .chart-container {
   min-height: 70px;
 }
 
-.emotion-59 .progress-chart {
+.emotion-62 .progress-chart {
   min-height: 45px;
 }
 
-.emotion-59 .compact .progress-step,
-.emotion-59 .detailed .progress-step {
+.emotion-62 .compact .progress-step,
+.emotion-62 .detailed .progress-step {
   min-height: 45px;
 }
 
-.emotion-59 .progress-step,
-.emotion-59 .detailed .progress-step-total {
+.emotion-62 .progress-step,
+.emotion-62 .detailed .progress-step-total {
   position: absolute;
   border-right-style: none;
 }
 
-.emotion-59 .progress-step-total .progress-bar {
+.emotion-62 .progress-step-total .progress-bar {
   background-color: #d4e9e7;
 }
 
-.emotion-59 .progress-step-number {
+.emotion-62 .progress-step-number {
   -webkit-align-self: flex-start;
   -ms-flex-item-align: flex-start;
   align-self: flex-start;
   margin-top: -4px;
 }
 
-.emotion-59.minimal {
+.emotion-62.minimal {
   padding: initial;
 }
 
-.emotion-59.no-background {
+.emotion-62.no-background {
   background: none;
 }
 
-.emotion-59.stepped-progress .progress-step-total {
+.emotion-62.stepped-progress .progress-step-total {
   margin-left: -0.25%;
   width: 100.5%;
 }
 
-.emotion-59.stepped-progress .progress-step-total .progress-bar {
+.emotion-62.stepped-progress .progress-step-total .progress-bar {
   background-color: #fff;
   border: 1px solid #a9a9a9;
   border-radius: 2px;
   height: 12px;
 }
 
-.emotion-59.stepped-progress .detailed .progress-step {
+.emotion-62.stepped-progress .detailed .progress-step {
   min-height: 20px;
 }
 
-.emotion-62 {
+.emotion-65 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1176,36 +1170,36 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   max-width: 500px;
 }
 
-.emotion-62>time {
+.emotion-65>time {
   -webkit-align-self: flex-end;
   -ms-flex-item-align: flex-end;
   align-self: flex-end;
   margin-right: 6px;
 }
 
-.emotion-64 {
+.emotion-67 {
   background: #fff;
   border-radius: 4px;
   padding: 4px;
 }
 
-.emotion-65 {
+.emotion-68 {
   -webkit-column-gap: 8px;
   column-gap: 8px;
   display: grid;
   grid-template-columns: repeat(auto-fit, 32px);
 }
 
-.emotion-65>div {
+.emotion-68>div {
   -webkit-column-gap: 4px;
   column-gap: 4px;
 }
 
-.emotion-65 .disabled {
+.emotion-68 .disabled {
   opacity: 0.1;
 }
 
-.emotion-70 {
+.emotion-73 {
   position: fixed;
   display: grid;
   bottom: 0;
@@ -1277,16 +1271,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
           </a>
         </div>
         <form
+          class="emotion-4"
           novalidate=""
         >
           <div
-            class="MuiFormControl-root MuiTextField-root emotion-4"
+            class="MuiFormControl-root MuiTextField-root emotion-5"
           >
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart emotion-5"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart emotion-6"
             >
               <div
-                class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-standard MuiInputAdornment-sizeSmall emotion-6"
+                class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall emotion-7"
               >
                 <span
                   aria-hidden="true"
@@ -1296,7 +1291,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                 </span>
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeSmall emotion-7"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeSmall emotion-8"
                   data-testid="SearchIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1308,13 +1303,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </div>
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart emotion-8"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart emotion-9"
                 id=":rp:"
                 name="search"
                 placeholder="Search devices"
                 type="text"
                 value=""
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-10"
+              >
+                <legend
+                  class="emotion-11"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="notranslate"
+                  >
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
             </div>
           </div>
           <input
@@ -1338,7 +1348,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </span>
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-12"
                 data-testid="DeveloperBoardIcon"
                 focusable="false"
                 style="margin: 0px 7px 0px 10px; font-size: 20px;"
@@ -1368,7 +1378,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
             </span>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium flip-horizontal emotion-10"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium flip-horizontal emotion-13"
               data-testid="RefreshIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1379,17 +1389,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
             </svg>
           </a>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-11"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-14"
             id=":rr:"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-12"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-15"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-13"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-16"
                 data-testid="AccountCircleIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1405,88 +1415,88 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
       </div>
     </div>
     <div
-      class="leftFixed leftNav emotion-14"
+      class="leftFixed leftNav emotion-17"
     >
       <ul
-        class="MuiList-root MuiList-padding emotion-15"
+        class="MuiList-root MuiList-padding emotion-18"
         style="padding: 0px;"
       >
         <a
           aria-current="page"
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16 active"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-19 active"
           data-discover="true"
           href="/"
         >
           <div
-            class="MuiListItemText-root emotion-17"
+            class="MuiListItemText-root emotion-20"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-21"
             >
               Dashboard
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-19"
           data-discover="true"
           href="/devices"
         >
           <div
-            class="MuiListItemText-root emotion-17"
+            class="MuiListItemText-root emotion-20"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-21"
             >
               Devices
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-19"
           data-discover="true"
           href="/releases"
         >
           <div
-            class="MuiListItemText-root emotion-17"
+            class="MuiListItemText-root emotion-20"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-21"
             >
               Releases
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-19"
           data-discover="true"
           href="/deployments"
         >
           <div
-            class="MuiListItemText-root emotion-17"
+            class="MuiListItemText-root emotion-20"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-21"
             >
               Deployments
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-19"
           data-discover="true"
           href="/auditlog"
         >
           <div
-            class="MuiListItemText-root emotion-17"
+            class="MuiListItemText-root emotion-20"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-21"
             >
               Audit log
             </span>
@@ -1494,31 +1504,31 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
         </a>
       </ul>
       <ul
-        class="MuiList-root MuiList-padding emotion-31"
+        class="MuiList-root MuiList-padding emotion-34"
       >
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-32"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-35"
           data-discover="true"
           href="/help"
         >
           <div
-            class="MuiListItemText-root emotion-17"
+            class="MuiListItemText-root emotion-20"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-21"
             >
               Help & support
             </span>
           </div>
         </a>
         <li
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-32"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-35"
         >
           <div
-            class="MuiListItemText-root MuiListItemText-multiline emotion-36"
+            class="MuiListItemText-root MuiListItemText-multiline emotion-39"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-21"
             >
               <div
                 class="clickable slightly-smaller"
@@ -1528,10 +1538,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </div>
             </span>
             <p
-              class="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary emotion-38"
+              class="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary emotion-41"
             >
               <a
-                class="emotion-39"
+                class="emotion-42"
                 href="https://docs.mender.io/development/release-information/open-source-licenses"
                 rel=""
                 target="_blank"
@@ -1552,11 +1562,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
         Dashboard
       </h4>
       <div
-        class="emotion-40"
+        class="emotion-43"
         style=""
       >
         <div
-          class="emotion-41"
+          class="emotion-44"
         >
           <div
             class="dashboard"
@@ -1573,7 +1583,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                   Accepted devices 
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium margin-left-small green emotion-9"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium margin-left-small green emotion-12"
                     data-testid="CheckCircleIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -1598,14 +1608,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               class="relative"
             >
               <a
-                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary absolute emotion-43"
+                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary absolute emotion-46"
                 data-discover="true"
                 href="/devices/pending"
                 tabindex="0"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-12"
                   data-testid="AddIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1657,7 +1667,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               class="widget"
             >
               <div
-                class="flexbox center-aligned  emotion-45"
+                class="flexbox center-aligned  emotion-48"
                 style="align-items: end;"
               >
                 <div
@@ -1665,10 +1675,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                   data-mui-internal-clone-element="true"
                 >
                   <div
-                    class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault emotion-46"
+                    class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault emotion-49"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium emotion-47"
+                      class="MuiChip-label MuiChip-labelMedium emotion-50"
                     >
                       Enterprise
                     </span>
@@ -1683,7 +1693,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-48"
+                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-51"
                       data-testid="HelpIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -1693,17 +1703,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                       />
                     </svg>
                     <div
-                      class="emotion-49 "
+                      class="emotion-52 "
                     />
                   </div>
                 </div>
               </div>
               <div
-                class="flexbox centered muted emotion-50"
+                class="flexbox centered muted emotion-53"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-12"
                   data-testid="AddIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1713,7 +1723,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                   />
                 </svg>
                 <span
-                  class="emotion-50"
+                  class="emotion-53"
                 >
                   add a widget
                 </span>
@@ -1722,7 +1732,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
           </div>
         </div>
         <div
-          class="emotion-53 deployments"
+          class="emotion-56 deployments"
         >
           <div
             class="dashboard flexbox column"
@@ -1739,7 +1749,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               Pending
             </h5>
             <div
-              class="clickable emotion-54"
+              class="clickable emotion-57"
             >
               <div>
                 <div>
@@ -1757,7 +1767,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-55"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-58"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -1773,7 +1783,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </div>
             </div>
             <div
-              class="clickable emotion-54"
+              class="clickable emotion-57"
             >
               <div>
                 <div>
@@ -1791,7 +1801,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-55"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-58"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -1812,7 +1822,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               In Progress
             </h5>
             <div
-              class="clickable emotion-54"
+              class="clickable emotion-57"
             >
               <div>
                 <div>
@@ -1826,7 +1836,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                 </div>
               </div>
               <div
-                class="relative emotion-59 minimal "
+                class="relative emotion-62 minimal "
               >
                 <div
                   class="chart-container"
@@ -1867,7 +1877,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </div>
             </div>
             <div
-              class="clickable emotion-54"
+              class="clickable emotion-57"
             >
               <div>
                 <div>
@@ -1885,7 +1895,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-55"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-58"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -1906,7 +1916,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               Finished
             </h5>
             <div
-              class="emotion-62"
+              class="emotion-65"
             >
               <time
                 class="muted slightly-smaller"
@@ -1915,7 +1925,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                 2019-01-13 13:30
               </time>
               <div
-                class="clickable emotion-54"
+                class="clickable emotion-57"
               >
                 <div>
                   <div>
@@ -1929,10 +1939,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                   </div>
                 </div>
                 <div
-                  class="emotion-64"
+                  class="emotion-67"
                 >
                   <div
-                    class="flexbox emotion-65 "
+                    class="flexbox emotion-68 "
                   >
                     <div
                       aria-label="Skipped"
@@ -2009,7 +2019,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </div>
             </div>
             <div
-              class="emotion-62"
+              class="emotion-65"
             >
               <time
                 class="muted slightly-smaller"
@@ -2018,7 +2028,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                 2019-01-13 13:30
               </time>
               <div
-                class="clickable emotion-54"
+                class="clickable emotion-57"
               >
                 <div>
                   <div>
@@ -2032,10 +2042,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
                   </div>
                 </div>
                 <div
-                  class="emotion-64"
+                  class="emotion-67"
                 >
                   <div
-                    class="flexbox emotion-65 "
+                    class="flexbox emotion-68 "
                   >
                     <div
                       aria-label="Skipped"
@@ -2124,7 +2134,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
     </div>
   </div>
   <div
-    class="emotion-70"
+    class="emotion-73"
   />
 </div>
 `;
@@ -2174,6 +2184,12 @@ exports[`App Component renders correctly 1`] = `
 }
 
 .emotion-1 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+.emotion-2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2187,15 +2203,13 @@ exports[`App Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
 }
 
-.emotion-1 input {
-  font-size: 13px;
-}
-
-.emotion-2 {
+.emotion-3 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -2213,87 +2227,42 @@ exports[`App Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-left: 14px;
 }
 
-.emotion-2.Mui-disabled {
+.emotion-3.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-2 {
-  margin-top: 16px;
-}
-
-.emotion-2::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-2.Mui-error::before,
-.emotion-2.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-2::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-2.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-2::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-2:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-2:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-2:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-3 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2308,7 +2277,7 @@ label+.emotion-2 {
   margin-right: 8px;
 }
 
-.emotion-4 {
+.emotion-5 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2326,11 +2295,11 @@ label+.emotion-2 {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-4 iconButton {
+.emotion-5 iconButton {
   margin-right: 8px;
 }
 
-.emotion-5 {
+.emotion-6 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -2349,78 +2318,113 @@ label+.emotion-2 {
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
   padding-top: 1px;
+  padding: 16.5px 14px;
+  padding: 8.5px 14px;
+  padding-left: 0;
 }
 
-.emotion-5::-webkit-input-placeholder {
+.emotion-6::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-5::-moz-placeholder {
+.emotion-6::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-5::-ms-input-placeholder {
+.emotion-6::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-5:focus {
+.emotion-6:focus {
   outline: 0;
 }
 
-.emotion-5:invalid {
+.emotion-6:invalid {
   box-shadow: none;
 }
 
-.emotion-5::-webkit-search-decoration {
+.emotion-6::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-5::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-6::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-5::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-6::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-5::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-6::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-5.Mui-disabled {
+.emotion-6.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-5:-webkit-autofill {
+.emotion-6:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-6 {
+.emotion-6:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-7 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-8 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-9 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2437,11 +2441,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-6 iconButton {
+.emotion-9 iconButton {
   margin-right: 8px;
 }
 
-.emotion-7 {
+.emotion-10 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2462,11 +2466,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   font-size: 20px;
 }
 
-.emotion-7 iconButton {
+.emotion-10 iconButton {
   margin-right: 8px;
 }
 
-.emotion-8 {
+.emotion-11 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2528,33 +2532,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   text-transform: none;
 }
 
-.emotion-8::-moz-focus-inner {
+.emotion-11::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-11.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-8 {
+  .emotion-11 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-8:hover {
+.emotion-11:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-11.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-8:hover {
+  .emotion-11:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -2562,34 +2566,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   }
 }
 
-.emotion-8.MuiButton-loading {
+.emotion-11.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-8:hover {
+.emotion-11:hover {
   colors: #337a87;
 }
 
-.emotion-8.MuiButton-text {
+.emotion-11.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-8 .MuiMenuItem-root:hover,
-.emotion-8 .MuiListItemText-root:hover {
+.emotion-11 .MuiMenuItem-root:hover,
+.emotion-11 .MuiListItemText-root:hover {
   color: #679ba5;
 }
 
-.emotion-9 {
+.emotion-12 {
   display: inherit;
   margin-right: 8px;
   margin-left: -4px;
 }
 
-.emotion-9>*:nth-of-type(1) {
+.emotion-12>*:nth-of-type(1) {
   font-size: 20px;
 }
 
-.emotion-10 {
+.emotion-13 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2607,16 +2611,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   color: #cfcfcf;
 }
 
-.emotion-10 iconButton {
+.emotion-13 iconButton {
   margin-right: 8px;
 }
 
-.emotion-11 {
+.emotion-14 {
   background-color: #f7f7f7;
   border-right: 1px solid #e6f2f1;
 }
 
-.emotion-12 {
+.emotion-15 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2625,7 +2629,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   padding-bottom: 8px;
 }
 
-.emotion-13 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2653,25 +2657,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   padding: 22px 16px 22px 42px;
 }
 
-.emotion-13.undefined {
+.emotion-16.undefined {
   opacity: 1;
 }
 
-.emotion-13.active {
+.emotion-16.active {
   background-color: #fff;
 }
 
-.emotion-13.leftNav.active {
+.emotion-16.leftNav.active {
   border-top: 1px solid #d4e9e7;
   border-bottom: 1px solid #d4e9e7;
 }
 
-.emotion-13.navLink,
-.emotion-13.navLink .MuiListItemText-root {
+.emotion-16.navLink,
+.emotion-16.navLink .MuiListItemText-root {
   color: #969696;
 }
 
-.emotion-14 {
+.emotion-17 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -2683,15 +2687,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   color: rgba(10, 10, 11, 0.78);
 }
 
-.MuiTypography-root:where(.emotion-14 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-17 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-14 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-17 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-15 {
+.emotion-18 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -2699,7 +2703,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   font-size: 0.9286rem;
 }
 
-.emotion-28 {
+.emotion-31 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -2713,7 +2717,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   right: 0;
 }
 
-.emotion-29 {
+.emotion-32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2741,25 +2745,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   padding: 16px 16px 16px 42px;
 }
 
-.emotion-29.undefined {
+.emotion-32.undefined {
   opacity: 1;
 }
 
-.emotion-29.active {
+.emotion-32.active {
   background-color: #fff;
 }
 
-.emotion-29.leftNav.active {
+.emotion-32.leftNav.active {
   border-top: 1px solid #d4e9e7;
   border-bottom: 1px solid #d4e9e7;
 }
 
-.emotion-29.navLink,
-.emotion-29.navLink .MuiListItemText-root {
+.emotion-32.navLink,
+.emotion-32.navLink .MuiListItemText-root {
   color: #969696;
 }
 
-.emotion-33 {
+.emotion-36 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -2773,15 +2777,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   color: rgba(10, 10, 11, 0.78);
 }
 
-.MuiTypography-root:where(.emotion-33 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-36 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-33 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-36 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-35 {
+.emotion-38 {
   margin: 0;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -2790,14 +2794,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-36 {
+.emotion-39 {
   font-size: 13px;
   position: relative;
   top: 6px;
   color: #337a87;
 }
 
-.emotion-37 {
+.emotion-40 {
   -webkit-column-gap: 48px;
   column-gap: 48px;
   display: -webkit-box;
@@ -2811,7 +2815,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin-bottom: 48px;
 }
 
-.emotion-38 {
+.emotion-41 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -2832,12 +2836,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
 }
 
 @media (min-width:1536px) {
-  .emotion-38 {
+  .emotion-41 {
     min-width: 50vw;
   }
 }
 
-.emotion-40 {
+.emotion-43 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2894,63 +2898,63 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   z-index: 1;
 }
 
-.emotion-40::-moz-focus-inner {
+.emotion-43::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-40.Mui-disabled {
+.emotion-43.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-40 {
+  .emotion-43 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-40:active {
+.emotion-43:active {
   box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
 }
 
-.emotion-40:hover {
+.emotion-43:hover {
   background-color: #f5f5f5;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover: none) {
-  .emotion-40:hover {
+  .emotion-43:hover {
     background-color: #e6f2f1;
   }
 }
 
-.emotion-40.Mui-focusVisible {
+.emotion-43.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-40:hover {
+.emotion-43:hover {
   background-color: rgb(35, 85, 94);
 }
 
 @media (hover: none) {
-  .emotion-40:hover {
+  .emotion-43:hover {
     background-color: #337a87;
   }
 }
 
-.emotion-40.Mui-disabled {
+.emotion-43.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-42 {
+.emotion-45 {
   gap: 16px;
 }
 
-.emotion-43 {
+.emotion-46 {
   max-width: 100%;
   font-family: Lato,sans-serif;
   font-size: 0.7545rem;
@@ -2989,12 +2993,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   text-transform: uppercase;
 }
 
-.emotion-43.Mui-disabled {
+.emotion-46.Mui-disabled {
   opacity: 0.38;
   pointer-events: none;
 }
 
-.emotion-43 .MuiChip-avatar {
+.emotion-46 .MuiChip-avatar {
   margin-left: 5px;
   margin-right: -6px;
   width: 24px;
@@ -3003,17 +3007,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   font-size: 0.6964rem;
 }
 
-.emotion-43 .MuiChip-avatarColorPrimary {
+.emotion-46 .MuiChip-avatarColorPrimary {
   color: #fff;
   background-color: rgb(35, 85, 94);
 }
 
-.emotion-43 .MuiChip-avatarColorSecondary {
+.emotion-46 .MuiChip-avatarColorSecondary {
   color: #fff;
   background-color: rgb(65, 10, 46);
 }
 
-.emotion-43 .MuiChip-avatarSmall {
+.emotion-46 .MuiChip-avatarSmall {
   margin-left: 4px;
   margin-right: -4px;
   width: 18px;
@@ -3021,12 +3025,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   font-size: 0.5804rem;
 }
 
-.emotion-43 .MuiChip-icon {
+.emotion-46 .MuiChip-icon {
   margin-left: 5px;
   margin-right: -6px;
 }
 
-.emotion-43 .MuiChip-deleteIcon {
+.emotion-46 .MuiChip-deleteIcon {
   -webkit-tap-highlight-color: transparent;
   color: rgba(10, 10, 11, 0.26);
   font-size: 22px;
@@ -3034,23 +3038,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin: 0 5px 0 -6px;
 }
 
-.emotion-43 .MuiChip-deleteIcon:hover {
+.emotion-46 .MuiChip-deleteIcon:hover {
   color: rgba(10, 10, 11, 0.4);
 }
 
-.emotion-43 .MuiChip-icon {
+.emotion-46 .MuiChip-icon {
   color: #bcbcbc;
 }
 
-.emotion-43:hover {
+.emotion-46:hover {
   font-weight: bold;
 }
 
-.emotion-43:hover {
+.emotion-46:hover {
   font-weight: bold;
 }
 
-.emotion-44 {
+.emotion-47 {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 12px;
@@ -3058,7 +3062,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   white-space: nowrap;
 }
 
-.emotion-45 {
+.emotion-48 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3076,15 +3080,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   color: #337a87;
 }
 
-.emotion-45 iconButton {
+.emotion-48 iconButton {
   margin-right: 8px;
 }
 
-.emotion-45.read {
+.emotion-48.read {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-46 {
+.emotion-49 {
   position: absolute;
   top: -5px;
   bottom: 0;
@@ -3094,16 +3098,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-46.read {
+.emotion-49.read {
   border-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-47 {
+.emotion-50 {
   font-size: 1rem;
   cursor: pointer;
 }
 
-.emotion-50 {
+.emotion-53 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3114,23 +3118,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   padding-top: 0;
 }
 
-.emotion-50 .deployments .dashboard>h4 {
+.emotion-53 .deployments .dashboard>h4 {
   margin-top: 48px;
 }
 
-.emotion-50 .deployments .dashboard>h4.margin-top-none {
+.emotion-53 .deployments .dashboard>h4.margin-top-none {
   margin-top: 0;
 }
 
 @media (min-width:1536px) {
-  .emotion-50 {
+  .emotion-53 {
     border-left: 1px solid #e9e9e9;
     margin-top: -16px;
     padding-left: 48px;
     padding-top: 16px;
   }
 
-  .emotion-50 .deployments .dashboard>h4 {
+  .emotion-53 .deployments .dashboard>h4 {
     margin-top: 0;
   }
 }
@@ -3159,16 +3163,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
           </a>
         </div>
         <form
+          class="emotion-1"
           novalidate=""
         >
           <div
-            class="MuiFormControl-root MuiTextField-root emotion-1"
+            class="MuiFormControl-root MuiTextField-root emotion-2"
           >
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart emotion-2"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart emotion-3"
             >
               <div
-                class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-standard MuiInputAdornment-sizeSmall emotion-3"
+                class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall emotion-4"
               >
                 <span
                   aria-hidden="true"
@@ -3178,7 +3183,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
                 </span>
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeSmall emotion-4"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeSmall emotion-5"
                   data-testid="SearchIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -3190,13 +3195,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
               </div>
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart emotion-5"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart emotion-6"
                 id=":r0:"
                 name="search"
                 placeholder="Search devices"
                 type="text"
                 value=""
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-7"
+              >
+                <legend
+                  class="emotion-8"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="notranslate"
+                  >
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
             </div>
           </div>
           <input
@@ -3226,7 +3246,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
               </span>
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
                 data-testid="DeveloperBoardIcon"
                 focusable="false"
                 style="margin: 0px 7px 0px 10px; font-size: 20px;"
@@ -3255,7 +3275,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
             </span>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium flip-horizontal emotion-7"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium flip-horizontal emotion-10"
               data-testid="RefreshIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -3266,17 +3286,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
             </svg>
           </a>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-8"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-11"
             id=":r2:"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-9"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-12"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-10"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-13"
                 data-testid="AccountCircleIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -3292,88 +3312,88 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
       </div>
     </div>
     <div
-      class="leftFixed leftNav emotion-11"
+      class="leftFixed leftNav emotion-14"
     >
       <ul
-        class="MuiList-root MuiList-padding emotion-12"
+        class="MuiList-root MuiList-padding emotion-15"
         style="padding: 0px;"
       >
         <a
           aria-current="page"
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-13 active"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16 active"
           data-discover="true"
           href="/"
         >
           <div
-            class="MuiListItemText-root emotion-14"
+            class="MuiListItemText-root emotion-17"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-15"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
             >
               Dashboard
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-13"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16"
           data-discover="true"
           href="/devices"
         >
           <div
-            class="MuiListItemText-root emotion-14"
+            class="MuiListItemText-root emotion-17"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-15"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
             >
               Devices
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-13"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16"
           data-discover="true"
           href="/releases"
         >
           <div
-            class="MuiListItemText-root emotion-14"
+            class="MuiListItemText-root emotion-17"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-15"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
             >
               Releases
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-13"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16"
           data-discover="true"
           href="/deployments"
         >
           <div
-            class="MuiListItemText-root emotion-14"
+            class="MuiListItemText-root emotion-17"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-15"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
             >
               Deployments
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-13"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-16"
           data-discover="true"
           href="/auditlog"
         >
           <div
-            class="MuiListItemText-root emotion-14"
+            class="MuiListItemText-root emotion-17"
             style="text-transform: uppercase;"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-15"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
             >
               Audit log
             </span>
@@ -3381,31 +3401,31 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
         </a>
       </ul>
       <ul
-        class="MuiList-root MuiList-padding emotion-28"
+        class="MuiList-root MuiList-padding emotion-31"
       >
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-29"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-32"
           data-discover="true"
           href="/help"
         >
           <div
-            class="MuiListItemText-root emotion-14"
+            class="MuiListItemText-root emotion-17"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-15"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
             >
               Help & support
             </span>
           </div>
         </a>
         <li
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-29"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-32"
         >
           <div
-            class="MuiListItemText-root MuiListItemText-multiline emotion-33"
+            class="MuiListItemText-root MuiListItemText-multiline emotion-36"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-15"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-18"
             >
               <div
                 class="clickable slightly-smaller"
@@ -3415,10 +3435,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
               </div>
             </span>
             <p
-              class="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary emotion-35"
+              class="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary emotion-38"
             >
               <a
-                class="emotion-36"
+                class="emotion-39"
                 href="https://docs.mender.io/development/release-information/open-source-licenses"
                 rel=""
                 target="_blank"
@@ -3439,10 +3459,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
         Dashboard
       </h4>
       <div
-        class="emotion-37"
+        class="emotion-40"
       >
         <div
-          class="emotion-38"
+          class="emotion-41"
         >
           <div
             class="dashboard"
@@ -3459,7 +3479,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
                   Accepted devices 
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium margin-left-small green emotion-6"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium margin-left-small green emotion-9"
                     data-testid="CheckCircleIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3484,14 +3504,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
               class="relative"
             >
               <a
-                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary absolute emotion-40"
+                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary absolute emotion-43"
                 data-discover="true"
                 href="/devices/pending"
                 tabindex="0"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
                   data-testid="AddIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -3543,7 +3563,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
               class="widget"
             >
               <div
-                class="flexbox center-aligned  emotion-42"
+                class="flexbox center-aligned  emotion-45"
                 style="align-items: end;"
               >
                 <div
@@ -3551,10 +3571,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
                   data-mui-internal-clone-element="true"
                 >
                   <div
-                    class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault emotion-43"
+                    class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault emotion-46"
                   >
                     <span
-                      class="MuiChip-label MuiChip-labelMedium emotion-44"
+                      class="MuiChip-label MuiChip-labelMedium emotion-47"
                     >
                       Enterprise
                     </span>
@@ -3569,7 +3589,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-45"
+                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-48"
                       data-testid="HelpIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -3579,17 +3599,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
                       />
                     </svg>
                     <div
-                      class="emotion-46 "
+                      class="emotion-49 "
                     />
                   </div>
                 </div>
               </div>
               <div
-                class="flexbox centered muted emotion-47"
+                class="flexbox centered muted emotion-50"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
                   data-testid="AddIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -3599,7 +3619,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
                   />
                 </svg>
                 <span
-                  class="emotion-47"
+                  class="emotion-50"
                 >
                   add a widget
                 </span>
@@ -3608,7 +3628,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
           </div>
         </div>
         <div
-          class="emotion-50 deployments"
+          class="emotion-53 deployments"
         >
           <div
             class="dashboard flexbox column"
diff --git a/frontend/src/js/components/auditlogs/EventDetailsDrawer.tsx b/frontend/src/js/components/auditlogs/EventDetailsDrawer.tsx
index 80b8ef81..3e54e985 100644
--- a/frontend/src/js/components/auditlogs/EventDetailsDrawer.tsx
+++ b/frontend/src/js/components/auditlogs/EventDetailsDrawer.tsx
@@ -14,19 +14,17 @@
 import React from 'react';
 
 import { Divider, Drawer } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
 
 import { DrawerTitle } from '@northern.tech/common-ui/DrawerTitle';
 
 export const EventDetailsDrawer = ({ eventItem = {}, onClose, open, mapChangeToContent, fallbackComponent }) => {
-  const theme = useTheme();
   const { title, content: Component } = mapChangeToContent(eventItem, fallbackComponent);
   return (
     <Drawer className={`${open ? 'fadeIn' : 'fadeOut'}`} anchor="right" open={open} onClose={onClose}>
       <DrawerTitle title={<div className="capitalized-start">{title}</div>} onClose={onClose} />
       <Divider />
       <Component item={eventItem} onClose={onClose} />
-      <Divider light style={{ marginTop: theme.spacing(2) }} />
+      <Divider className="margin-top-small" />
     </Drawer>
   );
 };
diff --git a/frontend/src/js/components/auditlogs/__snapshots__/Auditlogs.test.tsx.snap b/frontend/src/js/components/auditlogs/__snapshots__/Auditlogs.test.tsx.snap
index b64ca0ec..20b2f537 100644
--- a/frontend/src/js/components/auditlogs/__snapshots__/Auditlogs.test.tsx.snap
+++ b/frontend/src/js/components/auditlogs/__snapshots__/Auditlogs.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
           class="filter-item"
         >
           <h5
-            class="margin-top-small margin-bottom-none muted"
+            class="margin-top-small margin-bottom-small muted"
           >
             Performed by
           </h5>
@@ -53,10 +53,10 @@ exports[`Auditlogs Component renders correctly 1`] = `
             name="user"
           >
             <div
-              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1r6xt37-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1epaixk-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-14k9sz3-MuiInputBase-root-MuiInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-zy1o11-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-autocomplete="list"
@@ -64,7 +64,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
                   aria-invalid="false"
                   autocapitalize="none"
                   autocomplete="off"
-                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1sx234l-MuiInputBase-input-MuiInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1dune0f-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r1:"
                   placeholder="Select a user"
                   role="combobox"
@@ -99,6 +99,21 @@ exports[`Auditlogs Component renders correctly 1`] = `
                     </svg>
                   </button>
                 </div>
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-w4cd9x"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="notranslate"
+                    >
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
           </div>
@@ -107,7 +122,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
           class="filter-item"
         >
           <h5
-            class="margin-top-small margin-bottom-none muted"
+            class="margin-top-small margin-bottom-small muted"
           >
             Filter by changes
           </h5>
@@ -116,10 +131,10 @@ exports[`Auditlogs Component renders correctly 1`] = `
             name="type"
           >
             <div
-              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1r6xt37-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1epaixk-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-14k9sz3-MuiInputBase-root-MuiInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-zy1o11-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-autocomplete="list"
@@ -127,7 +142,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
                   aria-invalid="false"
                   autocapitalize="none"
                   autocomplete="off"
-                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1sx234l-MuiInputBase-input-MuiInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1dune0f-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r4:"
                   placeholder="Type"
                   role="combobox"
@@ -162,6 +177,21 @@ exports[`Auditlogs Component renders correctly 1`] = `
                     </svg>
                   </button>
                 </div>
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-w4cd9x"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="notranslate"
+                    >
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
           </div>
@@ -170,17 +200,17 @@ exports[`Auditlogs Component renders correctly 1`] = `
           class="filter-item"
         >
           <h5
-            class="margin-top-small margin-bottom-none muted"
+            class="margin-top-small margin-bottom-small muted"
           />
           <div
             class="MuiAutocomplete-root css-1tlcqt-MuiAutocomplete-root"
             name="detail"
           >
             <div
-              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1r6xt37-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1epaixk-MuiFormControl-root-MuiTextField-root"
             >
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot css-14k9sz3-MuiInputBase-root-MuiInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot css-1qhngy1-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-autocomplete="list"
@@ -188,7 +218,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
                   aria-invalid="false"
                   autocapitalize="none"
                   autocomplete="off"
-                  class="MuiInputBase-input MuiInput-input Mui-disabled MuiAutocomplete-input MuiAutocomplete-inputFocused css-1sx234l-MuiInputBase-input-MuiInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiAutocomplete-input MuiAutocomplete-inputFocused css-16wblaj-MuiInputBase-input-MuiOutlinedInput-input"
                   disabled=""
                   id=":r7:"
                   placeholder="-"
@@ -197,6 +227,21 @@ exports[`Auditlogs Component renders correctly 1`] = `
                   type="text"
                   value=""
                 />
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-w4cd9x"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="notranslate"
+                    >
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
           </div>
@@ -205,7 +250,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
           class="filter-item"
         >
           <h5
-            class="margin-top-small margin-bottom-none muted"
+            class="margin-top-small margin-bottom-small muted"
           >
             Start time
           </h5>
@@ -214,10 +259,10 @@ exports[`Auditlogs Component renders correctly 1`] = `
             style="flex-wrap: wrap; gap: 15px;"
           >
             <div
-              class="MuiFormControl-root MuiTextField-root css-vmb3sd-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiTextField-root css-1vx5ov0-MuiFormControl-root-MuiTextField-root"
             >
               <label
-                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard css-14i99uh-MuiFormLabel-root-MuiInputLabel-root"
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-11fencw-MuiFormLabel-root-MuiInputLabel-root"
                 data-shrink="true"
                 for=":r9:"
                 id=":r9:-label"
@@ -225,12 +270,12 @@ exports[`Auditlogs Component renders correctly 1`] = `
                 From
               </label>
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-195or1n-MuiInputBase-root-MuiInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-1qo6i3u-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
                   autocomplete="off"
-                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1sx234l-MuiInputBase-input-MuiInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-1dune0f-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":r9:"
                   inputmode="text"
                   placeholder="MMMM DD"
@@ -238,7 +283,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
                   value="January 13th"
                 />
                 <div
-                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium css-elo8k2-MuiInputAdornment-root"
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-elo8k2-MuiInputAdornment-root"
                 >
                   <button
                     aria-label="Choose date, selected date is Jan 13, 2019"
@@ -263,13 +308,25 @@ exports[`Auditlogs Component renders correctly 1`] = `
                     </svg>
                   </button>
                 </div>
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-w1u3ce"
+                  >
+                    <span>
+                      From
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
             <div
-              class="MuiFormControl-root MuiTextField-root css-vmb3sd-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiTextField-root css-1vx5ov0-MuiFormControl-root-MuiTextField-root"
             >
               <label
-                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard css-14i99uh-MuiFormLabel-root-MuiInputLabel-root"
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-11fencw-MuiFormLabel-root-MuiInputLabel-root"
                 data-shrink="true"
                 for=":rc:"
                 id=":rc:-label"
@@ -277,12 +334,12 @@ exports[`Auditlogs Component renders correctly 1`] = `
                 To
               </label>
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-195or1n-MuiInputBase-root-MuiInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-1qo6i3u-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <input
                   aria-invalid="false"
                   autocomplete="off"
-                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1sx234l-MuiInputBase-input-MuiInput-input"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-1dune0f-MuiInputBase-input-MuiOutlinedInput-input"
                   id=":rc:"
                   inputmode="text"
                   placeholder="MMMM DD"
@@ -290,7 +347,7 @@ exports[`Auditlogs Component renders correctly 1`] = `
                   value="January 13th"
                 />
                 <div
-                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium css-elo8k2-MuiInputAdornment-root"
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-elo8k2-MuiInputAdornment-root"
                 >
                   <button
                     aria-label="Choose date, selected date is Jan 13, 2019"
@@ -315,6 +372,18 @@ exports[`Auditlogs Component renders correctly 1`] = `
                     </svg>
                   </button>
                 </div>
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="css-w1u3ce"
+                  >
+                    <span>
+                      To
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
           </div>
diff --git a/frontend/src/js/components/auditlogs/__snapshots__/EventDetailsDrawer.test.tsx.snap b/frontend/src/js/components/auditlogs/__snapshots__/EventDetailsDrawer.test.tsx.snap
index 3aa54d3f..26f03380 100644
--- a/frontend/src/js/components/auditlogs/__snapshots__/EventDetailsDrawer.test.tsx.snap
+++ b/frontend/src/js/components/auditlogs/__snapshots__/EventDetailsDrawer.test.tsx.snap
@@ -167,18 +167,6 @@ exports[`EventDetailsDrawer Component renders correctly 1`] = `
   background-color: #f7f7f7;
 }
 
-.emotion-6 {
-  margin: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  border-width: 0;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-bottom-width: thin;
-  border-color: rgba(0, 0, 0, 0.08);
-}
-
 <div
   class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper MuiDrawer-paperAnchorRight emotion-0"
   style="--Paper-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12);"
@@ -236,8 +224,7 @@ exports[`EventDetailsDrawer Component renders correctly 1`] = `
     change1
   </div>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth MuiDivider-light emotion-6"
-    style="margin-top: 16px;"
+    class="MuiDivider-root MuiDivider-fullWidth margin-top-small emotion-4"
   />
 </div>
 `;
diff --git a/frontend/src/js/components/auditlogs/eventdetails/DeviceConfiguration.tsx b/frontend/src/js/components/auditlogs/eventdetails/DeviceConfiguration.tsx
index 50e0a547..dc4d2394 100644
--- a/frontend/src/js/components/auditlogs/eventdetails/DeviceConfiguration.tsx
+++ b/frontend/src/js/components/auditlogs/eventdetails/DeviceConfiguration.tsx
@@ -14,8 +14,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useTheme } from '@mui/material/styles';
-
 import Loader from '@northern.tech/common-ui/Loader';
 import { getAuditlogDevice, getIdAttribute, getUserCapabilities } from '@northern.tech/store/selectors';
 import { getDeviceById } from '@northern.tech/store/thunks';
@@ -29,7 +27,6 @@ export const DeviceConfiguration = ({ item, onClose }) => {
   const idAttribute = useSelector(getIdAttribute);
   const dispatch = useDispatch();
 
-  const theme = useTheme();
   useEffect(() => {
     if (canReadDevices) {
       dispatch(getDeviceById(object.id));
@@ -50,7 +47,7 @@ export const DeviceConfiguration = ({ item, onClose }) => {
   }
 
   return (
-    <div className="flexbox column" style={{ margin: theme.spacing(3), minWidth: 'min-content' }}>
+    <div className="flexbox column margin-small" style={{ minWidth: 'min-content' }}>
       {canReadDevices && <DeviceDetails device={device} idAttribute={idAttribute} onClose={onClose} />}
       <DetailInformation title="changed configuration" details={config} />
       <DetailInformation title="change" details={{ User: actor.email }} />
diff --git a/frontend/src/js/components/auditlogs/eventdetails/FileTransfer.tsx b/frontend/src/js/components/auditlogs/eventdetails/FileTransfer.tsx
index ab33804c..327a59c1 100644
--- a/frontend/src/js/components/auditlogs/eventdetails/FileTransfer.tsx
+++ b/frontend/src/js/components/auditlogs/eventdetails/FileTransfer.tsx
@@ -14,8 +14,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useTheme } from '@mui/material/styles';
-
 import Loader from '@northern.tech/common-ui/Loader';
 import { getAuditlogDevice, getIdAttribute, getUserCapabilities } from '@northern.tech/store/selectors';
 import { getDeviceById } from '@northern.tech/store/thunks';
@@ -32,7 +30,6 @@ export const FileTransfer = ({ item, onClose }) => {
   const device = useSelector(getAuditlogDevice);
   const { canReadDevices } = useSelector(getUserCapabilities);
   const idAttribute = useSelector(getIdAttribute);
-  const theme = useTheme();
 
   useEffect(() => {
     if (canReadDevices) {
@@ -50,7 +47,7 @@ export const FileTransfer = ({ item, onClose }) => {
   };
 
   return (
-    <div className="flexbox column" style={{ margin: theme.spacing(3), minWidth: 'min-content' }}>
+    <div className="flexbox column margin-small" style={{ minWidth: 'min-content' }}>
       {canReadDevices && <DeviceDetails device={device} idAttribute={idAttribute} onClose={onClose} />}
       <DetailInformation title="file transfer" details={sessionMeta} />
     </div>
diff --git a/frontend/src/js/components/auditlogs/eventdetails/PortForward.tsx b/frontend/src/js/components/auditlogs/eventdetails/PortForward.tsx
index 57913bdd..956f9e63 100644
--- a/frontend/src/js/components/auditlogs/eventdetails/PortForward.tsx
+++ b/frontend/src/js/components/auditlogs/eventdetails/PortForward.tsx
@@ -14,8 +14,6 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useTheme } from '@mui/material/styles';
-
 import Loader from '@northern.tech/common-ui/Loader';
 import Time from '@northern.tech/common-ui/Time';
 import { getAuditlogDevice, getIdAttribute, getUserCapabilities } from '@northern.tech/store/selectors';
@@ -28,7 +26,6 @@ import DeviceDetails, { DetailInformation } from './DeviceDetails';
 dayjs.extend(duration);
 
 export const PortForward = ({ item, onClose }) => {
-  const theme = useTheme();
   const [sessionDetails, setSessionDetails] = useState();
   const dispatch = useDispatch();
   const { action, actor, meta, object = {}, time } = item;
@@ -64,7 +61,7 @@ export const PortForward = ({ item, onClose }) => {
   };
 
   return (
-    <div className="flexbox column" style={{ margin: theme.spacing(3), minWidth: 'min-content' }}>
+    <div className="flexbox column margin-small" style={{ minWidth: 'min-content' }}>
       {canReadDevices && <DeviceDetails device={device} idAttribute={idAttribute} onClose={onClose} />}
       <DetailInformation title="port forwarding" details={sessionMeta} />
     </div>
diff --git a/frontend/src/js/components/auditlogs/eventdetails/TerminalSession.tsx b/frontend/src/js/components/auditlogs/eventdetails/TerminalSession.tsx
index 5253e478..fe03737e 100644
--- a/frontend/src/js/components/auditlogs/eventdetails/TerminalSession.tsx
+++ b/frontend/src/js/components/auditlogs/eventdetails/TerminalSession.tsx
@@ -14,8 +14,6 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useTheme } from '@mui/material/styles';
-
 import Loader from '@northern.tech/common-ui/Loader';
 import Time from '@northern.tech/common-ui/Time';
 import { getAuditlogDevice, getCurrentSession, getIdAttribute, getUserCapabilities } from '@northern.tech/store/selectors';
@@ -29,7 +27,6 @@ import TerminalPlayer from './TerminalPlayer';
 dayjs.extend(durationDayJs);
 
 export const TerminalSession = ({ item, onClose }) => {
-  const theme = useTheme();
   const [sessionDetails, setSessionDetails] = useState();
   const dispatch = useDispatch();
   const { action, actor, meta, object = {}, time } = item;
@@ -70,7 +67,7 @@ export const TerminalSession = ({ item, onClose }) => {
   return (
     <div className="flexbox" style={{ flexWrap: 'wrap' }}>
       <TerminalPlayer className="flexbox column margin-top" item={item} sessionInitialized={!!sessionDetails} token={token} />
-      <div className="flexbox column" style={{ margin: theme.spacing(3), minWidth: 'min-content' }}>
+      <div className="flexbox column margin-small" style={{ minWidth: 'min-content' }}>
         {canReadDevices && <DeviceDetails device={device} idAttribute={idAttribute} onClose={onClose} />}
         <DetailInformation title="session" details={sessionMeta} />
       </div>
diff --git a/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/DeviceConfiguration.test.tsx.snap b/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/DeviceConfiguration.test.tsx.snap
index 6567168e..e8b79267 100644
--- a/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/DeviceConfiguration.test.tsx.snap
+++ b/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/DeviceConfiguration.test.tsx.snap
@@ -44,8 +44,8 @@ exports[`DeviceConfiguration Component renders correctly 1`] = `
 }
 
 <div
-  class="flexbox column"
-  style="margin: 24px; min-width: min-content;"
+  class="flexbox column margin-small"
+  style="min-width: min-content;"
 >
   <div
     class="flexbox column margin-top-small"
diff --git a/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/FileTransfer.test.tsx.snap b/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/FileTransfer.test.tsx.snap
index 2975b352..25d0237d 100644
--- a/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/FileTransfer.test.tsx.snap
+++ b/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/FileTransfer.test.tsx.snap
@@ -44,8 +44,8 @@ exports[`FileTransfer Component renders correctly 1`] = `
 }
 
 <div
-  class="flexbox column"
-  style="margin: 24px; min-width: min-content;"
+  class="flexbox column margin-small"
+  style="min-width: min-content;"
 >
   <div
     class="flexbox column margin-top-small"
diff --git a/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/PortForward.test.tsx.snap b/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/PortForward.test.tsx.snap
index cf698a6b..497c71bc 100644
--- a/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/PortForward.test.tsx.snap
+++ b/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/PortForward.test.tsx.snap
@@ -44,8 +44,8 @@ exports[`PortForward Component renders correctly 1`] = `
 }
 
 <div
-  class="flexbox column"
-  style="margin: 24px; min-width: min-content;"
+  class="flexbox column margin-small"
+  style="min-width: min-content;"
 >
   <div
     class="flexbox column margin-top-small"
diff --git a/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/TerminalSession.test.tsx.snap b/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/TerminalSession.test.tsx.snap
index 1a70f1d0..e51b5e8f 100644
--- a/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/TerminalSession.test.tsx.snap
+++ b/frontend/src/js/components/auditlogs/eventdetails/__snapshots__/TerminalSession.test.tsx.snap
@@ -466,8 +466,8 @@ exports[`TerminalSession Component renders correctly 1`] = `
     </div>
   </div>
   <div
-    class="flexbox column"
-    style="margin: 24px; min-width: min-content;"
+    class="flexbox column margin-small"
+    style="min-width: min-content;"
   >
     <div
       class="flexbox column margin-top-small"
diff --git a/frontend/src/js/components/dashboard/widgets/ChartAddition.tsx b/frontend/src/js/components/dashboard/widgets/ChartAddition.tsx
index eb764e9d..1ed82adc 100644
--- a/frontend/src/js/components/dashboard/widgets/ChartAddition.tsx
+++ b/frontend/src/js/components/dashboard/widgets/ChartAddition.tsx
@@ -69,7 +69,7 @@ export const Header = ({ chartType }) => {
 const GroupSelect = ({ groups, selection, setSelection }) => (
   <FormControl className="margin-top-none">
     <InputLabel id="group-select-label">Device group</InputLabel>
-    <Select labelId="group-select-label" value={selection.group || true} onChange={e => setSelection({ group: e.target.value })}>
+    <Select labelId="group-select-label" label="Device group" value={selection.group || true} onChange={e => setSelection({ group: e.target.value })}>
       <MenuItem value={true}>
         <em>All Devices</em>
       </MenuItem>
@@ -88,8 +88,17 @@ const getIndentation = level => ({ paddingLeft: basePadding + level * themeSpaci
 
 const SoftwareSelect = ({ selection, setSelection, software }) => (
   <FormControl className="margin-top-none">
-    <InputLabel id="software-select-label">Software</InputLabel>
-    <Select labelId="software-select-label" value={selection.software} onBlur={undefined} onChange={e => setSelection({ software: e.target.value })}>
+    <InputLabel shrink id="software-select-label">
+      Software
+    </InputLabel>
+    <Select
+      labelId="software-select-label"
+      label="Software"
+      displayEmpty
+      value={selection.software}
+      onBlur={undefined}
+      onChange={e => setSelection({ software: e.target.value })}
+    >
       {software.map(({ subheader, title, value, nestingLevel }) =>
         subheader ? (
           <ListSubheader key={value} style={getIndentation(nestingLevel)}>
diff --git a/frontend/src/js/components/deployments/Deployments.test.tsx b/frontend/src/js/components/deployments/Deployments.test.tsx
index 5b3c49f8..7a1c9646 100644
--- a/frontend/src/js/components/deployments/Deployments.test.tsx
+++ b/frontend/src/js/components/deployments/Deployments.test.tsx
@@ -187,10 +187,10 @@ describe('Deployments Component', () => {
     await user.keyboard(specialKeys.Enter);
 
     await user.click(screen.getByRole('button', { name: /advanced options/i }));
-    const accordion = screen.getByRole('checkbox', { name: /maximum number of devices/i }).parentElement.parentElement.parentElement;
     await user.click(screen.getByRole('checkbox', { name: /maximum number of devices/i }));
     await waitFor(() => rerender(ui));
-    const limitInput = within(accordion).getByPlaceholderText(/limit/i);
+    let accordion = screen.getByRole('checkbox', { name: /maximum number of devices/i }).parentElement.parentElement?.parentElement;
+    const limitInput = within(accordion).getByRole('textbox');
     await user.clear(limitInput);
     await user.type(limitInput, '123');
     const post = jest.spyOn(GeneralApi, 'post');
diff --git a/frontend/src/js/components/deployments/__snapshots__/CreateDeployment.test.tsx.snap b/frontend/src/js/components/deployments/__snapshots__/CreateDeployment.test.tsx.snap
index 7b00b090..1439fb21 100644
--- a/frontend/src/js/components/deployments/__snapshots__/CreateDeployment.test.tsx.snap
+++ b/frontend/src/js/components/deployments/__snapshots__/CreateDeployment.test.tsx.snap
@@ -481,6 +481,7 @@ exports[`CreateDeployment Component smaller components renders DeviceLimit corre
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  margin-top: 16px;
   margin-left: calc(1em + 12px);
 }
 
@@ -505,7 +506,6 @@ exports[`CreateDeployment Component smaller components renders DeviceLimit corre
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -527,6 +527,7 @@ exports[`CreateDeployment Component smaller components renders DeviceLimit corre
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-18.Mui-disabled {
@@ -534,77 +535,30 @@ exports[`CreateDeployment Component smaller components renders DeviceLimit corre
   cursor: default;
 }
 
-label+.emotion-18 {
-  margin-top: 16px;
-}
-
-.emotion-18::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-18.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-18.Mui-error::before,
-.emotion-18.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-18::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-18:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-18:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-18:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-18:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-18.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-18::after {
-  border-bottom: 2px solid #337a87;
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-18:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-18.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-18:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-18:after {
-  border-bottom: 2px solid #337a87;
+.emotion-18.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-19 {
@@ -625,6 +579,7 @@ label+.emotion-18 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-19::-webkit-input-placeholder {
@@ -696,7 +651,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-19:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-20 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-21 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-22 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -707,13 +694,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-22.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-20.Mui-error {
+.emotion-22.Mui-error {
   color: #ab1000;
 }
 
@@ -829,19 +818,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
             class="MuiFormControl-root emotion-17"
           >
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
-              hint="0"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
             >
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input emotion-19"
-                placeholder="Limit"
+                class="MuiInputBase-input MuiOutlinedInput-input emotion-19"
+                placeholder="0"
                 type="text"
                 value="0"
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-20"
+              >
+                <legend
+                  class="emotion-21"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="notranslate"
+                  >
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <p
-              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-20"
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-22"
             />
           </div>
           devices have attempted to apply the update
@@ -1331,6 +1334,7 @@ exports[`CreateDeployment Component smaller components renders DeviceLimit corre
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  margin-top: 16px;
   margin-left: calc(1em + 12px);
 }
 
@@ -1355,7 +1359,6 @@ exports[`CreateDeployment Component smaller components renders DeviceLimit corre
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -1377,6 +1380,7 @@ exports[`CreateDeployment Component smaller components renders DeviceLimit corre
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-18.Mui-disabled {
@@ -1384,77 +1388,30 @@ exports[`CreateDeployment Component smaller components renders DeviceLimit corre
   cursor: default;
 }
 
-label+.emotion-18 {
-  margin-top: 16px;
-}
-
-.emotion-18::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-18.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-18.Mui-error::before,
-.emotion-18.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-18::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-18:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-18:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-18:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-18:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-18.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-18::after {
-  border-bottom: 2px solid #337a87;
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-18:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-18.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-18:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-18:after {
-  border-bottom: 2px solid #337a87;
+.emotion-18.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-19 {
@@ -1475,6 +1432,7 @@ label+.emotion-18 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-19::-webkit-input-placeholder {
@@ -1546,7 +1504,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-19:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-20 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-21 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-22 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1557,13 +1547,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-22.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-20.Mui-error {
+.emotion-22.Mui-error {
   color: #ab1000;
 }
 
@@ -1679,19 +1671,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
             class="MuiFormControl-root emotion-17"
           >
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
-              hint="0"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
             >
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input emotion-19"
-                placeholder="Limit"
+                class="MuiInputBase-input MuiOutlinedInput-input emotion-19"
+                placeholder="0"
                 type="text"
                 value="0"
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-20"
+              >
+                <legend
+                  class="emotion-21"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="notranslate"
+                  >
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <p
-              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-20"
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-22"
             />
           </div>
           devices have attempted to apply the update
@@ -1861,7 +1867,6 @@ exports[`CreateDeployment Component smaller components renders Devices correctly
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -1884,6 +1889,8 @@ exports[`CreateDeployment Component smaller components renders Devices correctly
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -1891,77 +1898,30 @@ exports[`CreateDeployment Component smaller components renders Devices correctly
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -1982,6 +1942,8 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -2053,6 +2015,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
   position: absolute;
   right: 0;
@@ -2182,9 +2148,37 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   margin-right: 8px;
 }
 
+.emotion-9 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-10 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <div>
   <h4
-    class="margin-bottom-none margin-top-none"
+    class="margin-top-none"
   >
     Select a device group to target
   </h4>
@@ -2199,7 +2193,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-2"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
           >
             <input
               aria-autocomplete="list"
@@ -2207,7 +2201,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
               id="deployment-device-group-selection"
               placeholder="Select a device group"
               role="combobox"
@@ -2242,6 +2236,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-9"
+            >
+              <legend
+                class="emotion-10"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -2409,7 +2418,6 @@ exports[`CreateDeployment Component smaller components renders Devices correctly
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -2432,6 +2440,8 @@ exports[`CreateDeployment Component smaller components renders Devices correctly
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -2439,77 +2449,30 @@ exports[`CreateDeployment Component smaller components renders Devices correctly
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -2530,6 +2493,8 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -2601,6 +2566,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
   position: absolute;
   right: 0;
@@ -2730,9 +2699,37 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   margin-right: 8px;
 }
 
+.emotion-9 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-10 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <div>
   <h4
-    class="margin-bottom-none margin-top-none"
+    class="margin-top-none"
   >
     Select a device group to target
   </h4>
@@ -2747,7 +2744,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-2"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
           >
             <input
               aria-autocomplete="list"
@@ -2755,7 +2752,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
               id="deployment-device-group-selection"
               placeholder="Select a device group"
               role="combobox"
@@ -2790,6 +2787,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-9"
+            >
+              <legend
+                class="emotion-10"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -3874,7 +3886,6 @@ exports[`CreateDeployment Component smaller components renders Retries correctly
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -4049,7 +4060,6 @@ exports[`CreateDeployment Component smaller components renders Retries correctly
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
   max-width: 150px;
   min-width: 130px;
@@ -4074,6 +4084,7 @@ exports[`CreateDeployment Component smaller components renders Retries correctly
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-14.Mui-disabled {
@@ -4081,77 +4092,30 @@ exports[`CreateDeployment Component smaller components renders Retries correctly
   cursor: default;
 }
 
-label+.emotion-14 {
-  margin-top: 16px;
-}
-
-.emotion-14::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-14.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-14.Mui-error::before,
-.emotion-14.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-14::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-14:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-14:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-14:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-14:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-14.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-14::after {
-  border-bottom: 2px solid #337a87;
+.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-14:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-14:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-14.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-14:after {
-  border-bottom: 2px solid #337a87;
+.emotion-14.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-15 {
@@ -4172,6 +4136,7 @@ label+.emotion-14 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-15::-webkit-input-placeholder {
@@ -4243,7 +4208,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-15:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-16 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-17 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4262,15 +4259,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   margin-bottom: -15px;
 }
 
-.emotion-16.Mui-disabled {
+.emotion-18.Mui-disabled {
   cursor: default;
 }
 
-.emotion-16 .MuiFormControlLabel-label.Mui-disabled {
+.emotion-18 .MuiFormControlLabel-label.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-17 {
+.emotion-19 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4309,42 +4306,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-17::-moz-focus-inner {
+.emotion-19::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-17.Mui-disabled {
+.emotion-19.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-17 {
+  .emotion-19 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-17:hover {
+.emotion-19:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-17.Mui-checked,
-.emotion-17.MuiCheckbox-indeterminate {
+.emotion-19.Mui-checked,
+.emotion-19.MuiCheckbox-indeterminate {
   color: #337a87;
 }
 
-.emotion-17.Mui-disabled {
+.emotion-19.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: none) {
-  .emotion-17:hover {
+  .emotion-19:hover {
     background-color: transparent;
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -4357,7 +4354,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   z-index: 1;
 }
 
-.emotion-19 {
+.emotion-21 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -4374,11 +4371,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   font-size: 1.3929rem;
 }
 
-.emotion-19 iconButton {
+.emotion-21 iconButton {
   margin-right: 8px;
 }
 
-.emotion-20 {
+.emotion-22 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -4388,7 +4385,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
 
 <div>
   <div
-    class="flexbox center-aligned margin-top-small"
+    class="flexbox center-aligned margin-top-small margin-bottom-small"
   >
     <b>
       Select the number of times each device will attempt to apply the update
@@ -4460,7 +4457,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
     </div>
   </div>
   <div
-    class="MuiFormControl-root margin-top-none emotion-10"
+    class="MuiFormControl-root emotion-10"
   >
     <div
       class="MuiFormGroup-root MuiFormGroup-row emotion-11"
@@ -4472,7 +4469,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-13"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-14"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-14"
           >
             <input
               aria-autocomplete="list"
@@ -4480,7 +4477,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input Mui-disabled MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-15"
+              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-15"
               disabled=""
               id="deployment-retries-selection"
               role="combobox"
@@ -4488,26 +4485,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
               type="number"
               value="1"
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-16"
+            >
+              <legend
+                class="emotion-17"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
       <label
-        class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd emotion-16"
+        class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd emotion-18"
       >
         <span
           aria-disabled="true"
-          class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-17"
+          class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-19"
           tabindex="-1"
         >
           <input
-            class="PrivateSwitchBase-input emotion-18"
+            class="PrivateSwitchBase-input emotion-20"
             data-indeterminate="false"
             disabled=""
             type="checkbox"
           />
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-19"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-21"
             data-testid="CheckBoxOutlineBlankIcon"
             focusable="false"
             viewBox="0 0 24 24"
@@ -4518,7 +4530,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
           </svg>
         </span>
         <span
-          class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled emotion-20"
+          class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled emotion-22"
         >
           Save as default
         </span>
@@ -4980,7 +4992,6 @@ exports[`CreateDeployment Component smaller components renders Retries correctly
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -5155,7 +5166,6 @@ exports[`CreateDeployment Component smaller components renders Retries correctly
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
   max-width: 150px;
   min-width: 130px;
@@ -5180,6 +5190,7 @@ exports[`CreateDeployment Component smaller components renders Retries correctly
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-14.Mui-disabled {
@@ -5187,77 +5198,30 @@ exports[`CreateDeployment Component smaller components renders Retries correctly
   cursor: default;
 }
 
-label+.emotion-14 {
-  margin-top: 16px;
-}
-
-.emotion-14::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-14.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-14.Mui-error::before,
-.emotion-14.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-14::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-14:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-14:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-14:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-14:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-14.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-14::after {
-  border-bottom: 2px solid #337a87;
+.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-14:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-14.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-14:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-14:after {
-  border-bottom: 2px solid #337a87;
+.emotion-14.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-15 {
@@ -5278,6 +5242,7 @@ label+.emotion-14 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-15::-webkit-input-placeholder {
@@ -5349,7 +5314,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-15:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-16 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-17 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5368,15 +5365,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   margin-bottom: -15px;
 }
 
-.emotion-16.Mui-disabled {
+.emotion-18.Mui-disabled {
   cursor: default;
 }
 
-.emotion-16 .MuiFormControlLabel-label.Mui-disabled {
+.emotion-18 .MuiFormControlLabel-label.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-17 {
+.emotion-19 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5415,42 +5412,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-17::-moz-focus-inner {
+.emotion-19::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-17.Mui-disabled {
+.emotion-19.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-17 {
+  .emotion-19 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-17:hover {
+.emotion-19:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-17.Mui-checked,
-.emotion-17.MuiCheckbox-indeterminate {
+.emotion-19.Mui-checked,
+.emotion-19.MuiCheckbox-indeterminate {
   color: #337a87;
 }
 
-.emotion-17.Mui-disabled {
+.emotion-19.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: none) {
-  .emotion-17:hover {
+  .emotion-19:hover {
     background-color: transparent;
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -5463,7 +5460,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   z-index: 1;
 }
 
-.emotion-19 {
+.emotion-21 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -5480,11 +5477,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   font-size: 1.3929rem;
 }
 
-.emotion-19 iconButton {
+.emotion-21 iconButton {
   margin-right: 8px;
 }
 
-.emotion-20 {
+.emotion-22 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -5494,7 +5491,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
 
 <div>
   <div
-    class="flexbox center-aligned margin-top-small"
+    class="flexbox center-aligned margin-top-small margin-bottom-small"
   >
     <b>
       Select the number of times each device will attempt to apply the update
@@ -5566,7 +5563,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
     </div>
   </div>
   <div
-    class="MuiFormControl-root margin-top-none emotion-10"
+    class="MuiFormControl-root emotion-10"
   >
     <div
       class="MuiFormGroup-root MuiFormGroup-row emotion-11"
@@ -5578,7 +5575,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-13"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-14"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-14"
           >
             <input
               aria-autocomplete="list"
@@ -5586,7 +5583,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input Mui-disabled MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-15"
+              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-15"
               disabled=""
               id="deployment-retries-selection"
               role="combobox"
@@ -5594,26 +5591,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
               type="number"
               value="1"
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-16"
+            >
+              <legend
+                class="emotion-17"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
       <label
-        class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd emotion-16"
+        class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd emotion-18"
       >
         <span
           aria-disabled="true"
-          class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-17"
+          class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-19"
           tabindex="-1"
         >
           <input
-            class="PrivateSwitchBase-input emotion-18"
+            class="PrivateSwitchBase-input emotion-20"
             data-indeterminate="false"
             disabled=""
             type="checkbox"
           />
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-19"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-21"
             data-testid="CheckBoxOutlineBlankIcon"
             focusable="false"
             viewBox="0 0 24 24"
@@ -5624,7 +5636,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
           </svg>
         </span>
         <span
-          class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled emotion-20"
+          class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label Mui-disabled emotion-22"
         >
           Save as default
         </span>
@@ -8521,8 +8533,8 @@ exports[`CreateDeployment Component smaller components renders RolloutPatternSel
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
+  margin-top: 16px;
   max-width: 515px;
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -8547,6 +8559,7 @@ exports[`CreateDeployment Component smaller components renders RolloutPatternSel
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
   min-width: 400px;
 }
 
@@ -8555,77 +8568,30 @@ exports[`CreateDeployment Component smaller components renders RolloutPatternSel
   cursor: default;
 }
 
-label+.emotion-19 {
-  margin-top: 16px;
-}
-
-.emotion-19::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-19.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-19.Mui-error::before,
-.emotion-19.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-19::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-19:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-19:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-19:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-19:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-19.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-19::after {
-  border-bottom: 2px solid #337a87;
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-19:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-19:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-19.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-19:after {
-  border-bottom: 2px solid #337a87;
+.emotion-19.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-20 {
@@ -8637,6 +8603,7 @@ label+.emotion-19 {
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -8654,6 +8621,7 @@ label+.emotion-19 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-20:focus {
@@ -8673,9 +8641,12 @@ label+.emotion-19 {
   background-color: #fff;
 }
 
+.emotion-20:focus {
+  border-radius: 4px;
+}
+
 .emotion-20.emotion-20.emotion-20 {
-  padding-right: 24px;
-  min-width: 16px;
+  padding-right: 32px;
 }
 
 .emotion-20.MuiSelect-select {
@@ -8755,6 +8726,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-20:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-21 {
   bottom: 0;
   left: 0;
@@ -8785,6 +8760,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
 .emotion-22 iconButton {
@@ -8795,6 +8771,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   color: rgba(0, 0, 0, 0.26);
 }
 
+.emotion-23 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-24 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <div>
   <label
     class="MuiFormControlLabel-root Mui-disabled MuiFormControlLabel-labelPlacementEnd emotion-0"
@@ -8917,13 +8921,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
           class="MuiFormControl-root emotion-18"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiSelect-root emotion-19"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiSelect-root emotion-19"
           >
             <div
               aria-disabled="true"
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="MuiSelect-select MuiSelect-standard Mui-disabled MuiInputBase-input MuiInput-input Mui-disabled emotion-20"
+              class="MuiSelect-select MuiSelect-outlined Mui-disabled MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-20"
               role="combobox"
             >
               Single phase: 100%
@@ -8938,7 +8942,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard Mui-disabled emotion-22"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined Mui-disabled emotion-22"
               data-testid="ArrowDropDownIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -8947,6 +8951,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
                 d="M7 10l5 5 5-5z"
               />
             </svg>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-23"
+            >
+              <legend
+                class="emotion-24"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -9548,8 +9567,8 @@ exports[`CreateDeployment Component smaller components renders RolloutPatternSel
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
+  margin-top: 16px;
   max-width: 515px;
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -9574,6 +9593,7 @@ exports[`CreateDeployment Component smaller components renders RolloutPatternSel
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
   min-width: 400px;
 }
 
@@ -9582,77 +9602,30 @@ exports[`CreateDeployment Component smaller components renders RolloutPatternSel
   cursor: default;
 }
 
-label+.emotion-19 {
-  margin-top: 16px;
-}
-
-.emotion-19::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-19.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-19.Mui-error::before,
-.emotion-19.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-19::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-19:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-19:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-19:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-19:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-19.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-19::after {
-  border-bottom: 2px solid #337a87;
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-19:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-19:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-19.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-19:after {
-  border-bottom: 2px solid #337a87;
+.emotion-19.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-20 {
@@ -9664,6 +9637,7 @@ label+.emotion-19 {
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -9681,6 +9655,7 @@ label+.emotion-19 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-20:focus {
@@ -9700,9 +9675,12 @@ label+.emotion-19 {
   background-color: #fff;
 }
 
+.emotion-20:focus {
+  border-radius: 4px;
+}
+
 .emotion-20.emotion-20.emotion-20 {
-  padding-right: 24px;
-  min-width: 16px;
+  padding-right: 32px;
 }
 
 .emotion-20.MuiSelect-select {
@@ -9782,6 +9760,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-20:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-21 {
   bottom: 0;
   left: 0;
@@ -9812,6 +9794,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
 .emotion-22 iconButton {
@@ -9822,6 +9805,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
   color: rgba(0, 0, 0, 0.26);
 }
 
+.emotion-23 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-24 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <div>
   <label
     class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-0"
@@ -9941,12 +9952,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
           class="MuiFormControl-root emotion-18"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root emotion-19"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root emotion-19"
           >
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-20"
+              class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-20"
               role="combobox"
               tabindex="0"
             >
@@ -9961,7 +9972,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-22"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-22"
               data-testid="ArrowDropDownIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -9970,6 +9981,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
                 d="M7 10l5 5 5-5z"
               />
             </svg>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-23"
+            >
+              <legend
+                class="emotion-24"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -14433,7 +14459,6 @@ exports[`CreateDeployment Component smaller components renders Software correctl
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -14456,6 +14481,8 @@ exports[`CreateDeployment Component smaller components renders Software correctl
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -14463,77 +14490,30 @@ exports[`CreateDeployment Component smaller components renders Software correctl
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -14554,6 +14534,8 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -14625,7 +14607,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-6 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-7 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -14643,15 +14657,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   color: #337a87;
 }
 
-.emotion-5 iconButton {
+.emotion-7 iconButton {
   margin-right: 8px;
 }
 
-.emotion-5.read {
+.emotion-7.read {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-6 {
+.emotion-8 {
   position: absolute;
   top: -5px;
   bottom: 0;
@@ -14661,13 +14675,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-6.read {
+.emotion-8.read {
   border-color: rgba(0, 0, 0, 0.38);
 }
 
 <div>
   <h4
-    class="margin-bottom-none margin-top-none"
+    class="margin-top-none"
   >
     Select a Release to deploy
   </h4>
@@ -14685,7 +14699,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           style="min-width: 400px;"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
           >
             <input
               aria-autocomplete="list"
@@ -14693,7 +14707,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
               id="deployment-release-selection"
               placeholder="Select a Release"
               role="combobox"
@@ -14701,6 +14715,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
               type="text"
               value=""
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-5"
+            >
+              <legend
+                class="emotion-6"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -14717,7 +14746,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-5"
+            class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-7"
             data-testid="HelpIcon"
             focusable="false"
             viewBox="0 0 24 24"
@@ -14727,7 +14756,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
             />
           </svg>
           <div
-            class="emotion-6 "
+            class="emotion-8 "
           />
         </div>
       </div>
@@ -14895,7 +14924,6 @@ exports[`CreateDeployment Component smaller components renders Software correctl
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -14918,6 +14946,8 @@ exports[`CreateDeployment Component smaller components renders Software correctl
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -14925,77 +14955,30 @@ exports[`CreateDeployment Component smaller components renders Software correctl
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -15016,6 +14999,8 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -15087,7 +15072,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-6 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-7 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -15105,15 +15122,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   color: #337a87;
 }
 
-.emotion-5 iconButton {
+.emotion-7 iconButton {
   margin-right: 8px;
 }
 
-.emotion-5.read {
+.emotion-7.read {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-6 {
+.emotion-8 {
   position: absolute;
   top: -5px;
   bottom: 0;
@@ -15123,13 +15140,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-6.read {
+.emotion-8.read {
   border-color: rgba(0, 0, 0, 0.38);
 }
 
 <div>
   <h4
-    class="margin-bottom-none margin-top-none"
+    class="margin-top-none"
   >
     Select a Release to deploy
   </h4>
@@ -15147,7 +15164,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           style="min-width: 400px;"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
           >
             <input
               aria-autocomplete="list"
@@ -15155,7 +15172,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
               id="deployment-release-selection"
               placeholder="Select a Release"
               role="combobox"
@@ -15163,6 +15180,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
               type="text"
               value=""
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-5"
+            >
+              <legend
+                class="emotion-6"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -15179,7 +15211,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-5"
+            class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-7"
             data-testid="HelpIcon"
             focusable="false"
             viewBox="0 0 24 24"
@@ -15189,7 +15221,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
             />
           </svg>
           <div
-            class="emotion-6 "
+            class="emotion-8 "
           />
         </div>
       </div>
diff --git a/frontend/src/js/components/deployments/__snapshots__/PastDeployments.test.tsx.snap b/frontend/src/js/components/deployments/__snapshots__/PastDeployments.test.tsx.snap
index 581448d1..213e4592 100644
--- a/frontend/src/js/components/deployments/__snapshots__/PastDeployments.test.tsx.snap
+++ b/frontend/src/js/components/deployments/__snapshots__/PastDeployments.test.tsx.snap
@@ -176,7 +176,6 @@ exports[`PastDeployments Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -204,6 +203,13 @@ exports[`PastDeployments Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-3.Mui-focused {
@@ -241,6 +247,8 @@ exports[`PastDeployments Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-4.Mui-disabled {
@@ -248,77 +256,30 @@ exports[`PastDeployments Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-4 {
-  margin-top: 16px;
-}
-
-.emotion-4::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-4.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-4.Mui-error::before,
-.emotion-4.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-4::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-4:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-4:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-4:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-4:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-4.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-4::after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-4:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-4:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-4.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-4:after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-5 {
@@ -339,6 +300,8 @@ label+.emotion-4 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-5::-webkit-input-placeholder {
@@ -410,6 +373,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-5:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-6 {
   position: absolute;
   right: 0;
@@ -540,7 +507,48 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin-right: 8px;
 }
 
-.emotion-19 {
+.emotion-10 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-11 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-11>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-23 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -554,26 +562,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-19 .clearButton {
+.emotion-23 .clearButton {
   opacity: 1;
 }
 
 @media (pointer: fine) {
-  .emotion-19 .clearButton {
+  .emotion-23 .clearButton {
     opacity: 0;
   }
 
-  .emotion-19:hover .clearButton,
-  .emotion-19:focus-within .clearButton {
+  .emotion-23:hover .clearButton,
+  .emotion-23:focus-within .clearButton {
     opacity: 1;
   }
 }
 
-.emotion-20 {
+.emotion-24 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -603,25 +610,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
-.emotion-20.Mui-focused {
+.emotion-24.Mui-focused {
   color: #337a87;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-20.Mui-error {
+.emotion-24.Mui-error {
   color: #ab1000;
 }
 
-.emotion-20.Mui-focused {
+.emotion-24.Mui-focused {
   color: #337a87;
 }
 
-.emotion-21 {
+.emotion-25 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -639,87 +663,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
-.emotion-21.Mui-disabled {
+.emotion-25.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-21 {
-  margin-top: 16px;
-}
-
-.emotion-21::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-21.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-21.Mui-error::before,
-.emotion-21.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-21::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-21:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-25:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-21:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-25:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-21.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-21::after {
-  border-bottom: 2px solid #337a87;
+.emotion-25.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-21:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-25.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-21:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-25.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-21:after {
-  border-bottom: 2px solid #337a87;
+.emotion-25.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-23 {
+.emotion-27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -734,7 +713,7 @@ label+.emotion-21 {
   margin-left: 8px;
 }
 
-.emotion-24 {
+.emotion-28 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -783,42 +762,42 @@ label+.emotion-21 {
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-24::-moz-focus-inner {
+.emotion-28::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-24.Mui-disabled {
+.emotion-28.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-24 {
+  .emotion-28 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-24:hover {
+.emotion-28:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-24:hover {
+  .emotion-28:hover {
     background-color: transparent;
   }
 }
 
-.emotion-24.Mui-disabled {
+.emotion-28.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-24.MuiIconButton-loading {
+.emotion-28.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-26 {
+.emotion-30 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -835,27 +814,53 @@ label+.emotion-21 {
   font-size: 1.3929rem;
 }
 
-.emotion-26 iconButton {
+.emotion-30 iconButton {
   margin-right: 8px;
 }
 
-.emotion-35 {
+.emotion-32 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-32>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-43 {
   -webkit-column-gap: 8px;
   column-gap: 8px;
   display: grid;
   grid-template-columns: repeat(auto-fit, 32px);
 }
 
-.emotion-35>div {
+.emotion-43>div {
   -webkit-column-gap: 4px;
   column-gap: 4px;
 }
 
-.emotion-35 .disabled {
+.emotion-43 .disabled {
   opacity: 0.1;
 }
 
-.emotion-36 {
+.emotion-44 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -918,57 +923,57 @@ label+.emotion-21 {
   text-transform: none;
 }
 
-.emotion-36::-moz-focus-inner {
+.emotion-44::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-36.Mui-disabled {
+.emotion-44.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-36 {
+  .emotion-44 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-36:hover {
+.emotion-44:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-36.Mui-disabled {
+.emotion-44.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-36:hover {
+.emotion-44:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-36:hover {
+  .emotion-44:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-36:active {
+.emotion-44:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-36.Mui-focusVisible {
+.emotion-44.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-36.Mui-disabled {
+.emotion-44.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-36:hover {
+  .emotion-44:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -976,34 +981,34 @@ label+.emotion-21 {
   }
 }
 
-.emotion-36.MuiButton-loading {
+.emotion-44.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-36:hover {
+.emotion-44:hover {
   colors: #337a87;
 }
 
-.emotion-36.MuiButton-text {
+.emotion-44.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-36:hover {
+.emotion-44:hover {
   background-color: transparent;
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-37 {
+.emotion-45 {
   overflow: auto;
   color: rgba(10, 10, 11, 0.78);
   font-size: 0.8125rem;
 }
 
-.emotion-37:last-child {
+.emotion-45:last-child {
   padding: 0;
 }
 
-.emotion-38 {
+.emotion-46 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1021,7 +1026,7 @@ label+.emotion-21 {
 }
 
 @media (min-width:600px) {
-  .emotion-38 {
+  .emotion-46 {
     padding-left: 24px;
     padding-right: 24px;
   }
@@ -1029,45 +1034,45 @@ label+.emotion-21 {
 
 @media (min-width:0px) {
   @media (orientation: landscape) {
-    .emotion-38 {
+    .emotion-46 {
       min-height: 48px;
     }
   }
 }
 
 @media (min-width:600px) {
-  .emotion-38 {
+  .emotion-46 {
     min-height: 64px;
   }
 }
 
 @media (min-width:0px) and (orientation: landscape) {
-  .emotion-38 {
+  .emotion-46 {
     min-height: 52px;
   }
 }
 
 @media (min-width:600px) {
-  .emotion-38 {
+  .emotion-46 {
     min-height: 52px;
     padding-right: 2px;
   }
 }
 
-.emotion-38 .MuiTablePagination-actions {
+.emotion-46 .MuiTablePagination-actions {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: 20px;
 }
 
-.emotion-39 {
+.emotion-47 {
   -webkit-flex: 1 1 100%;
   -ms-flex: 1 1 100%;
   flex: 1 1 100%;
 }
 
-.emotion-40 {
+.emotion-48 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -1077,7 +1082,7 @@ label+.emotion-21 {
   flex-shrink: 0;
 }
 
-.emotion-41 {
+.emotion-49 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1103,12 +1108,12 @@ label+.emotion-21 {
   margin-left: 8px;
 }
 
-.emotion-41.Mui-disabled {
+.emotion-49.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-.emotion-41 .MuiTablePagination-select {
+.emotion-49 .MuiTablePagination-select {
   padding-left: 8px;
   padding-right: 24px;
   text-align: right;
@@ -1116,7 +1121,7 @@ label+.emotion-21 {
   text-align-last: right;
 }
 
-.emotion-42 {
+.emotion-50 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -1144,29 +1149,29 @@ label+.emotion-21 {
   animation-duration: 10ms;
 }
 
-.emotion-42:focus {
+.emotion-50:focus {
   border-radius: 0;
 }
 
-.emotion-42.Mui-disabled {
+.emotion-50.Mui-disabled {
   cursor: default;
 }
 
-.emotion-42[multiple] {
+.emotion-50[multiple] {
   height: auto;
 }
 
-.emotion-42:not([multiple]) option,
-.emotion-42:not([multiple]) optgroup {
+.emotion-50:not([multiple]) option,
+.emotion-50:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-42.emotion-42.emotion-42 {
+.emotion-50.emotion-50.emotion-50 {
   padding-right: 24px;
   min-width: 16px;
 }
 
-.emotion-42.MuiSelect-select {
+.emotion-50.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -1174,76 +1179,76 @@ label+.emotion-21 {
   overflow: hidden;
 }
 
-.emotion-42::-webkit-input-placeholder {
+.emotion-50::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-42::-moz-placeholder {
+.emotion-50::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-42::-ms-input-placeholder {
+.emotion-50::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-42:focus {
+.emotion-50:focus {
   outline: 0;
 }
 
-.emotion-42:invalid {
+.emotion-50:invalid {
   box-shadow: none;
 }
 
-.emotion-42::-webkit-search-decoration {
+.emotion-50::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-42::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-50::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-42::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-50::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-42::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-50::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-50:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-50:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-50:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-42.Mui-disabled {
+.emotion-50.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-42:-webkit-autofill {
+.emotion-50:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-43 {
+.emotion-51 {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -1253,7 +1258,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
   box-sizing: border-box;
 }
 
-.emotion-44 {
+.emotion-52 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1275,15 +1280,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-44 iconButton {
+.emotion-52 iconButton {
   margin-right: 8px;
 }
 
-.emotion-44.Mui-disabled {
+.emotion-52.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-45 {
+.emotion-53 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -1293,7 +1298,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
   flex-shrink: 0;
 }
 
-.emotion-46 {
+.emotion-54 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1343,38 +1348,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-46::-moz-focus-inner {
+.emotion-54::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-46.Mui-disabled {
+.emotion-54.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-46 {
+  .emotion-54 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-46:hover {
+.emotion-54:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-46:hover {
+  .emotion-54:hover {
     background-color: transparent;
   }
 }
 
-.emotion-46.Mui-disabled {
+.emotion-54.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-46.MuiIconButton-loading {
+.emotion-54.MuiIconButton-loading {
   color: transparent;
 }
 
@@ -1389,7 +1394,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
       class="filter-item"
     >
       <h5
-        class="margin-top-small margin-bottom-none muted"
+        class="margin-top-small margin-bottom-small muted"
       >
         Device group
       </h5>
@@ -1401,7 +1406,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-2"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
             data-shrink="false"
             for=":r0:"
             id=":r0:-label"
@@ -1409,7 +1414,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
             Target devices
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-4"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-4"
           >
             <input
               aria-autocomplete="list"
@@ -1417,7 +1422,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-5"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-5"
               id=":r0:"
               placeholder="Select a group"
               role="combobox"
@@ -1452,6 +1457,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-10"
+            >
+              <legend
+                class="emotion-11"
+              >
+                <span>
+                  Target devices
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -1460,7 +1477,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
       class="filter-item"
     >
       <h5
-        class="margin-top-small margin-bottom-none muted"
+        class="margin-top-small margin-bottom-small muted"
       >
         Contains Artifact type
       </h5>
@@ -1472,7 +1489,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-2"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
             data-shrink="false"
             for=":r3:"
             id=":r3:-label"
@@ -1480,7 +1497,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
             Deployment type
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-4"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-4"
           >
             <input
               aria-autocomplete="list"
@@ -1488,7 +1505,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-5"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-5"
               id=":r3:"
               placeholder="Select a type"
               role="combobox"
@@ -1523,6 +1540,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-10"
+            >
+              <legend
+                class="emotion-11"
+              >
+                <span>
+                  Deployment type
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -1531,7 +1560,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
       class="filter-item"
     >
       <h5
-        class="margin-top-small margin-bottom-none muted"
+        class="margin-top-small margin-bottom-small muted"
       >
         Start time
       </h5>
@@ -1540,10 +1569,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
         style="flex-wrap: wrap; gap: 15px;"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-19"
+          class="MuiFormControl-root MuiTextField-root emotion-23"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-20"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-24"
             data-shrink="true"
             for=":r6:"
             id=":r6:-label"
@@ -1551,12 +1580,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
             From
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-adornedEnd emotion-21"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-adornedEnd emotion-25"
           >
             <input
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-5"
+              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-5"
               disabled=""
               id=":r6:"
               inputmode="text"
@@ -1565,11 +1594,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
               value="January 13th"
             />
             <div
-              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-23"
+              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-27"
             >
               <button
                 aria-label="Choose date, selected date is Jan 13, 2019"
-                class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-edgeEnd MuiIconButton-sizeMedium emotion-24"
+                class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-edgeEnd MuiIconButton-sizeMedium emotion-28"
                 disabled=""
                 id=":r8:"
                 tabindex="-1"
@@ -1580,7 +1609,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-26"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-30"
                   data-testid="CalendarIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1591,13 +1620,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-10"
+            >
+              <legend
+                class="emotion-32"
+              >
+                <span>
+                  From
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-19"
+          class="MuiFormControl-root MuiTextField-root emotion-23"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-20"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-24"
             data-shrink="true"
             for=":r9:"
             id=":r9:-label"
@@ -1605,12 +1646,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
             To
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-21"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-25"
           >
             <input
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-5"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-5"
               id=":r9:"
               inputmode="text"
               placeholder="MMMM DD"
@@ -1618,11 +1659,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
               value="January 13th"
             />
             <div
-              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-23"
+              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-27"
             >
               <button
                 aria-label="Choose date, selected date is Jan 13, 2019"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium emotion-24"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium emotion-28"
                 id=":rb:"
                 tabindex="0"
                 type="button"
@@ -1632,7 +1673,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-26"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-30"
                   data-testid="CalendarIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1643,6 +1684,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-10"
+            >
+              <legend
+                class="emotion-32"
+              >
+                <span>
+                  To
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -1782,7 +1835,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
               Status
             </span>
             <div
-              class="flexbox emotion-35 "
+              class="flexbox emotion-43 "
             >
               <div
                 aria-label="Skipped"
@@ -1871,7 +1924,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
             </div>
           </div>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-36"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-44"
             id=":rj:"
             tabindex="0"
             type="button"
@@ -1884,28 +1937,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
         class="flexbox"
       >
         <div
-          class="MuiTablePagination-root flexbox margin-top margin-top-none emotion-37"
+          class="MuiTablePagination-root flexbox margin-top margin-top-none emotion-45"
         >
           <div
-            class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar emotion-38"
+            class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar emotion-46"
           >
             <div
-              class="MuiTablePagination-spacer flexbox no-basis emotion-39"
+              class="MuiTablePagination-spacer flexbox no-basis emotion-47"
             />
             <p
-              class="MuiTablePagination-selectLabel emotion-40"
+              class="MuiTablePagination-selectLabel emotion-48"
               id=":rl:"
             >
               Rows
             </p>
             <div
-              class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-select MuiSelect-root MuiTablePagination-input emotion-41"
+              class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-select MuiSelect-root MuiTablePagination-input emotion-49"
             >
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-labelledby=":rl: :rk:"
-                class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input emotion-42"
+                class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input emotion-50"
                 id=":rk:"
                 role="combobox"
                 tabindex="0"
@@ -1915,14 +1968,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput emotion-43"
+                class="MuiSelect-nativeInput emotion-51"
                 name="pagination"
                 tabindex="-1"
                 value="20"
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard emotion-44"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard emotion-52"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1933,7 +1986,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
               </svg>
             </div>
             <p
-              class="MuiTablePagination-displayedRows emotion-45"
+              class="MuiTablePagination-displayedRows emotion-53"
             />
             <div
               class="flexbox center-aligned"
@@ -1942,7 +1995,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                 1-1 of 1
               </div>
               <button
-                class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-46"
+                class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-54"
                 disabled=""
                 id=":rr:"
                 tabindex="-1"
@@ -1953,7 +2006,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-26"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-30"
                   data-testid="KeyboardArrowLeftIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1965,7 +2018,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
               </button>
               <div>
                 <button
-                  class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-46"
+                  class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-54"
                   disabled=""
                   id=":rs:"
                   tabindex="-1"
@@ -1976,7 +2029,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-42:focus::-ms-input-
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-26"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-30"
                     data-testid="KeyboardArrowRightIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
diff --git a/frontend/src/js/components/deployments/deployment-wizard/DeviceLimit.tsx b/frontend/src/js/components/deployments/deployment-wizard/DeviceLimit.tsx
index 9ddce155..d9c41bfb 100644
--- a/frontend/src/js/components/deployments/deployment-wizard/DeviceLimit.tsx
+++ b/frontend/src/js/components/deployments/deployment-wizard/DeviceLimit.tsx
@@ -13,7 +13,7 @@
 //    limitations under the License.
 import React, { useEffect, useState } from 'react';
 
-import { Checkbox, Collapse, FormControl, FormControlLabel, FormHelperText, Input, formControlClasses } from '@mui/material';
+import { Checkbox, Collapse, FormControl, FormControlLabel, FormHelperText, OutlinedInput, formControlClasses } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 
 import { DOCSTIPS, DocsTooltip } from '@northern.tech/common-ui/DocsLink';
@@ -26,6 +26,7 @@ const useStyles = makeStyles()(theme => ({
   limitSelection: {
     alignItems: 'baseline',
     display: 'flex',
+    marginTop: theme.spacing(2),
     marginLeft: `calc(1em + ${theme.spacing(1.5)})`,
     [`.${formControlClasses.root}`]: { minWidth: 'unset', width: 100, marginLeft: theme.spacing(), marginRight: theme.spacing() }
   }
@@ -95,7 +96,7 @@ export const DeviceLimit = props => {
         <div className={classes.limitSelection}>
           Finish deployment after{' '}
           <FormControl error={!!error}>
-            <Input value={value} placeholder="Limit" onChange={handleLimitChange} type="text" hint={numberDevices} />
+            <OutlinedInput value={value} placeholder={numberDevices} onChange={handleLimitChange} type="text" />
             <FormHelperText>{error}</FormHelperText>
           </FormControl>
           devices have attempted to apply the update
diff --git a/frontend/src/js/components/deployments/deployment-wizard/PhaseSettings.tsx b/frontend/src/js/components/deployments/deployment-wizard/PhaseSettings.tsx
index beddf17c..517595f7 100644
--- a/frontend/src/js/components/deployments/deployment-wizard/PhaseSettings.tsx
+++ b/frontend/src/js/components/deployments/deployment-wizard/PhaseSettings.tsx
@@ -21,10 +21,10 @@ import {
   FormControl,
   FormControlLabel,
   IconButton,
-  Input,
   InputAdornment,
   ListSubheader,
   MenuItem,
+  OutlinedInput,
   Select,
   Table,
   TableBody,
@@ -48,7 +48,7 @@ const useStyles = makeStyles()(theme => ({
   delayInputWrapper: { display: 'grid', gridTemplateColumns: 'max-content max-content', columnGap: theme.spacing() },
   row: { whiteSpace: 'nowrap' },
   input: { minWidth: 400 },
-  patternSelection: { maxWidth: 515, width: 'min-content' }
+  patternSelection: { marginTop: theme.spacing(2), maxWidth: 515, width: 'min-content' }
 }));
 
 const timeframes = ['minutes', 'hours', 'days'];
@@ -149,7 +149,7 @@ export const PhaseSettings = ({ classNames, deploymentObject, disabled, numberDe
         <TableCell>
           <div className="flexbox center-aligned">
             {phase.batch_size && phase.batch_size < 100 ? (
-              <Input
+              <OutlinedInput
                 value={phase.batch_size}
                 onChange={event => updateBatchSize(event.target.value, index)}
                 endAdornment={
@@ -183,7 +183,7 @@ export const PhaseSettings = ({ classNames, deploymentObject, disabled, numberDe
         <TableCell>
           {phase.delay && index !== phases.length - 1 ? (
             <div className={classes.delayInputWrapper}>
-              <Input
+              <OutlinedInput
                 value={phase.delay}
                 onChange={event => updateDelay(event.target.value, index)}
                 inputProps={{ step: 1, min: 1, max: 720, type: 'number' }}
diff --git a/frontend/src/js/components/deployments/deployment-wizard/RolloutOptions.tsx b/frontend/src/js/components/deployments/deployment-wizard/RolloutOptions.tsx
index 048eb3e1..9bff1d3c 100644
--- a/frontend/src/js/components/deployments/deployment-wizard/RolloutOptions.tsx
+++ b/frontend/src/js/components/deployments/deployment-wizard/RolloutOptions.tsx
@@ -136,14 +136,14 @@ export const Retries = ({
 
   return (
     <>
-      <div className="flexbox center-aligned margin-top-small">
+      <div className="flexbox center-aligned margin-top-small margin-bottom-small">
         <b className={canRetry ? '' : commonClasses.disabled}>Select the number of times each device will attempt to apply the update</b>
         <InfoHintContainer>
           <EnterpriseNotification id={BENEFITS.retryDeployments.id} />
           <DocsTooltip id={DOCSTIPS.phasedDeployments.id} />
         </InfoHintContainer>
       </div>
-      <FormControl className="margin-top-none" disabled={!canRetry}>
+      <FormControl disabled={!canRetry}>
         <FormGroup row>
           <Autocomplete
             autoSelect
@@ -160,8 +160,10 @@ export const Retries = ({
               <TextField
                 {...params}
                 className={classes.retryInput}
-                inputProps={{ ...params.inputProps, value: formatValue(params.inputProps.value) }}
-                InputProps={{ ...params.InputProps }}
+                slotProps={{
+                  htmlInput: { ...params.inputProps, value: formatValue(params.inputProps.value) },
+                  input: { ...params.InputProps }
+                }}
                 type="number"
               />
             )}
diff --git a/frontend/src/js/components/deployments/deployment-wizard/ScheduleRollout.tsx b/frontend/src/js/components/deployments/deployment-wizard/ScheduleRollout.tsx
index 4ea9f358..400889de 100644
--- a/frontend/src/js/components/deployments/deployment-wizard/ScheduleRollout.tsx
+++ b/frontend/src/js/components/deployments/deployment-wizard/ScheduleRollout.tsx
@@ -61,7 +61,7 @@ export const ScheduleRollout = ({ canSchedule, commonClasses, setDeploymentSetti
   const startTime = dayjs(start_time);
   return (
     <>
-      <h4 className={`margin-bottom-none margin-top-none ${canSchedule ? '' : commonClasses.disabled}`}>Select a start time</h4>
+      <h4 className={`margin-top-none ${canSchedule ? '' : commonClasses.disabled}`}>Select a start time</h4>
       <div className={commonClasses.columns}>
         <FormControl className={classes.pickerStyle} disabled={!canSchedule}>
           <Select className={classes.textField} onChange={handleStartChange} value={start_time ? 'custom' : 0}>
@@ -75,7 +75,7 @@ export const ScheduleRollout = ({ canSchedule, commonClasses, setDeploymentSetti
         </InfoHintContainer>
       </div>
       {Boolean(isPickerOpen || start_time) && (
-        <FormControl className={`margin-top-none ${classes.pickerStyle}`} disabled={!canSchedule}>
+        <FormControl className={classes.pickerStyle} disabled={!canSchedule}>
           <DateTimePicker
             ampm={false}
             open={isPickerOpen}
diff --git a/frontend/src/js/components/deployments/deployment-wizard/SoftwareDevices.tsx b/frontend/src/js/components/deployments/deployment-wizard/SoftwareDevices.tsx
index d379bb3b..0022c3ed 100644
--- a/frontend/src/js/components/deployments/deployment-wizard/SoftwareDevices.tsx
+++ b/frontend/src/js/components/deployments/deployment-wizard/SoftwareDevices.tsx
@@ -185,10 +185,10 @@ export const Devices = ({
 
   return (
     <>
-      <h4 className="margin-bottom-none margin-top-none">Select a device group to target</h4>
+      <h4 className="margin-top-none">Select a device group to target</h4>
       <div ref={groupRef} className={classes.selection}>
         {deviceText ? (
-          <TextField value={deviceText} label={pluralize('device', devices.length)} disabled={true} className={classes.infoStyle} />
+          <TextField value={deviceText} label={pluralize('device', devices.length)} disabled className={classes.infoStyle} />
         ) : (
           <div>
             <Autocomplete
@@ -281,11 +281,11 @@ export const Software = ({ commonClasses, deploymentObject, releaseRef, releases
 
   return (
     <>
-      <h4 className="margin-bottom-none margin-top-none">Select a Release to deploy</h4>
+      <h4 className="margin-top-none">Select a Release to deploy</h4>
       <div className={commonClasses.columns}>
         <div ref={releaseRef} className={classes.selection}>
           {releaseSelectionLocked ? (
-            <TextField value={deploymentRelease?.name} label="Release" disabled={true} className={classes.infoStyle} />
+            <TextField value={deploymentRelease?.name} label="Release" disabled className={classes.infoStyle} />
           ) : (
             <AsyncAutocomplete
               id="deployment-release-selection"
diff --git a/frontend/src/js/components/devices/__snapshots__/AuthorizedDevices.test.tsx.snap b/frontend/src/js/components/devices/__snapshots__/AuthorizedDevices.test.tsx.snap
index 8ac08e58..55bf6fd8 100644
--- a/frontend/src/js/components/devices/__snapshots__/AuthorizedDevices.test.tsx.snap
+++ b/frontend/src/js/components/devices/__snapshots__/AuthorizedDevices.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`AuthorizedDevices Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
   font-size: 13px;
   margin-left: 4px;
   margin-top: 2px;
@@ -29,8 +30,30 @@ exports[`AuthorizedDevices Component renders correctly 1`] = `
   cursor: default;
 }
 
-.emotion-0>div {
-  padding-left: 4px;
+.emotion-0:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-0:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-0.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-0.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-1 {
@@ -42,6 +65,7 @@ exports[`AuthorizedDevices Component renders correctly 1`] = `
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -59,6 +83,7 @@ exports[`AuthorizedDevices Component renders correctly 1`] = `
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-1:focus {
@@ -78,9 +103,12 @@ exports[`AuthorizedDevices Component renders correctly 1`] = `
   background-color: #fff;
 }
 
+.emotion-1:focus {
+  border-radius: 4px;
+}
+
 .emotion-1.emotion-1.emotion-1 {
-  padding-right: 24px;
-  min-width: 16px;
+  padding-right: 32px;
 }
 
 .emotion-1.MuiSelect-select {
@@ -160,6 +188,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-1:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-2 {
   bottom: 0;
   left: 0;
@@ -190,6 +222,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
 .emotion-3 iconButton {
@@ -201,6 +234,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
 }
 
 .emotion-4 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-5 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -260,33 +321,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-4::-moz-focus-inner {
+.emotion-6::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-4.Mui-disabled {
+.emotion-6.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-4 {
+  .emotion-6 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-4:hover {
+.emotion-6:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-4.Mui-disabled {
+.emotion-6.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-4:hover {
+  .emotion-6:hover {
     --variant-containedBg: rgb(65, 10, 46);
     --variant-textBg: rgba(93, 15, 67, 0.04);
     --variant-outlinedBorder: #5d0f43;
@@ -294,29 +355,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   }
 }
 
-.emotion-4.MuiButton-loading {
+.emotion-6.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-4:hover {
+.emotion-6:hover {
   colors: #337a87;
 }
 
-.emotion-4.MuiButton-text {
+.emotion-6.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-5 {
+.emotion-7 {
   display: inherit;
   margin-right: 8px;
   margin-left: -4px;
 }
 
-.emotion-5>*:nth-of-type(1) {
+.emotion-7>*:nth-of-type(1) {
   font-size: 20px;
 }
 
-.emotion-6 {
+.emotion-8 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -333,11 +394,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-6 iconButton {
+.emotion-8 iconButton {
   margin-right: 8px;
 }
 
-.emotion-7 {
+.emotion-9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -397,33 +458,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-7::-moz-focus-inner {
+.emotion-9::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-7 {
+  .emotion-9 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-7:hover {
+  .emotion-9:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -431,25 +492,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   }
 }
 
-.emotion-7.MuiButton-loading {
+.emotion-9.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   colors: #337a87;
 }
 
-.emotion-7.MuiButton-text {
+.emotion-9.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-8 {
+.emotion-10 {
   display: inherit;
   margin-right: -4px;
   margin-left: 8px;
 }
 
-.emotion-8>*:nth-of-type(1) {
+.emotion-10>*:nth-of-type(1) {
   font-size: 20px;
 }
 
@@ -478,12 +539,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
             >
               Status:
               <div
-                class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary MuiSelect-root emotion-0"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiSelect-root emotion-0"
               >
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-1"
+                  class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-1"
                   role="combobox"
                   tabindex="0"
                 >
@@ -498,7 +559,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-3"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-3"
                   data-testid="ArrowDropDownIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -507,6 +568,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
                     d="M7 10l5 5 5-5z"
                   />
                 </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline emotion-4"
+                >
+                  <legend
+                    class="emotion-5"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="notranslate"
+                    >
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
           </div>
@@ -519,18 +595,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
           class="flexbox centered filter-header "
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary emotion-4"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary emotion-6"
             id=":r1:"
             style="background-color: transparent;"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-5"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-7"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-8"
                 data-testid="FilterListIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -544,7 +620,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
           </button>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-7"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-9"
           id=":r2:"
           style="text-transform: none;"
           tabindex="0"
@@ -552,11 +628,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
         >
           Table options
           <span
-            class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium emotion-8"
+            class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium emotion-10"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-6"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-8"
               data-testid="ArrowDropDownIcon"
               focusable="false"
               viewBox="0 0 24 24"
diff --git a/frontend/src/js/components/devices/__snapshots__/DeviceGroups.test.tsx.snap b/frontend/src/js/components/devices/__snapshots__/DeviceGroups.test.tsx.snap
index 1f3bc881..c6f62e30 100644
--- a/frontend/src/js/components/devices/__snapshots__/DeviceGroups.test.tsx.snap
+++ b/frontend/src/js/components/devices/__snapshots__/DeviceGroups.test.tsx.snap
@@ -197,12 +197,12 @@ exports[`DeviceGroups Component renders correctly 1`] = `
               >
                 Status:
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary MuiSelect-root css-l3fzcz-MuiInputBase-root-MuiInput-root-MuiSelect-root-selection"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiSelect-root css-1sxu68y-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root-selection"
                 >
                   <div
                     aria-expanded="false"
                     aria-haspopup="listbox"
-                    class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input css-1pzjxiu-MuiSelect-select-MuiInputBase-input-MuiInput-input"
+                    class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-w76bbz-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
                     role="combobox"
                     tabindex="0"
                   >
@@ -217,7 +217,7 @@ exports[`DeviceGroups Component renders correctly 1`] = `
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard css-ozirs8-MuiSvgIcon-root-MuiSelect-icon"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-1usp264-MuiSvgIcon-root-MuiSelect-icon"
                     data-testid="ArrowDropDownIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -226,6 +226,21 @@ exports[`DeviceGroups Component renders correctly 1`] = `
                       d="M7 10l5 5 5-5z"
                     />
                   </svg>
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline css-1ll44ll-MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="css-w4cd9x"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="notranslate"
+                      >
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
               </div>
               <div
diff --git a/frontend/src/js/components/devices/__snapshots__/ExpandedDevice.test.tsx.snap b/frontend/src/js/components/devices/__snapshots__/ExpandedDevice.test.tsx.snap
index 81a51ada..0500be18 100644
--- a/frontend/src/js/components/devices/__snapshots__/ExpandedDevice.test.tsx.snap
+++ b/frontend/src/js/components/devices/__snapshots__/ExpandedDevice.test.tsx.snap
@@ -528,6 +528,8 @@ exports[`ExpandedDevice Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
   color: rgba(10, 10, 11, 0.78);
   font-size: 0.8125rem;
 }
@@ -537,73 +539,30 @@ exports[`ExpandedDevice Component renders correctly 1`] = `
   cursor: default;
 }
 
-.emotion-27::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-27.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-27.Mui-error::before,
-.emotion-27.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-27::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-27:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-27:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-27:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-27:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-27.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-27::after {
-  border-bottom: 2px solid #337a87;
+.emotion-27.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-27:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-27.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-27:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-27.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-27:after {
-  border-bottom: 2px solid #337a87;
+.emotion-27.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-28 {
@@ -624,6 +583,8 @@ exports[`ExpandedDevice Component renders correctly 1`] = `
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-28::-webkit-input-placeholder {
@@ -695,6 +656,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-28:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -829,7 +794,35 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   font-size: 18px;
 }
 
+.emotion-33 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
 .emotion-34 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-36 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -847,11 +840,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   color: #337a87;
 }
 
-.emotion-34 iconButton {
+.emotion-36 iconButton {
   margin-right: 8px;
 }
 
-.emotion-38 {
+.emotion-40 {
   background-color: #f7f7f7;
   border-color: #e9e9e9;
   border-style: solid;
@@ -861,7 +854,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   padding: 16px;
 }
 
-.emotion-39 {
+.emotion-41 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -879,15 +872,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   color: #337a87;
 }
 
-.emotion-39 iconButton {
+.emotion-41 iconButton {
   margin-right: 8px;
 }
 
-.emotion-39.read {
+.emotion-41.read {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-40 {
+.emotion-42 {
   position: absolute;
   top: -5px;
   bottom: 0;
@@ -897,37 +890,37 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   border-radius: 50%;
 }
 
-.emotion-40.read {
+.emotion-42.read {
   border-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-41 .header,
-.emotion-41 .MuiAccordion-root {
+.emotion-43 .header,
+.emotion-43 .MuiAccordion-root {
   border-bottom: 1px solid #cfcfcf;
 }
 
-.emotion-41 .columnHeader,
-.emotion-41 .MuiAccordionSummary-root,
-.emotion-41 .MuiAccordionSummary-content {
+.emotion-43 .columnHeader,
+.emotion-43 .MuiAccordionSummary-root,
+.emotion-43 .MuiAccordionSummary-content {
   cursor: default;
 }
 
-.emotion-41 .header,
-.emotion-41 .body .MuiAccordionSummary-content {
+.emotion-43 .header,
+.emotion-43 .body .MuiAccordionSummary-content {
   display: grid;
   grid-column-gap: 16px;
   grid-template-columns: 0.5fr 1fr 2fr 2fr 2fr;
 }
 
-.emotion-42 {
+.emotion-44 {
   padding: 16px;
 }
 
-.emotion-42.columns-4 {
+.emotion-44.columns-4 {
   grid-template-columns: 0.5fr 1fr 2fr 2fr;
 }
 
-.emotion-43 {
+.emotion-45 {
   background-color: #fff;
   color: rgba(10, 10, 11, 0.78);
   -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -944,7 +937,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   background-color: #d4e9e7;
 }
 
-.emotion-43::before {
+.emotion-45::before {
   position: absolute;
   left: 0;
   top: -1px;
@@ -957,66 +950,66 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-43:first-of-type::before {
+.emotion-45:first-of-type::before {
   display: none;
 }
 
-.emotion-43.Mui-expanded::before {
+.emotion-45.Mui-expanded::before {
   opacity: 0;
 }
 
-.emotion-43.Mui-expanded:first-of-type {
+.emotion-45.Mui-expanded:first-of-type {
   margin-top: 0;
 }
 
-.emotion-43.Mui-expanded:last-of-type {
+.emotion-45.Mui-expanded:last-of-type {
   margin-bottom: 0;
 }
 
-.emotion-43.Mui-expanded+.emotion-43.Mui-expanded::before {
+.emotion-45.Mui-expanded+.emotion-45.Mui-expanded::before {
   display: none;
 }
 
-.emotion-43.Mui-disabled {
+.emotion-45.Mui-disabled {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-43.Mui-expanded {
+.emotion-45.Mui-expanded {
   margin: 16px 0;
 }
 
-.emotion-43:before {
+.emotion-45:before {
   display: none;
 }
 
-.emotion-43.Mui-expanded {
+.emotion-45.Mui-expanded {
   margin: auto;
   background-color: #f7f7f7;
 }
 
-.emotion-43:before {
+.emotion-45:before {
   display: none;
 }
 
-.emotion-43$expanded {
+.emotion-45$expanded {
   margin: auto;
 }
 
-.emotion-43 .columns-4 .MuiAccordionSummary-content {
+.emotion-45 .columns-4 .MuiAccordionSummary-content {
   grid-template-columns: 0.5fr 1fr 2fr 2fr;
 }
 
-.emotion-43 .MuiAccordionDetails-root {
+.emotion-45 .MuiAccordionDetails-root {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.emotion-44 {
+.emotion-46 {
   all: unset;
 }
 
-.emotion-45 {
+.emotion-47 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1062,44 +1055,44 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   height: 48px;
 }
 
-.emotion-45::-moz-focus-inner {
+.emotion-47::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-45.Mui-disabled {
+.emotion-47.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-45 {
+  .emotion-47 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-45.Mui-focusVisible {
+.emotion-47.Mui-focusVisible {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-45.Mui-disabled {
+.emotion-47.Mui-disabled {
   opacity: 0.38;
 }
 
-.emotion-45:hover:not(.Mui-disabled) {
+.emotion-47:hover:not(.Mui-disabled) {
   cursor: pointer;
 }
 
-.emotion-45.Mui-expanded {
+.emotion-47.Mui-expanded {
   min-height: 64px;
 }
 
-.emotion-45.Mui-expanded {
+.emotion-47.Mui-expanded {
   height: 48px;
   min-height: 48px;
 }
 
-.emotion-46 {
+.emotion-48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1118,19 +1111,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   align-items: center;
 }
 
-.emotion-46.Mui-expanded {
+.emotion-48.Mui-expanded {
   margin: 20px 0;
 }
 
-.emotion-46.Mui-expanded {
+.emotion-48.Mui-expanded {
   margin: 0;
 }
 
-.emotion-46>:last-child {
+.emotion-48>:last-child {
   padding-right: 12px;
 }
 
-.emotion-47 {
+.emotion-49 {
   height: 0;
   overflow: hidden;
   -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -1138,7 +1131,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   visibility: hidden;
 }
 
-.emotion-48 {
+.emotion-50 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1146,18 +1139,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   width: 100%;
 }
 
-.emotion-49 {
+.emotion-51 {
   width: 100%;
 }
 
-.emotion-50 {
+.emotion-52 {
   padding: 8px 16px 16px;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
 }
 
-.emotion-51 {
+.emotion-53 {
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
@@ -1165,7 +1158,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   margin-top: 16px;
 }
 
-.emotion-52 {
+.emotion-54 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1225,33 +1218,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   padding: 10px 15px;
 }
 
-.emotion-52::-moz-focus-inner {
+.emotion-54::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-52.Mui-disabled {
+.emotion-54.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-52 {
+  .emotion-54 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-52:hover {
+.emotion-54:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-52.Mui-disabled {
+.emotion-54.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-52:hover {
+  .emotion-54:hover {
     --variant-containedBg: rgb(65, 10, 46);
     --variant-textBg: rgba(93, 15, 67, 0.04);
     --variant-outlinedBorder: #5d0f43;
@@ -1259,19 +1252,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   }
 }
 
-.emotion-52.MuiButton-loading {
+.emotion-54.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-52:hover {
+.emotion-54:hover {
   colors: #337a87;
 }
 
-.emotion-52.MuiButton-text {
+.emotion-54.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-53 {
+.emotion-55 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1285,11 +1278,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-54 {
+.emotion-56 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1307,87 +1299,139 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-54.Mui-disabled {
+.emotion-56.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-54 {
-  margin-top: 16px;
+.emotion-56:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-54::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+@media (hover: none) {
+  .emotion-56:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
 }
 
-.emotion-54.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
+.emotion-56.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-54.Mui-error::before,
-.emotion-54.Mui-error::after {
-  border-bottom-color: #ab1000;
+.emotion-56.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-54::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+.emotion-56.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-54:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-56.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-@media (hover: none) {
-  .emotion-54:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  }
+.emotion-57 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+}
+
+.emotion-57::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-57::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-57::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-57:focus {
+  outline: 0;
+}
+
+.emotion-57:invalid {
+  box-shadow: none;
+}
+
+.emotion-57::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-57::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-57::-moz-placeholder {
+  opacity: 0!important;
 }
 
-.emotion-54.Mui-disabled:before {
-  border-bottom-style: dotted;
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-57::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-57:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-57:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-57:focus::-ms-input-placeholder {
+  opacity: 0.42;
 }
 
-.emotion-54::after {
-  border-bottom: 2px solid #337a87;
+.emotion-57.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-54:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-57:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
 }
 
-.emotion-54:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-57:-webkit-autofill {
+  border-radius: inherit;
 }
 
-.emotion-54:after {
-  border-bottom: 2px solid #337a87;
+.emotion-65 {
+  min-width: 240px;
 }
 
-.emotion-59 {
+.emotion-66 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1443,59 +1487,59 @@ label+.emotion-54 {
   background-color: #5d0f43;
 }
 
-.emotion-59::-moz-focus-inner {
+.emotion-66::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-59.Mui-disabled {
+.emotion-66.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-59 {
+  .emotion-66 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-59:active {
+.emotion-66:active {
   box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
 }
 
-.emotion-59:hover {
+.emotion-66:hover {
   background-color: #f5f5f5;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover: none) {
-  .emotion-59:hover {
+  .emotion-66:hover {
     background-color: #e6f2f1;
   }
 }
 
-.emotion-59.Mui-focusVisible {
+.emotion-66.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-59:hover {
+.emotion-66:hover {
   background-color: rgb(65, 10, 46);
 }
 
 @media (hover: none) {
-  .emotion-59:hover {
+  .emotion-66:hover {
     background-color: #5d0f43;
   }
 }
 
-.emotion-59.Mui-disabled {
+.emotion-66.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-61 {
+.emotion-69 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1554,57 +1598,57 @@ label+.emotion-54 {
   font-weight: bold;
 }
 
-.emotion-61::-moz-focus-inner {
+.emotion-69::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-61.Mui-disabled {
+.emotion-69.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-61 {
+  .emotion-69 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-61:hover {
+.emotion-69:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-61.Mui-disabled {
+.emotion-69.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-61:hover {
+.emotion-69:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-61:hover {
+  .emotion-69:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-61:active {
+.emotion-69:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-61.Mui-focusVisible {
+.emotion-69.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-61.Mui-disabled {
+.emotion-69.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-61:hover {
+  .emotion-69:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -1612,19 +1656,19 @@ label+.emotion-54 {
   }
 }
 
-.emotion-61.MuiButton-loading {
+.emotion-69.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-61:hover {
+.emotion-69:hover {
   colors: #337a87;
 }
 
-.emotion-61.MuiButton-text {
+.emotion-69.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-62 {
+.emotion-70 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1684,33 +1728,33 @@ label+.emotion-54 {
   padding: 10px 15px;
 }
 
-.emotion-62::-moz-focus-inner {
+.emotion-70::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-62.Mui-disabled {
+.emotion-70.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-62 {
+  .emotion-70 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-62:hover {
+.emotion-70:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-62.Mui-disabled {
+.emotion-70.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-62:hover {
+  .emotion-70:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -1718,19 +1762,19 @@ label+.emotion-54 {
   }
 }
 
-.emotion-62.MuiButton-loading {
+.emotion-70.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-62:hover {
+.emotion-70:hover {
   colors: #337a87;
 }
 
-.emotion-62.MuiButton-text {
+.emotion-70.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-63 {
+.emotion-71 {
   position: fixed;
   bottom: 52px;
   right: 52px;
@@ -1739,13 +1783,13 @@ label+.emotion-54 {
   pointer-events: none;
 }
 
-.emotion-63 .MuiSpeedDialAction-staticTooltipLabel {
+.emotion-71 .MuiSpeedDialAction-staticTooltipLabel {
   min-width: -webkit-max-content;
   min-width: -moz-max-content;
   min-width: max-content;
 }
 
-.emotion-64 {
+.emotion-72 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1760,12 +1804,12 @@ label+.emotion-54 {
   justify-content: flex-end;
 }
 
-.emotion-65 {
+.emotion-73 {
   margin-right: 16px;
   margin-bottom: 32px;
 }
 
-.emotion-66 {
+.emotion-74 {
   z-index: 1050;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1782,7 +1826,7 @@ label+.emotion-54 {
   margin: 16px;
 }
 
-.emotion-66 .MuiSpeedDial-actions {
+.emotion-74 .MuiSpeedDial-actions {
   -webkit-flex-direction: column-reverse;
   -ms-flex-direction: column-reverse;
   flex-direction: column-reverse;
@@ -1790,7 +1834,7 @@ label+.emotion-54 {
   padding-bottom: 48px;
 }
 
-.emotion-67 {
+.emotion-75 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1845,68 +1889,68 @@ label+.emotion-54 {
   pointer-events: auto;
 }
 
-.emotion-67::-moz-focus-inner {
+.emotion-75::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-67.Mui-disabled {
+.emotion-75.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-67 {
+  .emotion-75 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-67:active {
+.emotion-75:active {
   box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
 }
 
-.emotion-67:hover {
+.emotion-75:hover {
   background-color: #f5f5f5;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover: none) {
-  .emotion-67:hover {
+  .emotion-75:hover {
     background-color: #e6f2f1;
   }
 }
 
-.emotion-67.Mui-focusVisible {
+.emotion-75.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-67:hover {
+.emotion-75:hover {
   background-color: rgb(35, 85, 94);
 }
 
 @media (hover: none) {
-  .emotion-67:hover {
+  .emotion-75:hover {
     background-color: #337a87;
   }
 }
 
-.emotion-67.Mui-disabled {
+.emotion-75.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-68 {
+.emotion-76 {
   height: 24px;
 }
 
-.emotion-68 .MuiSpeedDialIcon-icon {
+.emotion-76 .MuiSpeedDialIcon-icon {
   -webkit-transition: -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-68 .MuiSpeedDialIcon-openIcon {
+.emotion-76 .MuiSpeedDialIcon-openIcon {
   position: absolute;
   -webkit-transition: -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -1917,7 +1961,7 @@ label+.emotion-54 {
   transform: rotate(-45deg);
 }
 
-.emotion-70 {
+.emotion-78 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1928,7 +1972,7 @@ label+.emotion-54 {
   pointer-events: none;
 }
 
-.emotion-71 {
+.emotion-79 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1940,13 +1984,13 @@ label+.emotion-54 {
   align-items: center;
 }
 
-.emotion-71 .MuiSpeedDialAction-staticTooltipLabel {
+.emotion-79 .MuiSpeedDialAction-staticTooltipLabel {
   -webkit-transition: -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   opacity: 1;
 }
 
-.emotion-71 .MuiSpeedDialAction-staticTooltipLabel {
+.emotion-79 .MuiSpeedDialAction-staticTooltipLabel {
   opacity: 0;
   -webkit-transform: scale(0.5);
   -moz-transform: scale(0.5);
@@ -1954,13 +1998,13 @@ label+.emotion-54 {
   transform: scale(0.5);
 }
 
-.emotion-71 .MuiSpeedDialAction-staticTooltipLabel {
+.emotion-79 .MuiSpeedDialAction-staticTooltipLabel {
   transform-origin: 100% 50%;
   right: 100%;
   margin-right: 8px;
 }
 
-.emotion-72 {
+.emotion-80 {
   position: absolute;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -1974,7 +2018,7 @@ label+.emotion-54 {
   word-break: keep-all;
 }
 
-.emotion-73 {
+.emotion-81 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2039,53 +2083,53 @@ label+.emotion-54 {
   transform: scale(0);
 }
 
-.emotion-73::-moz-focus-inner {
+.emotion-81::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-73.Mui-disabled {
+.emotion-81.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-73 {
+  .emotion-81 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-73:active {
+.emotion-81:active {
   box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
 }
 
-.emotion-73:hover {
+.emotion-81:hover {
   background-color: #f5f5f5;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover: none) {
-  .emotion-73:hover {
+  .emotion-81:hover {
     background-color: #e6f2f1;
   }
 }
 
-.emotion-73.Mui-focusVisible {
+.emotion-81.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-73.Mui-disabled {
+.emotion-81.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-73:hover {
+.emotion-81:hover {
   background-color: rgb(216, 216, 216);
 }
 
-.emotion-86 {
+.emotion-94 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2102,7 +2146,7 @@ label+.emotion-54 {
   font-size: inherit;
 }
 
-.emotion-86 iconButton {
+.emotion-94 iconButton {
   margin-right: 8px;
 }
 
@@ -2370,10 +2414,10 @@ label+.emotion-54 {
               </b>
             </div>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-27"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-27"
             >
               <input
-                class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-28"
+                class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-28"
                 disabled=""
                 id="a1-id-input"
                 placeholder="a1..."
@@ -2408,6 +2452,21 @@ label+.emotion-54 {
                   Edit
                 </button>
               </div>
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-33"
+              >
+                <legend
+                  class="emotion-34"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="notranslate"
+                  >
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
             </div>
           </div>
         </div>
@@ -2433,7 +2492,7 @@ label+.emotion-54 {
             <svg
               aria-hidden="true"
               aria-label="Copy to clipboard"
-              class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-34"
+              class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-36"
               data-mui-internal-clone-element="true"
               data-testid="FileCopyOutlinedIcon"
               focusable="false"
@@ -2462,7 +2521,7 @@ label+.emotion-54 {
             <svg
               aria-hidden="true"
               aria-label="Copy to clipboard"
-              class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-34"
+              class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-36"
               data-mui-internal-clone-element="true"
               data-testid="FileCopyOutlinedIcon"
               focusable="false"
@@ -2491,7 +2550,7 @@ label+.emotion-54 {
             <svg
               aria-hidden="true"
               aria-label="Copy to clipboard"
-              class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-34"
+              class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-36"
               data-mui-internal-clone-element="true"
               data-testid="FileCopyOutlinedIcon"
               focusable="false"
@@ -2544,7 +2603,7 @@ label+.emotion-54 {
         </div>
         <div />
         <div
-          class="emotion-38"
+          class="emotion-40"
         >
           <div
             class="margin-bottom-small flexbox space-between"
@@ -2559,7 +2618,7 @@ label+.emotion-54 {
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-39"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-41"
                   data-testid="HelpIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -2569,16 +2628,16 @@ label+.emotion-54 {
                   />
                 </svg>
                 <div
-                  class="emotion-40 "
+                  class="emotion-42 "
                 />
               </div>
             </div>
           </div>
           <div
-            class="authsets emotion-41"
+            class="authsets emotion-43"
           >
             <div
-              class="header columns-5 emotion-42"
+              class="header columns-5 emotion-44"
             >
               <div
                 class="columnHeader"
@@ -2608,20 +2667,20 @@ label+.emotion-54 {
               class="body relative"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters emotion-43"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters emotion-45"
                 style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
               >
                 <h3
-                  class="MuiAccordion-heading emotion-44"
+                  class="MuiAccordion-heading emotion-46"
                 >
                   <button
                     aria-expanded="false"
-                    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters columns-5 emotion-45"
+                    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters columns-5 emotion-47"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters emotion-46"
+                      class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters emotion-48"
                     >
                       <div
                         class="capitalized"
@@ -2658,21 +2717,21 @@ label+.emotion-54 {
                   </button>
                 </h3>
                 <div
-                  class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden emotion-47"
+                  class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden emotion-49"
                   style="min-height: 0px;"
                 >
                   <div
-                    class="MuiCollapse-wrapper MuiCollapse-vertical emotion-48"
+                    class="MuiCollapse-wrapper MuiCollapse-vertical emotion-50"
                   >
                     <div
-                      class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-49"
+                      class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-51"
                     >
                       <div
                         class="MuiAccordion-region"
                         role="region"
                       >
                         <div
-                          class="MuiAccordionDetails-root emotion-50"
+                          class="MuiAccordionDetails-root emotion-52"
                         >
                           <div
                             style="flex-grow: 1;"
@@ -2691,10 +2750,10 @@ label+.emotion-54 {
             </div>
           </div>
           <div
-            class="flexbox emotion-51"
+            class="flexbox emotion-53"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary emotion-52"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorSecondary emotion-54"
               id=":r9:"
               tabindex="0"
               type="button"
@@ -2737,33 +2796,63 @@ label+.emotion-54 {
               class="key-value-container relative"
             >
               <div
-                class="MuiFormControl-root emotion-53"
+                class="MuiFormControl-root emotion-55"
               >
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-54"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-56"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input emotion-28"
+                    class="MuiInputBase-input MuiOutlinedInput-input emotion-57"
                     placeholder="Key"
                     type="text"
                     value=""
                   />
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-33"
+                  >
+                    <legend
+                      class="emotion-34"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="notranslate"
+                      >
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
               </div>
               <div
-                class="MuiFormControl-root emotion-53"
+                class="MuiFormControl-root emotion-55"
               >
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-54"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-56"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input emotion-28"
+                    class="MuiInputBase-input MuiOutlinedInput-input emotion-57"
                     placeholder="Value"
                     type="text"
                     value=""
                   />
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-33"
+                  >
+                    <legend
+                      class="emotion-34"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="notranslate"
+                      >
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
               </div>
               <span />
@@ -2772,10 +2861,10 @@ label+.emotion-54 {
               class="key-value-container"
             >
               <div
-                style="min-width: 240px;"
+                class="emotion-65"
               >
                 <button
-                  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary Mui-disabled MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary emotion-59"
+                  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary Mui-disabled MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary emotion-66"
                   disabled=""
                   style="margin-bottom: 10px;"
                   tabindex="-1"
@@ -2795,7 +2884,7 @@ label+.emotion-54 {
                 </button>
               </div>
               <div
-                style="min-width: 240px;"
+                class="emotion-65"
               />
               <div />
             </div>
@@ -2805,16 +2894,15 @@ label+.emotion-54 {
             style="justify-content: flex-end;"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-61"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary margin-right-small emotion-69"
               id=":rb:"
-              style="margin-right: 16px;"
               tabindex="0"
               type="button"
             >
               Save
             </button>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-62"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-70"
               id=":rc:"
               tabindex="0"
               type="button"
@@ -2825,21 +2913,21 @@ label+.emotion-54 {
         </div>
       </div>
       <div
-        class="emotion-63"
+        class="emotion-71"
       >
         <div
           class="relative"
         >
           <div
-            class="emotion-64"
+            class="emotion-72"
           >
             <div
-              class="emotion-65"
+              class="emotion-73"
             >
               Device actions
             </div>
             <div
-              class="MuiSpeedDial-root MuiSpeedDial-directionUp emotion-66"
+              class="MuiSpeedDial-root MuiSpeedDial-directionUp emotion-74"
               role="presentation"
             >
               <button
@@ -2847,13 +2935,13 @@ label+.emotion-54 {
                 aria-expanded="false"
                 aria-haspopup="true"
                 aria-label="device-actions"
-                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary MuiSpeedDial-fab emotion-67"
+                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-primary MuiSpeedDial-fab emotion-75"
                 style="transform: none; webkit-transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
                 tabindex="0"
                 type="button"
               >
                 <span
-                  class="MuiSpeedDialIcon-root emotion-68"
+                  class="MuiSpeedDialIcon-root emotion-76"
                 >
                   <svg
                     aria-hidden="true"
@@ -2870,17 +2958,17 @@ label+.emotion-54 {
               </button>
               <div
                 aria-orientation="vertical"
-                class="MuiSpeedDial-actions MuiSpeedDial-actionsClosed emotion-70"
+                class="MuiSpeedDial-actions MuiSpeedDial-actionsClosed emotion-78"
                 id="device-actions-actions"
                 role="menu"
               >
                 <span
                   aria-label="dismiss"
-                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-71"
+                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-79"
                   id="device-actions-action-0"
                 >
                   <span
-                    class="MuiSpeedDialAction-staticTooltipLabel emotion-72"
+                    class="MuiSpeedDialAction-staticTooltipLabel emotion-80"
                     id="device-actions-action-0-label"
                     style="transition-delay: 150ms;"
                   >
@@ -2888,7 +2976,7 @@ label+.emotion-54 {
                   </span>
                   <button
                     aria-labelledby="device-actions-action-0-label"
-                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-73"
+                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-81"
                     role="menuitem"
                     style="transition-delay: 150ms;"
                     tabindex="-1"
@@ -2909,11 +2997,11 @@ label+.emotion-54 {
                 </span>
                 <span
                   aria-label="reject"
-                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-71"
+                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-79"
                   id="device-actions-action-1"
                 >
                   <span
-                    class="MuiSpeedDialAction-staticTooltipLabel emotion-72"
+                    class="MuiSpeedDialAction-staticTooltipLabel emotion-80"
                     id="device-actions-action-1-label"
                     style="transition-delay: 120ms;"
                   >
@@ -2921,7 +3009,7 @@ label+.emotion-54 {
                   </span>
                   <button
                     aria-labelledby="device-actions-action-1-label"
-                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-73"
+                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-81"
                     role="menuitem"
                     style="transition-delay: 120ms;"
                     tabindex="-1"
@@ -2942,11 +3030,11 @@ label+.emotion-54 {
                 </span>
                 <span
                   aria-label="group-change"
-                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-71"
+                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-79"
                   id="device-actions-action-2"
                 >
                   <span
-                    class="MuiSpeedDialAction-staticTooltipLabel emotion-72"
+                    class="MuiSpeedDialAction-staticTooltipLabel emotion-80"
                     id="device-actions-action-2-label"
                     style="transition-delay: 90ms;"
                   >
@@ -2954,7 +3042,7 @@ label+.emotion-54 {
                   </span>
                   <button
                     aria-labelledby="device-actions-action-2-label"
-                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-73"
+                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-81"
                     role="menuitem"
                     style="transition-delay: 90ms;"
                     tabindex="-1"
@@ -2975,11 +3063,11 @@ label+.emotion-54 {
                 </span>
                 <span
                   aria-label="group-remove"
-                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-71"
+                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-79"
                   id="device-actions-action-3"
                 >
                   <span
-                    class="MuiSpeedDialAction-staticTooltipLabel emotion-72"
+                    class="MuiSpeedDialAction-staticTooltipLabel emotion-80"
                     id="device-actions-action-3-label"
                     style="transition-delay: 60ms;"
                   >
@@ -2987,7 +3075,7 @@ label+.emotion-54 {
                   </span>
                   <button
                     aria-labelledby="device-actions-action-3-label"
-                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-73"
+                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-81"
                     role="menuitem"
                     style="transition-delay: 60ms;"
                     tabindex="-1"
@@ -2995,7 +3083,7 @@ label+.emotion-54 {
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-86"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-94"
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
@@ -3007,11 +3095,11 @@ label+.emotion-54 {
                 </span>
                 <span
                   aria-label="create-deployment"
-                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-71"
+                  class="MuiSpeedDialAction-staticTooltip MuiSpeedDialAction-tooltipPlacementLeft MuiSpeedDialAction-staticTooltipClosed emotion-79"
                   id="device-actions-action-4"
                 >
                   <span
-                    class="MuiSpeedDialAction-staticTooltipLabel emotion-72"
+                    class="MuiSpeedDialAction-staticTooltipLabel emotion-80"
                     id="device-actions-action-4-label"
                     style="transition-delay: 30ms;"
                   >
@@ -3019,7 +3107,7 @@ label+.emotion-54 {
                   </span>
                   <button
                     aria-labelledby="device-actions-action-4-label"
-                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-73"
+                    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-default MuiSpeedDialAction-fab MuiSpeedDialAction-fabClosed emotion-81"
                     role="menuitem"
                     style="transition-delay: 30ms;"
                     tabindex="-1"
diff --git a/frontend/src/js/components/devices/device-details/DeviceTags.tsx b/frontend/src/js/components/devices/device-details/DeviceTags.tsx
index e0365746..85a62587 100644
--- a/frontend/src/js/components/devices/device-details/DeviceTags.tsx
+++ b/frontend/src/js/components/devices/device-details/DeviceTags.tsx
@@ -15,7 +15,6 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Button } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
 
 import ConfigurationObject from '@northern.tech/common-ui/ConfigurationObject';
 import { EditButton } from '@northern.tech/common-ui/Confirm';
@@ -35,7 +34,6 @@ const configHelpTipsMap = {
 
 export const DeviceTags = ({ device, setSnackbar, userCapabilities }) => {
   const { canWriteDevices } = userCapabilities;
-  const theme = useTheme();
   const [changedTags, setChangedTags] = useState({});
   const [editableTags, setEditableTags] = useState();
   const [isEditDisabled, setIsEditDisabled] = useState(!canWriteDevices);
@@ -109,7 +107,7 @@ export const DeviceTags = ({ device, setSnackbar, userCapabilities }) => {
               reset={shouldUpdateEditor}
             />
             <div className="flexbox center-aligned margin-bottom-small" style={{ justifyContent: 'flex-end' }}>
-              <Button color="primary" onClick={onSubmit} variant="contained" style={{ marginRight: theme.spacing(2) }}>
+              <Button className="margin-right-small" color="primary" onClick={onSubmit} variant="contained">
                 Save
               </Button>
               <Button onClick={onCancel}>Cancel</Button>
diff --git a/frontend/src/js/components/devices/device-details/Monitoring.tsx b/frontend/src/js/components/devices/device-details/Monitoring.tsx
index 99402ef1..b8dc8c2b 100644
--- a/frontend/src/js/components/devices/device-details/Monitoring.tsx
+++ b/frontend/src/js/components/devices/device-details/Monitoring.tsx
@@ -14,8 +14,6 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useTheme } from '@mui/material/styles';
-
 import DocsLink from '@northern.tech/common-ui/DocsLink';
 import EnterpriseNotification from '@northern.tech/common-ui/EnterpriseNotification';
 import Pagination from '@northern.tech/common-ui/Pagination';
@@ -42,11 +40,11 @@ export const DeviceMonitorsMissingNote = () => (
   </DeviceConnectionNote>
 );
 
-const MonitoringAlert = ({ alert, onDetailsClick, style }) => {
+const MonitoringAlert = ({ alert, className = '', onDetailsClick, style }) => {
   const { description, lines_before = [], lines_after = [], line_matching = '' } = alert.subject.details;
   const lines = [...lines_before, line_matching, ...lines_after].filter(i => i);
   return (
-    <div className="monitoring-alert column-data" style={style}>
+    <div className={`monitoring-alert column-data ${className}`} style={style}>
       {(severityMap[alert.level] ?? severityMap[monitoringSeverities.UNKNOWN]).icon}
       <div className="key muted">
         <b>{alert.name}</b>
@@ -60,7 +58,6 @@ const MonitoringAlert = ({ alert, onDetailsClick, style }) => {
 
 const paginationCutoff = defaultPerPage;
 export const DeviceMonitoring = ({ device, onDetailsClick }) => {
-  const theme = useTheme();
   const { hasMonitor } = useSelector(state => getTenantCapabilities(state));
   const { alerts = [], latest: latestAlerts = [] } = useSelector(state => state.monitor.alerts.byDeviceId[device.id]) ?? {};
   const alertListState = useSelector(state => state.monitor.alerts.alertList) ?? {};
@@ -89,7 +86,7 @@ export const DeviceMonitoring = ({ device, onDetailsClick }) => {
           <>
             {hasMonitorsDefined && !latestAlerts.length && <NoAlertsHeaderNotification />}
             {latestAlerts.map(alert => (
-              <MonitoringAlert alert={alert} key={alert.id} onDetailsClick={onDetailsClick} style={{ marginBottom: theme.spacing() }} />
+              <MonitoringAlert className="margin-bottom-x-small" alert={alert} key={alert.id} onDetailsClick={onDetailsClick} />
             ))}
             {isOffline && <DeviceOfflineHeaderNotification offlineThresholdSettings={offlineThresholdSettings} />}
           </>
diff --git a/frontend/src/js/components/devices/device-details/__snapshots__/Connection.test.tsx.snap b/frontend/src/js/components/devices/device-details/__snapshots__/Connection.test.tsx.snap
index 5a69e077..08c2fda7 100644
--- a/frontend/src/js/components/devices/device-details/__snapshots__/Connection.test.tsx.snap
+++ b/frontend/src/js/components/devices/device-details/__snapshots__/Connection.test.tsx.snap
@@ -787,7 +787,6 @@ exports[`DeviceConnection Component renders correctly when connected 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -810,6 +809,8 @@ exports[`DeviceConnection Component renders correctly when connected 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-23.Mui-disabled {
@@ -817,77 +818,30 @@ exports[`DeviceConnection Component renders correctly when connected 1`] = `
   cursor: default;
 }
 
-label+.emotion-23 {
-  margin-top: 16px;
-}
-
-.emotion-23::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-23.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-23.Mui-error::before,
-.emotion-23.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-23::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-23:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-23:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-23:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-23:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-23.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-23.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-23::after {
-  border-bottom: 2px solid #337a87;
+.emotion-23.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-23:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-23.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-23:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-23:after {
-  border-bottom: 2px solid #337a87;
+.emotion-23.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-24 {
@@ -908,6 +862,8 @@ label+.emotion-23 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-24::-webkit-input-placeholder {
@@ -979,6 +935,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-24:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1091,6 +1051,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input-
 }
 
 .emotion-29 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-30 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-31 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1149,57 +1137,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input-
   font-weight: bold;
 }
 
-.emotion-29::-moz-focus-inner {
+.emotion-31::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-29.Mui-disabled {
+.emotion-31.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-29 {
+  .emotion-31 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-29:hover {
+.emotion-31:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-29.Mui-disabled {
+.emotion-31.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-29:hover {
+.emotion-31:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-29:hover {
+  .emotion-31:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-29:active {
+.emotion-31:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-29.Mui-focusVisible {
+.emotion-31.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-29.Mui-disabled {
+.emotion-31.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-29:hover {
+  .emotion-31:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -1207,15 +1195,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input-
   }
 }
 
-.emotion-29.MuiButton-loading {
+.emotion-31.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-29:hover {
+.emotion-31:hover {
   colors: #337a87;
 }
 
-.emotion-29.MuiButton-text {
+.emotion-31.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -1641,18 +1629,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input-
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-22"
               >
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd emotion-23"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd emotion-23"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-24"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-24"
                     id=":rl:"
                     placeholder="Example: /opt/installed-by-single-file"
                     type="text"
                     value=""
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-25"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-25"
                   >
                     <button
                       aria-label="Paste"
@@ -1678,10 +1666,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-24:focus::-ms-input-
                       </svg>
                     </button>
                   </div>
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-29"
+                  >
+                    <legend
+                      class="emotion-30"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="notranslate"
+                      >
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
               </div>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-29"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-31"
                 disabled=""
                 id=":ro:"
                 tabindex="-1"
diff --git a/frontend/src/js/components/devices/device-details/__snapshots__/Deployments.test.tsx.snap b/frontend/src/js/components/devices/device-details/__snapshots__/Deployments.test.tsx.snap
index 813e2561..d0790920 100644
--- a/frontend/src/js/components/devices/device-details/__snapshots__/Deployments.test.tsx.snap
+++ b/frontend/src/js/components/devices/device-details/__snapshots__/Deployments.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`Deployments Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
   font-size: 13px;
   margin-left: 4px;
   margin-top: 2px;
@@ -29,8 +30,30 @@ exports[`Deployments Component renders correctly 1`] = `
   cursor: default;
 }
 
-.emotion-0>div {
-  padding-left: 4px;
+.emotion-0:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-0:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-0.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-0.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-1 {
@@ -42,6 +65,7 @@ exports[`Deployments Component renders correctly 1`] = `
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -59,6 +83,7 @@ exports[`Deployments Component renders correctly 1`] = `
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-1:focus {
@@ -78,9 +103,12 @@ exports[`Deployments Component renders correctly 1`] = `
   background-color: #fff;
 }
 
+.emotion-1:focus {
+  border-radius: 4px;
+}
+
 .emotion-1.emotion-1.emotion-1 {
-  padding-right: 24px;
-  min-width: 16px;
+  padding-right: 32px;
 }
 
 .emotion-1.MuiSelect-select {
@@ -160,6 +188,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-1:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-2 {
   bottom: 0;
   left: 0;
@@ -190,6 +222,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
 .emotion-3 iconButton {
@@ -201,28 +234,56 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
 }
 
 .emotion-4 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-5 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-6 {
   min-height: 10vh;
 }
 
-.emotion-4 .deleted>.MuiTableCell-root,
-.emotion-4 .deleted a {
+.emotion-6 .deleted>.MuiTableCell-root,
+.emotion-6 .deleted a {
   background: #f7f7f7;
   color: #bcbcbc;
 }
 
-.emotion-4 .deleted>.MuiTableCell-root .MuiButton-root,
-.emotion-4 .deleted a .MuiButton-root {
+.emotion-6 .deleted>.MuiTableCell-root .MuiButton-root,
+.emotion-6 .deleted a .MuiButton-root {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-5 {
+.emotion-7 {
   display: table;
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-.emotion-5 caption {
+.emotion-7 caption {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -233,30 +294,30 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   caption-side: bottom;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: table-header-group;
 }
 
-.emotion-7 {
+.emotion-9 {
   color: inherit;
   display: table-row;
   vertical-align: middle;
   outline: 0;
 }
 
-.emotion-7.MuiTableRow-hover:hover {
+.emotion-9.MuiTableRow-hover:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-.emotion-7.Mui-selected {
+.emotion-9.Mui-selected {
   background-color: rgba(51, 122, 135, 0.08);
 }
 
-.emotion-7.Mui-selected:hover {
+.emotion-9.Mui-selected:hover {
   background-color: rgba(51, 122, 135, 0.12);
 }
 
-.emotion-8 {
+.emotion-10 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -275,11 +336,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   line-height: 1.15rem;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: table-row-group;
 }
 
-.emotion-16 {
+.emotion-18 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -294,7 +355,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   height: 48px;
 }
 
-.emotion-21 {
+.emotion-23 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -354,33 +415,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-21::-moz-focus-inner {
+.emotion-23::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-21.Mui-disabled {
+.emotion-23.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-21 {
+  .emotion-23 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-21:hover {
+.emotion-23:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-21.Mui-disabled {
+.emotion-23.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-21:hover {
+  .emotion-23:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -388,29 +449,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   }
 }
 
-.emotion-21.MuiButton-loading {
+.emotion-23.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-21:hover {
+.emotion-23:hover {
   colors: #337a87;
 }
 
-.emotion-21.MuiButton-text {
+.emotion-23.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-23 {
+.emotion-25 {
   overflow: auto;
   color: rgba(10, 10, 11, 0.78);
   font-size: 0.8125rem;
 }
 
-.emotion-23:last-child {
+.emotion-25:last-child {
   padding: 0;
 }
 
-.emotion-24 {
+.emotion-26 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -428,7 +489,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
 }
 
 @media (min-width:600px) {
-  .emotion-24 {
+  .emotion-26 {
     padding-left: 24px;
     padding-right: 24px;
   }
@@ -436,45 +497,45 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
 
 @media (min-width:0px) {
   @media (orientation: landscape) {
-    .emotion-24 {
+    .emotion-26 {
       min-height: 48px;
     }
   }
 }
 
 @media (min-width:600px) {
-  .emotion-24 {
+  .emotion-26 {
     min-height: 64px;
   }
 }
 
 @media (min-width:0px) and (orientation: landscape) {
-  .emotion-24 {
+  .emotion-26 {
     min-height: 52px;
   }
 }
 
 @media (min-width:600px) {
-  .emotion-24 {
+  .emotion-26 {
     min-height: 52px;
     padding-right: 2px;
   }
 }
 
-.emotion-24 .MuiTablePagination-actions {
+.emotion-26 .MuiTablePagination-actions {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: 20px;
 }
 
-.emotion-25 {
+.emotion-27 {
   -webkit-flex: 1 1 100%;
   -ms-flex: 1 1 100%;
   flex: 1 1 100%;
 }
 
-.emotion-26 {
+.emotion-28 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -484,7 +545,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   flex-shrink: 0;
 }
 
-.emotion-27 {
+.emotion-29 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -510,12 +571,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   margin-left: 8px;
 }
 
-.emotion-27.Mui-disabled {
+.emotion-29.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-.emotion-27 .MuiTablePagination-select {
+.emotion-29 .MuiTablePagination-select {
   padding-left: 8px;
   padding-right: 24px;
   text-align: right;
@@ -523,7 +584,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   text-align-last: right;
 }
 
-.emotion-28 {
+.emotion-30 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -551,29 +612,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   animation-duration: 10ms;
 }
 
-.emotion-28:focus {
+.emotion-30:focus {
   border-radius: 0;
 }
 
-.emotion-28.Mui-disabled {
+.emotion-30.Mui-disabled {
   cursor: default;
 }
 
-.emotion-28[multiple] {
+.emotion-30[multiple] {
   height: auto;
 }
 
-.emotion-28:not([multiple]) option,
-.emotion-28:not([multiple]) optgroup {
+.emotion-30:not([multiple]) option,
+.emotion-30:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-28.emotion-28.emotion-28 {
+.emotion-30.emotion-30.emotion-30 {
   padding-right: 24px;
   min-width: 16px;
 }
 
-.emotion-28.MuiSelect-select {
+.emotion-30.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -581,76 +642,106 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   overflow: hidden;
 }
 
-.emotion-28::-webkit-input-placeholder {
+.emotion-30::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-28::-moz-placeholder {
+.emotion-30::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-28::-ms-input-placeholder {
+.emotion-30::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-28:focus {
+.emotion-30:focus {
   outline: 0;
 }
 
-.emotion-28:invalid {
+.emotion-30:invalid {
   box-shadow: none;
 }
 
-.emotion-28::-webkit-search-decoration {
+.emotion-30::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-28.Mui-disabled {
+.emotion-30.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-28:-webkit-autofill {
+.emotion-30:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-31 {
+.emotion-32 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  fill: currentColor;
+  font-size: 1.3929rem;
+  position: absolute;
+  right: 0;
+  top: calc(50% - .5em);
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.emotion-32 iconButton {
+  margin-right: 8px;
+}
+
+.emotion-32.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-33 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -660,7 +751,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   flex-shrink: 0;
 }
 
-.emotion-32 {
+.emotion-34 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -710,42 +801,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-32::-moz-focus-inner {
+.emotion-34::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-32.Mui-disabled {
+.emotion-34.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-32 {
+  .emotion-34 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-32:hover {
+.emotion-34:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-32:hover {
+  .emotion-34:hover {
     background-color: transparent;
   }
 }
 
-.emotion-32.Mui-disabled {
+.emotion-34.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-32.MuiIconButton-loading {
+.emotion-34.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-33 {
+.emotion-35 {
   display: none;
   position: absolute;
   visibility: visible;
@@ -758,7 +849,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-34 {
+.emotion-36 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -775,18 +866,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   font-size: 1.3929rem;
 }
 
-.emotion-34 iconButton {
+.emotion-36 iconButton {
   margin-right: 8px;
 }
 
-.emotion-38 {
+.emotion-40 {
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
 }
 
-.emotion-39 {
+.emotion-41 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -845,57 +936,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   font-weight: bold;
 }
 
-.emotion-39::-moz-focus-inner {
+.emotion-41::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-39.Mui-disabled {
+.emotion-41.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-39 {
+  .emotion-41 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-39:hover {
+.emotion-41:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-39.Mui-disabled {
+.emotion-41.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-39:hover {
+.emotion-41:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-39:hover {
+  .emotion-41:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-39:active {
+.emotion-41:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-39.Mui-focusVisible {
+.emotion-41.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-39.Mui-disabled {
+.emotion-41.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-39:hover {
+  .emotion-41:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -903,15 +994,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
   }
 }
 
-.emotion-39.MuiButton-loading {
+.emotion-41.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-39:hover {
+.emotion-41:hover {
   colors: #337a87;
 }
 
-.emotion-39.MuiButton-text {
+.emotion-41.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -932,12 +1023,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
     >
       Status:
       <div
-        class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary MuiSelect-root emotion-0"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiSelect-root emotion-0"
       >
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-1"
+          class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-1"
           role="combobox"
           tabindex="0"
         >
@@ -952,7 +1043,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-3"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-3"
           data-testid="ArrowDropDownIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -961,63 +1052,78 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
             d="M7 10l5 5 5-5z"
           />
         </svg>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-4"
+        >
+          <legend
+            class="emotion-5"
+          >
+            <span
+              aria-hidden="true"
+              class="notranslate"
+            >
+              ​
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
   <div
-    class="emotion-4"
+    class="emotion-6"
   >
     <table
-      class="MuiTable-root emotion-5"
+      class="MuiTable-root emotion-7"
     >
       <thead
-        class="MuiTableHead-root emotion-6"
+        class="MuiTableHead-root emotion-8"
       >
         <tr
-          class="MuiTableRow-root MuiTableRow-head emotion-7"
+          class="MuiTableRow-root MuiTableRow-head emotion-9"
         >
           <th
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-8"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-10"
             scope="col"
           >
             Release
           </th>
           <th
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-8"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-10"
             scope="col"
           >
             Started
           </th>
           <th
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-8"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-10"
             scope="col"
           >
             Finished
           </th>
           <th
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-8"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-10"
             scope="col"
           >
             Device status
           </th>
           <th
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-8"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-10"
             scope="col"
           />
           <th
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-8"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-10"
             scope="col"
           />
         </tr>
       </thead>
       <tbody
-        class="MuiTableBody-root emotion-14"
+        class="MuiTableBody-root emotion-16"
       >
         <tr
-          class="MuiTableRow-root emotion-7"
+          class="MuiTableRow-root emotion-9"
         >
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-16"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-18"
           >
             <a
               data-discover="true"
@@ -1027,7 +1133,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
             </a>
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-16"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-18"
           >
             <time
               datetime="2021-07-08T17:56:49+00:00"
@@ -1036,7 +1142,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
             </time>
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-16"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-18"
           >
             <time
               datetime="2021-07-08T17:58:38+00:00"
@@ -1045,15 +1151,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
             </time>
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-16"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-18"
           >
             failure
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-16"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-18"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-21"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-23"
               id=":r1:"
               tabindex="0"
               type="button"
@@ -1062,7 +1168,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
             </button>
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-16"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-18"
           >
             <a
               data-discover="true"
@@ -1078,28 +1184,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
       class="flexbox space-between"
     >
       <div
-        class="MuiTablePagination-root flexbox margin-top emotion-23"
+        class="MuiTablePagination-root flexbox margin-top emotion-25"
       >
         <div
-          class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar emotion-24"
+          class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar emotion-26"
         >
           <div
-            class="MuiTablePagination-spacer flexbox no-basis emotion-25"
+            class="MuiTablePagination-spacer flexbox no-basis emotion-27"
           />
           <p
-            class="MuiTablePagination-selectLabel emotion-26"
+            class="MuiTablePagination-selectLabel emotion-28"
             id=":r3:"
           >
             Rows
           </p>
           <div
-            class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-select MuiSelect-root MuiTablePagination-input emotion-27"
+            class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-select MuiSelect-root MuiTablePagination-input emotion-29"
           >
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
               aria-labelledby=":r3: :r2:"
-              class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input emotion-28"
+              class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input emotion-30"
               id=":r2:"
               role="combobox"
               tabindex="0"
@@ -1116,7 +1222,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard emotion-3"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard emotion-32"
               data-testid="ArrowDropDownIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1127,7 +1233,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
             </svg>
           </div>
           <p
-            class="MuiTablePagination-displayedRows emotion-31"
+            class="MuiTablePagination-displayedRows emotion-33"
           />
           <div
             class="flexbox center-aligned"
@@ -1136,18 +1242,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
               1-4 of 4
             </div>
             <button
-              class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-32"
+              class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-34"
               disabled=""
               id=":r5:"
               tabindex="-1"
               type="button"
             >
               <span
-                class="MuiIconButton-loadingIndicator emotion-33"
+                class="MuiIconButton-loadingIndicator emotion-35"
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-34"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-36"
                 data-testid="KeyboardArrowLeftIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1159,18 +1265,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
             </button>
             <div>
               <button
-                class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-32"
+                class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-34"
                 disabled=""
                 id=":r6:"
                 tabindex="-1"
                 type="button"
               >
                 <span
-                  class="MuiIconButton-loadingIndicator emotion-33"
+                  class="MuiIconButton-loadingIndicator emotion-35"
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-34"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-36"
                   data-testid="KeyboardArrowRightIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1187,10 +1293,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-
     </div>
   </div>
   <div
-    class="flexbox margin-top relative emotion-38"
+    class="flexbox margin-top relative emotion-40"
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-39"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-41"
       id=":r7:"
       tabindex="0"
       type="button"
diff --git a/frontend/src/js/components/devices/device-details/__snapshots__/DeviceTags.test.tsx.snap b/frontend/src/js/components/devices/device-details/__snapshots__/DeviceTags.test.tsx.snap
index c66a5211..23da65f9 100644
--- a/frontend/src/js/components/devices/device-details/__snapshots__/DeviceTags.test.tsx.snap
+++ b/frontend/src/js/components/devices/device-details/__snapshots__/DeviceTags.test.tsx.snap
@@ -15,7 +15,6 @@ exports[`DeviceTags Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -37,6 +36,7 @@ exports[`DeviceTags Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-1.Mui-disabled {
@@ -44,77 +44,30 @@ exports[`DeviceTags Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-1 {
-  margin-top: 16px;
-}
-
-.emotion-1::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-1.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-1.Mui-error::before,
-.emotion-1.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-1::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-1:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-1:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-1:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-1:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-1.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-1::after {
-  border-bottom: 2px solid #337a87;
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-1:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-1.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-1:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-1:after {
-  border-bottom: 2px solid #337a87;
+.emotion-1.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-2 {
@@ -135,6 +88,7 @@ label+.emotion-1 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-2::-webkit-input-placeholder {
@@ -206,7 +160,43 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
-.emotion-6 {
+.emotion-2:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-3 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-4 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-10 {
+  min-width: 240px;
+}
+
+.emotion-11 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -262,59 +252,59 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   background-color: #5d0f43;
 }
 
-.emotion-6::-moz-focus-inner {
+.emotion-11::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-6.Mui-disabled {
+.emotion-11.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-6 {
+  .emotion-11 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-6:active {
+.emotion-11:active {
   box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
 }
 
-.emotion-6:hover {
+.emotion-11:hover {
   background-color: #f5f5f5;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover: none) {
-  .emotion-6:hover {
+  .emotion-11:hover {
     background-color: #e6f2f1;
   }
 }
 
-.emotion-6.Mui-focusVisible {
+.emotion-11.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-6:hover {
+.emotion-11:hover {
   background-color: rgb(65, 10, 46);
 }
 
 @media (hover: none) {
-  .emotion-6:hover {
+  .emotion-11:hover {
     background-color: #5d0f43;
   }
 }
 
-.emotion-6.Mui-disabled {
+.emotion-11.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-7 {
+.emotion-12 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -331,11 +321,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-7 iconButton {
+.emotion-12 iconButton {
   margin-right: 8px;
 }
 
-.emotion-8 {
+.emotion-14 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -394,57 +384,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-8::-moz-focus-inner {
+.emotion-14::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-14.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-8 {
+  .emotion-14 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-8:hover {
+.emotion-14:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-14.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-8:hover {
+.emotion-14:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-8:hover {
+  .emotion-14:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-8:active {
+.emotion-14:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-8.Mui-focusVisible {
+.emotion-14.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-8.Mui-disabled {
+.emotion-14.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-8:hover {
+  .emotion-14:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -452,19 +442,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   }
 }
 
-.emotion-8.MuiButton-loading {
+.emotion-14.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-8:hover {
+.emotion-14:hover {
   colors: #337a87;
 }
 
-.emotion-8.MuiButton-text {
+.emotion-14.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-9 {
+.emotion-15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -524,33 +514,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-9::-moz-focus-inner {
+.emotion-15::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-15.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-9 {
+  .emotion-15 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-9:hover {
+.emotion-15:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-15.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-9:hover {
+  .emotion-15:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -558,15 +548,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   }
 }
 
-.emotion-9.MuiButton-loading {
+.emotion-15.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-9:hover {
+.emotion-15:hover {
   colors: #337a87;
 }
 
-.emotion-9.MuiButton-text {
+.emotion-15.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -606,30 +596,60 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
           class="MuiFormControl-root emotion-0"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-1"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-1"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input emotion-2"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-2"
               placeholder="Key"
               type="text"
               value=""
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-3"
+            >
+              <legend
+                class="emotion-4"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
         <div
           class="MuiFormControl-root emotion-0"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-1"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-1"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input emotion-2"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-2"
               placeholder="Value"
               type="text"
               value=""
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-3"
+            >
+              <legend
+                class="emotion-4"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
         <span />
@@ -638,10 +658,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
         class="key-value-container"
       >
         <div
-          style="min-width: 240px;"
+          class="emotion-10"
         >
           <button
-            class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary Mui-disabled MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary emotion-6"
+            class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary Mui-disabled MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary emotion-11"
             disabled=""
             style="margin-bottom: 10px;"
             tabindex="-1"
@@ -649,7 +669,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-7"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-12"
               data-testid="AddIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -661,7 +681,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
           </button>
         </div>
         <div
-          style="min-width: 240px;"
+          class="emotion-10"
         />
         <div />
       </div>
@@ -671,16 +691,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
       style="justify-content: flex-end;"
     >
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-8"
+        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary margin-right-small emotion-14"
         id=":r1:"
-        style="margin-right: 16px;"
         tabindex="0"
         type="button"
       >
         Save
       </button>
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-9"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-15"
         id=":r2:"
         tabindex="0"
         type="button"
diff --git a/frontend/src/js/components/devices/device-details/__snapshots__/Identity.test.tsx.snap b/frontend/src/js/components/devices/device-details/__snapshots__/Identity.test.tsx.snap
index eae1cc73..a409713c 100644
--- a/frontend/src/js/components/devices/device-details/__snapshots__/Identity.test.tsx.snap
+++ b/frontend/src/js/components/devices/device-details/__snapshots__/Identity.test.tsx.snap
@@ -24,6 +24,8 @@ exports[`DeviceIdentity Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
   color: rgba(10, 10, 11, 0.78);
   font-size: 0.8125rem;
 }
@@ -33,73 +35,30 @@ exports[`DeviceIdentity Component renders correctly 1`] = `
   cursor: default;
 }
 
-.emotion-1::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-1.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-1.Mui-error::before,
-.emotion-1.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-1::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-1:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-1:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-1:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-1:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-1.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-1::after {
-  border-bottom: 2px solid #337a87;
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-1:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-1:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-1.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-1:after {
-  border-bottom: 2px solid #337a87;
+.emotion-1.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-2 {
@@ -120,6 +79,8 @@ exports[`DeviceIdentity Component renders correctly 1`] = `
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-2::-webkit-input-placeholder {
@@ -191,6 +152,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-2:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -346,7 +311,35 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   margin-right: 8px;
 }
 
+.emotion-7 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
 .emotion-8 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-10 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -364,7 +357,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   color: #337a87;
 }
 
-.emotion-8 iconButton {
+.emotion-10 iconButton {
   margin-right: 8px;
 }
 
@@ -396,10 +389,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
         </b>
       </div>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-1"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-1"
       >
         <input
-          class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-2"
+          class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-2"
           disabled=""
           id="a1-id-input"
           placeholder="a1..."
@@ -434,6 +427,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
             Edit
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-7"
+        >
+          <legend
+            class="emotion-8"
+          >
+            <span
+              aria-hidden="true"
+              class="notranslate"
+            >
+              ​
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
@@ -459,7 +467,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
       <svg
         aria-hidden="true"
         aria-label="Copy to clipboard"
-        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-8"
+        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-10"
         data-mui-internal-clone-element="true"
         data-testid="FileCopyOutlinedIcon"
         focusable="false"
@@ -488,7 +496,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
       <svg
         aria-hidden="true"
         aria-label="Copy to clipboard"
-        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-8"
+        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-10"
         data-mui-internal-clone-element="true"
         data-testid="FileCopyOutlinedIcon"
         focusable="false"
@@ -517,7 +525,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
       <svg
         aria-hidden="true"
         aria-label="Copy to clipboard"
-        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-8"
+        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-10"
         data-mui-internal-clone-element="true"
         data-testid="FileCopyOutlinedIcon"
         focusable="false"
@@ -556,6 +564,8 @@ exports[`DeviceIdentity Component renders correctly without a mac 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
   color: rgba(10, 10, 11, 0.78);
   font-size: 0.8125rem;
 }
@@ -565,73 +575,30 @@ exports[`DeviceIdentity Component renders correctly without a mac 1`] = `
   cursor: default;
 }
 
-.emotion-1::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-1.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-1.Mui-error::before,
-.emotion-1.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-1::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-1:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-1:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-1:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-1:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-1.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-1::after {
-  border-bottom: 2px solid #337a87;
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-1:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-1:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-1.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-1:after {
-  border-bottom: 2px solid #337a87;
+.emotion-1.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-2 {
@@ -652,6 +619,8 @@ exports[`DeviceIdentity Component renders correctly without a mac 1`] = `
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-2::-webkit-input-placeholder {
@@ -723,6 +692,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-2:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -878,7 +851,35 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   margin-right: 8px;
 }
 
+.emotion-7 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
 .emotion-8 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-10 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -896,7 +897,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
   color: #337a87;
 }
 
-.emotion-8 iconButton {
+.emotion-10 iconButton {
   margin-right: 8px;
 }
 
@@ -928,10 +929,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
         </b>
       </div>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-1"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-adornedEnd emotion-1"
       >
         <input
-          class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-2"
+          class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputAdornedEnd emotion-2"
           disabled=""
           id="c1-id-input"
           placeholder="c1..."
@@ -966,6 +967,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
             Edit
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-7"
+        >
+          <legend
+            class="emotion-8"
+          >
+            <span
+              aria-hidden="true"
+              class="notranslate"
+            >
+              ​
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
@@ -991,7 +1007,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-p
       <svg
         aria-hidden="true"
         aria-label="Copy to clipboard"
-        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-8"
+        class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeSmall margin-left-small fadeOut emotion-10"
         data-mui-internal-clone-element="true"
         data-testid="FileCopyOutlinedIcon"
         focusable="false"
diff --git a/frontend/src/js/components/devices/device-details/__snapshots__/Monitoring.test.tsx.snap b/frontend/src/js/components/devices/device-details/__snapshots__/Monitoring.test.tsx.snap
index 163f03fa..8155833d 100644
--- a/frontend/src/js/components/devices/device-details/__snapshots__/Monitoring.test.tsx.snap
+++ b/frontend/src/js/components/devices/device-details/__snapshots__/Monitoring.test.tsx.snap
@@ -46,8 +46,7 @@ exports[`DeviceMonitoring Component renders correctly 1`] = `
   </div>
   <div>
     <div
-      class="monitoring-alert column-data"
-      style="margin-bottom: 8px;"
+      class="monitoring-alert column-data margin-bottom-x-small"
     >
       <svg
         aria-hidden="true"
@@ -88,7 +87,7 @@ exports[`DeviceMonitoring Component renders correctly 1`] = `
       Alert history
     </h4>
     <div
-      class="monitoring-alert column-data"
+      class="monitoring-alert column-data "
     >
       <svg
         aria-hidden="true"
diff --git a/frontend/src/js/components/devices/dialogs/__snapshots__/CustomColumnsDialogContent.test.tsx.snap b/frontend/src/js/components/devices/dialogs/__snapshots__/CustomColumnsDialogContent.test.tsx.snap
index 59b24fbb..3496d93a 100644
--- a/frontend/src/js/components/devices/dialogs/__snapshots__/CustomColumnsDialogContent.test.tsx.snap
+++ b/frontend/src/js/components/devices/dialogs/__snapshots__/CustomColumnsDialogContent.test.tsx.snap
@@ -214,7 +214,6 @@ exports[`ColumnCustomizationDialogContent Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -367,7 +366,6 @@ exports[`ColumnCustomizationDialogContent Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -395,6 +393,13 @@ exports[`ColumnCustomizationDialogContent Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-14.Mui-focused {
@@ -432,6 +437,8 @@ exports[`ColumnCustomizationDialogContent Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-15.Mui-disabled {
@@ -439,77 +446,30 @@ exports[`ColumnCustomizationDialogContent Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-15 {
-  margin-top: 16px;
-}
-
-.emotion-15::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-15.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-15.Mui-error::before,
-.emotion-15.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-15::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-15:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-15:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-15.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-15::after {
-  border-bottom: 2px solid #337a87;
+.emotion-15.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-15:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-15.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-15:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-15.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-15:after {
-  border-bottom: 2px solid #337a87;
+.emotion-15.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-16 {
@@ -530,6 +490,8 @@ label+.emotion-15 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-16::-webkit-input-placeholder {
@@ -601,6 +563,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-16:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-17 {
   position: absolute;
   right: 0;
@@ -718,6 +684,47 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   margin-right: 8px;
 }
 
+.emotion-21 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-22 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-22>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
 <div
   class="MuiDialogContent-root emotion-0"
 >
@@ -849,10 +856,9 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
     >
       <div
         class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-13"
-        style="margin-top: 0px; margin-bottom: 15px;"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-14"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-14"
           data-shrink="false"
           for="filter-selection"
           id="filter-selection-label"
@@ -860,7 +866,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
           Add a column
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-15"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-15"
         >
           <input
             aria-autocomplete="both"
@@ -868,7 +874,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
             aria-invalid="false"
             autocapitalize="none"
             autocomplete="off"
-            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-16"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-16"
             id="filter-selection"
             role="combobox"
             spellcheck="false"
@@ -902,6 +908,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
               </svg>
             </button>
           </div>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-21"
+          >
+            <legend
+              class="emotion-22"
+            >
+              <span>
+                Add a column
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
     </div>
diff --git a/frontend/src/js/components/devices/dialogs/__snapshots__/PreauthDialog.test.tsx.snap b/frontend/src/js/components/devices/dialogs/__snapshots__/PreauthDialog.test.tsx.snap
index 1c052da6..4cde3941 100644
--- a/frontend/src/js/components/devices/dialogs/__snapshots__/PreauthDialog.test.tsx.snap
+++ b/frontend/src/js/components/devices/dialogs/__snapshots__/PreauthDialog.test.tsx.snap
@@ -157,7 +157,6 @@ exports[`PreauthDialog Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -179,6 +178,7 @@ exports[`PreauthDialog Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-8.Mui-disabled {
@@ -186,77 +186,30 @@ exports[`PreauthDialog Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-8 {
-  margin-top: 16px;
-}
-
-.emotion-8::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-8.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-8.Mui-error::before,
-.emotion-8.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-8::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-8:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-8:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-8:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-8:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-8.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-8.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-8::after {
-  border-bottom: 2px solid #337a87;
+.emotion-8.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-8:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-8.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-8:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-8:after {
-  border-bottom: 2px solid #337a87;
+.emotion-8.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-9 {
@@ -277,6 +230,7 @@ label+.emotion-8 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-9::-webkit-input-placeholder {
@@ -348,7 +302,43 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
-.emotion-13 {
+.emotion-9:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-10 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-11 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-17 {
+  min-width: 240px;
+}
+
+.emotion-18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -404,59 +394,59 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   background-color: #5d0f43;
 }
 
-.emotion-13::-moz-focus-inner {
+.emotion-18::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-18.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-13 {
+  .emotion-18 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-13:active {
+.emotion-18:active {
   box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
 }
 
-.emotion-13:hover {
+.emotion-18:hover {
   background-color: #f5f5f5;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover: none) {
-  .emotion-13:hover {
+  .emotion-18:hover {
     background-color: #e6f2f1;
   }
 }
 
-.emotion-13.Mui-focusVisible {
+.emotion-18.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-13:hover {
+.emotion-18:hover {
   background-color: rgb(65, 10, 46);
 }
 
 @media (hover: none) {
-  .emotion-13:hover {
+  .emotion-18:hover {
     background-color: #5d0f43;
   }
 }
 
-.emotion-13.Mui-disabled {
+.emotion-18.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-15 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -475,11 +465,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   flex: 0 0 auto;
 }
 
-.emotion-15>:not(style)~:not(style) {
+.emotion-21>:not(style)~:not(style) {
   margin-left: 8px;
 }
 
-.emotion-16 {
+.emotion-22 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -539,33 +529,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-16::-moz-focus-inner {
+.emotion-22::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-16.Mui-disabled {
+.emotion-22.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-16 {
+  .emotion-22 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-16:hover {
+.emotion-22:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-16.Mui-disabled {
+.emotion-22.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-16:hover {
+  .emotion-22:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -573,19 +563,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   }
 }
 
-.emotion-16.MuiButton-loading {
+.emotion-22.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-16:hover {
+.emotion-22:hover {
   colors: #337a87;
 }
 
-.emotion-16.MuiButton-text {
+.emotion-22.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-17 {
+.emotion-23 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -644,57 +634,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-17::-moz-focus-inner {
+.emotion-23::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-17.Mui-disabled {
+.emotion-23.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-17 {
+  .emotion-23 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-17:hover {
+.emotion-23:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-17.Mui-disabled {
+.emotion-23.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-17:hover {
+.emotion-23:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-17:hover {
+  .emotion-23:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-17:active {
+.emotion-23:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-17.Mui-focusVisible {
+.emotion-23.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-17.Mui-disabled {
+.emotion-23.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-17:hover {
+  .emotion-23:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -702,19 +692,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   }
 }
 
-.emotion-17.MuiButton-loading {
+.emotion-23.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-17:hover {
+.emotion-23:hover {
   colors: #337a87;
 }
 
-.emotion-17.MuiButton-text {
+.emotion-23.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-18 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -773,57 +763,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-18::-moz-focus-inner {
+.emotion-24::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-24.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-18 {
+  .emotion-24 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-18:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-18:hover {
+.emotion-24:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-18:hover {
+  .emotion-24:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-18:active {
+.emotion-24:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-18.Mui-focusVisible {
+.emotion-24.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-18.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-18:hover {
+  .emotion-24:hover {
     --variant-containedBg: rgb(65, 10, 46);
     --variant-textBg: rgba(93, 15, 67, 0.04);
     --variant-outlinedBorder: #5d0f43;
@@ -831,15 +821,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   }
 }
 
-.emotion-18.MuiButton-loading {
+.emotion-24.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-18:hover {
+.emotion-24:hover {
   colors: #337a87;
 }
 
-.emotion-18.MuiButton-text {
+.emotion-24.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -939,30 +929,60 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
               class="MuiFormControl-root emotion-7"
             >
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-8"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-8"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiInput-input emotion-9"
+                  class="MuiInputBase-input MuiOutlinedInput-input emotion-9"
                   placeholder="Key"
                   type="text"
                   value=""
                 />
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline emotion-10"
+                >
+                  <legend
+                    class="emotion-11"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="notranslate"
+                    >
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
             <div
               class="MuiFormControl-root emotion-7"
             >
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-8"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-8"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiInput-input emotion-9"
+                  class="MuiInputBase-input MuiOutlinedInput-input emotion-9"
                   placeholder="Value"
                   type="text"
                   value=""
                 />
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline emotion-10"
+                >
+                  <legend
+                    class="emotion-11"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="notranslate"
+                    >
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
             <span />
@@ -971,10 +991,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
             class="key-value-container"
           >
             <div
-              style="min-width: 240px;"
+              class="emotion-17"
             >
               <button
-                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary Mui-disabled MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary emotion-13"
+                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary Mui-disabled MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary emotion-18"
                 disabled=""
                 style="margin-bottom: 10px;"
                 tabindex="-1"
@@ -994,17 +1014,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
               </button>
             </div>
             <div
-              style="min-width: 240px;"
+              class="emotion-17"
             />
             <div />
           </div>
         </div>
       </div>
       <div
-        class="MuiDialogActions-root MuiDialogActions-spacing emotion-15"
+        class="MuiDialogActions-root MuiDialogActions-spacing emotion-21"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-16"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-22"
           id=":r1:"
           tabindex="0"
           type="button"
@@ -1012,7 +1032,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
           Cancel
         </button>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-17"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-23"
           disabled=""
           id=":r2:"
           style="margin-left: 10px;"
@@ -1022,7 +1042,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
           Save and add another
         </button>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-18"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-24"
           disabled=""
           id=":r3:"
           style="margin-left: 10px;"
diff --git a/frontend/src/js/components/devices/group-management/__snapshots__/CreateGroup.test.tsx.snap b/frontend/src/js/components/devices/group-management/__snapshots__/CreateGroup.test.tsx.snap
index 1ac8d917..5e4579f9 100644
--- a/frontend/src/js/components/devices/group-management/__snapshots__/CreateGroup.test.tsx.snap
+++ b/frontend/src/js/components/devices/group-management/__snapshots__/CreateGroup.test.tsx.snap
@@ -272,7 +272,6 @@ exports[`CreateGroup Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -300,6 +299,13 @@ exports[`CreateGroup Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-8.Mui-focused {
@@ -337,6 +343,7 @@ exports[`CreateGroup Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-9.Mui-disabled {
@@ -344,77 +351,30 @@ exports[`CreateGroup Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-9 {
-  margin-top: 16px;
-}
-
-.emotion-9::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-9.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-9.Mui-error::before,
-.emotion-9.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-9::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-9:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-9:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-9:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-9:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-9.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-9::after {
-  border-bottom: 2px solid #337a87;
+.emotion-9.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-9:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-9.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-9:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-9.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-9:after {
-  border-bottom: 2px solid #337a87;
+.emotion-9.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-10 {
@@ -435,6 +395,7 @@ label+.emotion-9 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-10::-webkit-input-placeholder {
@@ -506,7 +467,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-10:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-11 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-12 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-12>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-13 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -519,15 +525,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin-left: 0;
 }
 
-.emotion-11.Mui-disabled {
+.emotion-13.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-11.Mui-error {
+.emotion-13.Mui-error {
   color: #ab1000;
 }
 
-.emotion-12 {
+.emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -546,11 +552,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   flex: 0 0 auto;
 }
 
-.emotion-12>:not(style)~:not(style) {
+.emotion-14>:not(style)~:not(style) {
   margin-left: 8px;
 }
 
-.emotion-13 {
+.emotion-15 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -610,33 +616,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   padding: 10px 15px;
 }
 
-.emotion-13::-moz-focus-inner {
+.emotion-15::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-13 {
+  .emotion-15 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-13:hover {
+.emotion-15:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-13:hover {
+  .emotion-15:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -644,19 +650,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   }
 }
 
-.emotion-13.MuiButton-loading {
+.emotion-15.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-13:hover {
+.emotion-15:hover {
   colors: #337a87;
 }
 
-.emotion-13.MuiButton-text {
+.emotion-15.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -715,57 +721,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   font-weight: bold;
 }
 
-.emotion-14::-moz-focus-inner {
+.emotion-16::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-14.Mui-disabled {
+.emotion-16.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-14 {
+  .emotion-16 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-14:hover {
+.emotion-16:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-14.Mui-disabled {
+.emotion-16.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-14:hover {
+.emotion-16:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-14:hover {
+  .emotion-16:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-14:active {
+.emotion-16:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-14.Mui-focusVisible {
+.emotion-16.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-14.Mui-disabled {
+.emotion-16.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-14:hover {
+  .emotion-16:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -773,15 +779,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   }
 }
 
-.emotion-14.MuiButton-loading {
+.emotion-16.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-14:hover {
+.emotion-16:hover {
   colors: #337a87;
 }
 
-.emotion-14.MuiButton-text {
+.emotion-16.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -828,7 +834,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-7"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-8"
               data-shrink="false"
               for="group-creation-selection"
               id="group-creation-selection-label"
@@ -836,7 +842,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
               Select a group, or type to create new
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-9"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-9"
             >
               <input
                 aria-autocomplete="list"
@@ -844,26 +850,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
                 aria-invalid="false"
                 autocapitalize="none"
                 autocomplete="off"
-                class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-10"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-10"
                 id="group-creation-selection"
                 role="combobox"
                 spellcheck="false"
                 type="text"
                 value=""
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-11"
+              >
+                <legend
+                  class="emotion-12"
+                >
+                  <span>
+                    Select a group, or type to create new
+                  </span>
+                </legend>
+              </fieldset>
             </div>
           </div>
         </div>
         <p
-          class="MuiFormHelperText-root emotion-11"
+          class="MuiFormHelperText-root emotion-13"
         />
       </div>
       <div
-        class="MuiDialogActions-root MuiDialogActions-spacing emotion-12"
+        class="MuiDialogActions-root MuiDialogActions-spacing emotion-14"
         style="margin-top: 0px;"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-13"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-15"
           id=":r3:"
           style="margin-right: 10px;"
           tabindex="0"
@@ -872,7 +890,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
           Cancel
         </button>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-14"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-16"
           disabled=""
           id=":r4:"
           tabindex="-1"
diff --git a/frontend/src/js/components/devices/group-management/__snapshots__/GroupDefinition.test.tsx.snap b/frontend/src/js/components/devices/group-management/__snapshots__/GroupDefinition.test.tsx.snap
index 42faf202..6f9cb132 100644
--- a/frontend/src/js/components/devices/group-management/__snapshots__/GroupDefinition.test.tsx.snap
+++ b/frontend/src/js/components/devices/group-management/__snapshots__/GroupDefinition.test.tsx.snap
@@ -150,7 +150,6 @@ exports[`GroupDefinition Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -178,6 +177,13 @@ exports[`GroupDefinition Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-2.Mui-focused {
@@ -215,6 +221,7 @@ exports[`GroupDefinition Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-3.Mui-disabled {
@@ -222,77 +229,30 @@ exports[`GroupDefinition Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -313,6 +273,7 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -384,7 +345,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-6 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-6>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-7 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -397,15 +403,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   margin-left: 0;
 }
 
-.emotion-5.Mui-disabled {
+.emotion-7.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-5.Mui-error {
+.emotion-7.Mui-error {
   color: #ab1000;
 }
 
-.emotion-6 {
+.emotion-8 {
   color: rgba(0, 0, 0, 0.38);
   margin: 15px 0;
 }
@@ -418,7 +424,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
       class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-1"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-2"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-2"
         data-shrink="false"
         for="group-creation-selection"
         id="group-creation-selection-label"
@@ -426,7 +432,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         Select a group, or type to create new
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-3"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-3"
       >
         <input
           aria-autocomplete="list"
@@ -434,21 +440,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
           aria-invalid="false"
           autocapitalize="none"
           autocomplete="off"
-          class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
           id="group-creation-selection"
           role="combobox"
           spellcheck="false"
           type="text"
           value=""
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-5"
+        >
+          <legend
+            class="emotion-6"
+          >
+            <span>
+              Select a group, or type to create new
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
   <p
-    class="MuiFormHelperText-root emotion-5"
+    class="MuiFormHelperText-root emotion-7"
   />
   <p
-    class="emotion-6 "
+    class="emotion-8 "
   >
     Note: individual devices can't be added to dynamic groups.
     <br />
diff --git a/frontend/src/js/components/devices/troubleshoot/__snapshots__/FileTransfer.test.tsx.snap b/frontend/src/js/components/devices/troubleshoot/__snapshots__/FileTransfer.test.tsx.snap
index ec34780b..a54a48de 100644
--- a/frontend/src/js/components/devices/troubleshoot/__snapshots__/FileTransfer.test.tsx.snap
+++ b/frontend/src/js/components/devices/troubleshoot/__snapshots__/FileTransfer.test.tsx.snap
@@ -186,7 +186,6 @@ exports[`FileTransfer Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -209,6 +208,8 @@ exports[`FileTransfer Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-12.Mui-disabled {
@@ -216,77 +217,30 @@ exports[`FileTransfer Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-12 {
-  margin-top: 16px;
-}
-
-.emotion-12::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-12.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-12.Mui-error::before,
-.emotion-12.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-12::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-12:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-12:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-12:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-12:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-12.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-12::after {
-  border-bottom: 2px solid #337a87;
+.emotion-12.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-12:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-12.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-12:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-12.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-12:after {
-  border-bottom: 2px solid #337a87;
+.emotion-12.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-13 {
@@ -307,6 +261,8 @@ label+.emotion-12 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-13::-webkit-input-placeholder {
@@ -378,6 +334,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-13:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -490,6 +450,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
 }
 
 .emotion-18 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-19 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-20 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -548,57 +536,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   font-weight: bold;
 }
 
-.emotion-18::-moz-focus-inner {
+.emotion-20::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-20.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-18 {
+  .emotion-20 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-18:hover {
+.emotion-20:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-20.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-18:hover {
+.emotion-20:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-18:hover {
+  .emotion-20:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-18:active {
+.emotion-20:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-18.Mui-focusVisible {
+.emotion-20.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-18.Mui-disabled {
+.emotion-20.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-18:hover {
+  .emotion-20:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -606,15 +594,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   }
 }
 
-.emotion-18.MuiButton-loading {
+.emotion-20.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-18:hover {
+.emotion-20:hover {
   colors: #337a87;
 }
 
-.emotion-18.MuiButton-text {
+.emotion-20.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -723,18 +711,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-11"
         >
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd emotion-12"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd emotion-12"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-13"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-13"
               id=":r0:"
               placeholder="Example: /opt/installed-by-single-file"
               type="text"
               value=""
             />
             <div
-              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-14"
+              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-14"
             >
               <button
                 aria-label="Paste"
@@ -760,10 +748,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-18"
+            >
+              <legend
+                class="emotion-19"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-18"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-20"
           disabled=""
           id=":r3:"
           tabindex="-1"
diff --git a/frontend/src/js/components/devices/widgets/AttributeAutocomplete.tsx b/frontend/src/js/components/devices/widgets/AttributeAutocomplete.tsx
index 3eae3f60..32cec4e1 100644
--- a/frontend/src/js/components/devices/widgets/AttributeAutocomplete.tsx
+++ b/frontend/src/js/components/devices/widgets/AttributeAutocomplete.tsx
@@ -21,8 +21,6 @@ import { TIMEOUTS, emptyFilter } from '@northern.tech/store/constants';
 import { defaultHeaders } from '../BaseDevices';
 import { getFilterLabelByKey } from './Filters';
 
-const textFieldStyle = { marginTop: 0, marginBottom: 15 };
-
 export const getOptionLabel = option => {
   const header = Object.values(defaultHeaders).find(
     ({ attribute }) => attribute.scope === option.scope && (attribute.name === option.key || attribute.alternative === option.key)
@@ -150,7 +148,7 @@ export const AttributeAutoComplete = ({ attributes, disabled = false, filter = e
         updateFilterKey(key, scope);
       }}
       options={options}
-      renderInput={params => <TextField {...params} label={label} style={textFieldStyle} />}
+      renderInput={params => <TextField {...params} label={label} />}
       key={reset}
       value={getFilterLabelByKey(key, attributes)}
     />
diff --git a/frontend/src/js/components/devices/widgets/DeviceStateSelection.tsx b/frontend/src/js/components/devices/widgets/DeviceStateSelection.tsx
index 9123aa57..1dd1deb8 100644
--- a/frontend/src/js/components/devices/widgets/DeviceStateSelection.tsx
+++ b/frontend/src/js/components/devices/widgets/DeviceStateSelection.tsx
@@ -23,10 +23,7 @@ const useStyles = makeStyles()(theme => ({
   selection: {
     fontSize: 13,
     marginLeft: theme.spacing(0.5),
-    marginTop: 2,
-    '>div': {
-      paddingLeft: theme.spacing(0.5)
-    }
+    marginTop: 2
   }
 }));
 
@@ -37,7 +34,7 @@ export const DeviceStateSelection = ({ onStateChange, selectedState = '', states
   return (
     <div className="flexbox centered">
       Status:
-      <Select className={classes.selection} disableUnderline onChange={e => onStateChange(e.target.value)} value={selectedState}>
+      <Select className={classes.selection} onChange={e => onStateChange(e.target.value)} value={selectedState}>
         {availableStates.map(state => (
           <MenuItem key={state.key} value={state.key}>
             {state.title()}
diff --git a/frontend/src/js/components/devices/widgets/FilterItem.tsx b/frontend/src/js/components/devices/widgets/FilterItem.tsx
index 4f8a9d3d..e7f6a924 100644
--- a/frontend/src/js/components/devices/widgets/FilterItem.tsx
+++ b/frontend/src/js/components/devices/widgets/FilterItem.tsx
@@ -22,8 +22,6 @@ import { DEVICE_FILTERING_OPTIONS, TIMEOUTS, emptyFilter } from '@northern.tech/
 
 import AttributeAutoComplete from './AttributeAutocomplete';
 
-const textFieldStyle = { marginTop: 0, marginBottom: 15 };
-
 const filterOptionsByPlan = {
   os: { $eq: { title: 'equals' } },
   professional: DEVICE_FILTERING_OPTIONS,
@@ -103,7 +101,7 @@ export const FilterItem = ({ attributes, onChange, onSelect, plan, reset }) => {
   const showValue = typeof (filterOptions[operator] || {}).value === 'undefined';
   return (
     <>
-      <div className="flexbox center-aligned relative">
+      <div className="flexbox center-aligned margin-top-small margin-bottom-small relative">
         {filterNotifications[key]}
         <AttributeAutoComplete
           attributes={attributes}
@@ -120,16 +118,7 @@ export const FilterItem = ({ attributes, onChange, onSelect, plan, reset }) => {
             </MenuItem>
           ))}
         </Select>
-        {showValue && (
-          <TextField
-            label="Value"
-            value={value}
-            onChange={updateFilterValue}
-            onKeyDown={onKeyDown}
-            InputLabelProps={{ shrink: !!value }}
-            style={textFieldStyle}
-          />
-        )}
+        {showValue && <TextField label="Value" value={value} onChange={updateFilterValue} onKeyDown={onKeyDown} />}
         {!!key && (
           <IconButton className="margin-left" onClick={removeFilter} size="small">
             <HighlightOffIcon />
diff --git a/frontend/src/js/components/devices/widgets/__snapshots__/FilterItem.test.tsx.snap b/frontend/src/js/components/devices/widgets/__snapshots__/FilterItem.test.tsx.snap
index ed58a806..f03805ac 100644
--- a/frontend/src/js/components/devices/widgets/__snapshots__/FilterItem.test.tsx.snap
+++ b/frontend/src/js/components/devices/widgets/__snapshots__/FilterItem.test.tsx.snap
@@ -150,7 +150,6 @@ exports[`FilterItem Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -178,6 +177,13 @@ exports[`FilterItem Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-2.Mui-focused {
@@ -215,6 +221,8 @@ exports[`FilterItem Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -222,77 +230,30 @@ exports[`FilterItem Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -313,6 +274,8 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -384,6 +347,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
   position: absolute;
   right: 0;
@@ -515,6 +482,47 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
 }
 
 .emotion-9 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-10 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-10>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-11 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -532,83 +540,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-11.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-.emotion-9::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-9.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-9.Mui-error::before,
-.emotion-9.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-9::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-9:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-11:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-9:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-11:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-9.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-9::after {
-  border-bottom: 2px solid #337a87;
+.emotion-11.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-9:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-11.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-9:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-11.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-9:after {
-  border-bottom: 2px solid #337a87;
+.emotion-11.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-10 {
+.emotion-12 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -617,6 +583,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -634,31 +601,35 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-10:focus {
+.emotion-12:focus {
   border-radius: 0;
 }
 
-.emotion-10.Mui-disabled {
+.emotion-12.Mui-disabled {
   cursor: default;
 }
 
-.emotion-10[multiple] {
+.emotion-12[multiple] {
   height: auto;
 }
 
-.emotion-10:not([multiple]) option,
-.emotion-10:not([multiple]) optgroup {
+.emotion-12:not([multiple]) option,
+.emotion-12:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-10.emotion-10.emotion-10 {
-  padding-right: 24px;
-  min-width: 16px;
+.emotion-12:focus {
+  border-radius: 4px;
+}
+
+.emotion-12.emotion-12.emotion-12 {
+  padding-right: 32px;
 }
 
-.emotion-10.MuiSelect-select {
+.emotion-12.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -666,76 +637,80 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   overflow: hidden;
 }
 
-.emotion-10::-webkit-input-placeholder {
+.emotion-12::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10::-moz-placeholder {
+.emotion-12::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10::-ms-input-placeholder {
+.emotion-12::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10:focus {
+.emotion-12:focus {
   outline: 0;
 }
 
-.emotion-10:invalid {
+.emotion-12:invalid {
   box-shadow: none;
 }
 
-.emotion-10::-webkit-search-decoration {
+.emotion-12::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-12::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-12::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-12::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-12:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-12:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-12:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-10.Mui-disabled {
+.emotion-12.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-10:-webkit-autofill {
+.emotion-12:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-11 {
+.emotion-12:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-13 {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -745,7 +720,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   box-sizing: border-box;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -765,17 +740,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
-.emotion-12 iconButton {
+.emotion-14 iconButton {
   margin-right: 8px;
 }
 
-.emotion-12.Mui-disabled {
+.emotion-14.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-13 {
+.emotion-16 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-17 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -789,11 +775,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-15 {
+.emotion-19 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -811,98 +796,145 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-15.Mui-disabled {
+.emotion-19.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-15 {
-  margin-top: 16px;
+.emotion-19:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-15::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+@media (hover: none) {
+  .emotion-19:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
 }
 
-.emotion-15.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-15.Mui-error::before,
-.emotion-15.Mui-error::after {
-  border-bottom-color: #ab1000;
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-15::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+.emotion-19.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-19.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-@media (hover: none) {
-  .emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  }
+.emotion-20 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+}
+
+.emotion-20::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-20::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-15.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-20::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-20:focus {
+  outline: 0;
+}
+
+.emotion-20:invalid {
+  box-shadow: none;
+}
+
+.emotion-20::-webkit-search-decoration {
+  -webkit-appearance: none;
 }
 
-.emotion-15::after {
-  border-bottom: 2px solid #337a87;
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-webkit-input-placeholder {
+  opacity: 0!important;
 }
 
-.emotion-15:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-moz-placeholder {
+  opacity: 0!important;
 }
 
-.emotion-15:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-ms-input-placeholder {
+  opacity: 0!important;
 }
 
-.emotion-15:after {
-  border-bottom: 2px solid #337a87;
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-20.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-20:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-20:-webkit-autofill {
+  border-radius: inherit;
 }
 
 <div
-  class="flexbox center-aligned relative"
+  class="flexbox center-aligned margin-top-small margin-bottom-small relative"
 >
   <div
     class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon emotion-0"
   >
     <div
       class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-1"
-      style="margin-top: 0px; margin-bottom: 15px;"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-2"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-2"
         data-shrink="false"
         for="filter-selection"
         id="filter-selection-label"
@@ -910,7 +942,7 @@ label+.emotion-15 {
         Attribute
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-3"
       >
         <input
           aria-autocomplete="both"
@@ -918,7 +950,7 @@ label+.emotion-15 {
           aria-invalid="false"
           autocapitalize="none"
           autocomplete="off"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-4"
           id="filter-selection"
           role="combobox"
           spellcheck="false"
@@ -952,16 +984,28 @@ label+.emotion-15 {
             </svg>
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-9"
+        >
+          <legend
+            class="emotion-10"
+          >
+            <span>
+              Attribute
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
   <div
-    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary margin-left-small margin-right-small MuiSelect-root emotion-9"
+    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary margin-left-small margin-right-small MuiSelect-root emotion-11"
   >
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-10"
+      class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-12"
       role="combobox"
       tabindex="0"
     >
@@ -970,13 +1014,13 @@ label+.emotion-15 {
     <input
       aria-hidden="true"
       aria-invalid="false"
-      class="MuiSelect-nativeInput emotion-11"
+      class="MuiSelect-nativeInput emotion-13"
       tabindex="-1"
       value="$eq"
     />
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-12"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-14"
       data-testid="ArrowDropDownIcon"
       focusable="false"
       viewBox="0 0 24 24"
@@ -985,13 +1029,27 @@ label+.emotion-15 {
         d="M7 10l5 5 5-5z"
       />
     </svg>
+    <fieldset
+      aria-hidden="true"
+      class="MuiOutlinedInput-notchedOutline emotion-9"
+    >
+      <legend
+        class="emotion-16"
+      >
+        <span
+          aria-hidden="true"
+          class="notranslate"
+        >
+          ​
+        </span>
+      </legend>
+    </fieldset>
   </div>
   <div
-    class="MuiFormControl-root MuiTextField-root emotion-13"
-    style="margin-top: 0px; margin-bottom: 15px;"
+    class="MuiFormControl-root MuiTextField-root emotion-17"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-2"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-2"
       data-shrink="false"
       for=":r4:"
       id=":r4:-label"
@@ -999,15 +1057,27 @@ label+.emotion-15 {
       Value
     </label>
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-15"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-19"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiInput-input emotion-4"
+        class="MuiInputBase-input MuiOutlinedInput-input emotion-20"
         id=":r4:"
         type="text"
         value=""
       />
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline emotion-9"
+      >
+        <legend
+          class="emotion-10"
+        >
+          <span>
+            Value
+          </span>
+        </legend>
+      </fieldset>
     </div>
   </div>
 </div>
diff --git a/frontend/src/js/components/devices/widgets/__snapshots__/Filters.test.tsx.snap b/frontend/src/js/components/devices/widgets/__snapshots__/Filters.test.tsx.snap
index 1835ad41..1d95d637 100644
--- a/frontend/src/js/components/devices/widgets/__snapshots__/Filters.test.tsx.snap
+++ b/frontend/src/js/components/devices/widgets/__snapshots__/Filters.test.tsx.snap
@@ -171,7 +171,6 @@ exports[`Filters Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -199,6 +198,13 @@ exports[`Filters Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-5.Mui-focused {
@@ -236,6 +242,8 @@ exports[`Filters Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-6.Mui-disabled {
@@ -243,77 +251,30 @@ exports[`Filters Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-6 {
-  margin-top: 16px;
-}
-
-.emotion-6::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-6.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-6.Mui-error::before,
-.emotion-6.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-6::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-6:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-6:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-6:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-6:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-6.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-6::after {
-  border-bottom: 2px solid #337a87;
+.emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-6:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-6:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-6.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-6:after {
-  border-bottom: 2px solid #337a87;
+.emotion-6.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-7 {
@@ -334,6 +295,8 @@ label+.emotion-6 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-7::-webkit-input-placeholder {
@@ -405,6 +368,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-7:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-8 {
   position: absolute;
   right: 0;
@@ -536,6 +503,47 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
 }
 
 .emotion-12 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-13 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-13>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-14 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -553,83 +561,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-12.Mui-disabled {
+.emotion-14.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-.emotion-12::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-12.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-12.Mui-error::before,
-.emotion-12.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-12::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-12:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-14:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-12:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-14:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-12.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-12::after {
-  border-bottom: 2px solid #337a87;
+.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-12:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-12:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-14.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-12:after {
-  border-bottom: 2px solid #337a87;
+.emotion-14.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-13 {
+.emotion-15 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -638,6 +604,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -655,31 +622,35 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-13:focus {
+.emotion-15:focus {
   border-radius: 0;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   cursor: default;
 }
 
-.emotion-13[multiple] {
+.emotion-15[multiple] {
   height: auto;
 }
 
-.emotion-13:not([multiple]) option,
-.emotion-13:not([multiple]) optgroup {
+.emotion-15:not([multiple]) option,
+.emotion-15:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-13.emotion-13.emotion-13 {
-  padding-right: 24px;
-  min-width: 16px;
+.emotion-15:focus {
+  border-radius: 4px;
 }
 
-.emotion-13.MuiSelect-select {
+.emotion-15.emotion-15.emotion-15 {
+  padding-right: 32px;
+}
+
+.emotion-15.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -687,76 +658,80 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   overflow: hidden;
 }
 
-.emotion-13::-webkit-input-placeholder {
+.emotion-15::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-13::-moz-placeholder {
+.emotion-15::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-13::-ms-input-placeholder {
+.emotion-15::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-13:focus {
+.emotion-15:focus {
   outline: 0;
 }
 
-.emotion-13:invalid {
+.emotion-15:invalid {
   box-shadow: none;
 }
 
-.emotion-13::-webkit-search-decoration {
+.emotion-15::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-13::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-13::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-13::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-13:-webkit-autofill {
+.emotion-15:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-14 {
+.emotion-15:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-16 {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -766,7 +741,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   box-sizing: border-box;
 }
 
-.emotion-15 {
+.emotion-17 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -786,17 +761,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
-.emotion-15 iconButton {
+.emotion-17 iconButton {
   margin-right: 8px;
 }
 
-.emotion-15.Mui-disabled {
+.emotion-17.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-16 {
+.emotion-19 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-20 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -810,11 +796,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-18 {
+.emotion-22 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -832,87 +817,135 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-22.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-18 {
-  margin-top: 16px;
+.emotion-22:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-18::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+@media (hover: none) {
+  .emotion-22:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
 }
 
-.emotion-18.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
+.emotion-22.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-18.Mui-error::before,
-.emotion-18.Mui-error::after {
-  border-bottom-color: #ab1000;
+.emotion-22.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-18::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+.emotion-22.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-18:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-22.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-@media (hover: none) {
-  .emotion-18:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  }
+.emotion-23 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-18.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-23::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-18::after {
-  border-bottom: 2px solid #337a87;
+.emotion-23::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-18:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-23::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-18:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-23:focus {
+  outline: 0;
 }
 
-.emotion-18:after {
-  border-bottom: 2px solid #337a87;
+.emotion-23:invalid {
+  box-shadow: none;
 }
 
-.emotion-20 {
+.emotion-23::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-23.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-23:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-23:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-26 {
   max-width: 100%;
   font-family: Lato,sans-serif;
   font-size: 0.7545rem;
@@ -951,12 +984,12 @@ label+.emotion-18 {
   text-transform: uppercase;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-26.Mui-disabled {
   opacity: 0.38;
   pointer-events: none;
 }
 
-.emotion-20 .MuiChip-avatar {
+.emotion-26 .MuiChip-avatar {
   margin-left: 5px;
   margin-right: -6px;
   width: 24px;
@@ -965,17 +998,17 @@ label+.emotion-18 {
   font-size: 0.6964rem;
 }
 
-.emotion-20 .MuiChip-avatarColorPrimary {
+.emotion-26 .MuiChip-avatarColorPrimary {
   color: #fff;
   background-color: rgb(35, 85, 94);
 }
 
-.emotion-20 .MuiChip-avatarColorSecondary {
+.emotion-26 .MuiChip-avatarColorSecondary {
   color: #fff;
   background-color: rgb(65, 10, 46);
 }
 
-.emotion-20 .MuiChip-avatarSmall {
+.emotion-26 .MuiChip-avatarSmall {
   margin-left: 4px;
   margin-right: -4px;
   width: 18px;
@@ -983,12 +1016,12 @@ label+.emotion-18 {
   font-size: 0.5804rem;
 }
 
-.emotion-20 .MuiChip-icon {
+.emotion-26 .MuiChip-icon {
   margin-left: 5px;
   margin-right: -6px;
 }
 
-.emotion-20 .MuiChip-deleteIcon {
+.emotion-26 .MuiChip-deleteIcon {
   -webkit-tap-highlight-color: transparent;
   color: rgba(10, 10, 11, 0.26);
   font-size: 22px;
@@ -996,23 +1029,23 @@ label+.emotion-18 {
   margin: 0 5px 0 -6px;
 }
 
-.emotion-20 .MuiChip-deleteIcon:hover {
+.emotion-26 .MuiChip-deleteIcon:hover {
   color: rgba(10, 10, 11, 0.4);
 }
 
-.emotion-20 .MuiChip-icon {
+.emotion-26 .MuiChip-icon {
   color: #bcbcbc;
 }
 
-.emotion-20:hover {
+.emotion-26:hover {
   font-weight: bold;
 }
 
-.emotion-20:hover {
+.emotion-26:hover {
   font-weight: bold;
 }
 
-.emotion-21 {
+.emotion-27 {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 12px;
@@ -1044,17 +1077,16 @@ label+.emotion-18 {
             class="filter-list"
           />
           <div
-            class="flexbox center-aligned relative"
+            class="flexbox center-aligned margin-top-small margin-bottom-small relative"
           >
             <div
               class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon emotion-3"
             >
               <div
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-4"
-                style="margin-top: 0px; margin-bottom: 15px;"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-5"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-5"
                   data-shrink="false"
                   for="filter-selection"
                   id="filter-selection-label"
@@ -1062,7 +1094,7 @@ label+.emotion-18 {
                   Attribute
                 </label>
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-6"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-6"
                 >
                   <input
                     aria-autocomplete="both"
@@ -1070,7 +1102,7 @@ label+.emotion-18 {
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-7"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-7"
                     id="filter-selection"
                     role="combobox"
                     spellcheck="false"
@@ -1104,16 +1136,28 @@ label+.emotion-18 {
                       </svg>
                     </button>
                   </div>
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-12"
+                  >
+                    <legend
+                      class="emotion-13"
+                    >
+                      <span>
+                        Attribute
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
               </div>
             </div>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary margin-left-small margin-right-small MuiSelect-root emotion-12"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary margin-left-small margin-right-small MuiSelect-root emotion-14"
             >
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-13"
+                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-15"
                 role="combobox"
                 tabindex="0"
               >
@@ -1122,13 +1166,13 @@ label+.emotion-18 {
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput emotion-14"
+                class="MuiSelect-nativeInput emotion-16"
                 tabindex="-1"
                 value="$eq"
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-15"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-17"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1137,13 +1181,27 @@ label+.emotion-18 {
                   d="M7 10l5 5 5-5z"
                 />
               </svg>
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-12"
+              >
+                <legend
+                  class="emotion-19"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="notranslate"
+                  >
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <div
-              class="MuiFormControl-root MuiTextField-root emotion-16"
-              style="margin-top: 0px; margin-bottom: 15px;"
+              class="MuiFormControl-root MuiTextField-root emotion-20"
             >
               <label
-                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-5"
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-5"
                 data-shrink="false"
                 for=":r4:"
                 id=":r4:-label"
@@ -1151,15 +1209,27 @@ label+.emotion-18 {
                 Value
               </label>
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-22"
               >
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiInput-input emotion-7"
+                  class="MuiInputBase-input MuiOutlinedInput-input emotion-23"
                   id=":r4:"
                   type="text"
                   value=""
                 />
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline emotion-12"
+                >
+                  <legend
+                    class="emotion-13"
+                  >
+                    <span>
+                      Value
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
           </div>
@@ -1168,10 +1238,10 @@ label+.emotion-18 {
             data-mui-internal-clone-element="true"
           >
             <div
-              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault emotion-20"
+              class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault emotion-26"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium emotion-21"
+                class="MuiChip-label MuiChip-labelMedium emotion-27"
               >
                 Professional
               </span>
diff --git a/frontend/src/js/components/devices/widgets/__snapshots__/IssueSelection.test.tsx.snap b/frontend/src/js/components/devices/widgets/__snapshots__/IssueSelection.test.tsx.snap
index cb123873..88bfa0f5 100644
--- a/frontend/src/js/components/devices/widgets/__snapshots__/IssueSelection.test.tsx.snap
+++ b/frontend/src/js/components/devices/widgets/__snapshots__/IssueSelection.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`DeviceIssuesSelection Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-0.Mui-disabled {
@@ -26,6 +27,32 @@ exports[`DeviceIssuesSelection Component renders correctly 1`] = `
   cursor: default;
 }
 
+.emotion-0:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-0:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-0.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-0.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-0.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
 .emotion-1 {
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -35,6 +62,7 @@ exports[`DeviceIssuesSelection Component renders correctly 1`] = `
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -52,6 +80,7 @@ exports[`DeviceIssuesSelection Component renders correctly 1`] = `
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-1:focus {
@@ -71,9 +100,12 @@ exports[`DeviceIssuesSelection Component renders correctly 1`] = `
   background-color: #fff;
 }
 
+.emotion-1:focus {
+  border-radius: 4px;
+}
+
 .emotion-1.emotion-1.emotion-1 {
-  padding-right: 24px;
-  min-width: 16px;
+  padding-right: 32px;
 }
 
 .emotion-1.MuiSelect-select {
@@ -153,6 +185,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-1:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-2 {
   bottom: 0;
   left: 0;
@@ -183,6 +219,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
 .emotion-3 iconButton {
@@ -193,6 +230,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.26);
 }
 
+.emotion-4 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-5 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
 <div>
   <div
     class="flexbox center-aligned margin-left"
@@ -201,12 +266,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
       Show:
     </div>
     <div
-      class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary MuiSelect-root emotion-0"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiSelect-root emotion-0"
     >
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input emotion-1"
+        class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input emotion-1"
         role="combobox"
         tabindex="0"
       >
@@ -221,7 +286,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
       />
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-3"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-3"
         data-testid="ArrowDropDownIcon"
         focusable="false"
         viewBox="0 0 24 24"
@@ -230,6 +295,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-1:focus::-ms-input-p
           d="M7 10l5 5 5-5z"
         />
       </svg>
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline emotion-4"
+      >
+        <legend
+          class="emotion-5"
+        >
+          <span
+            aria-hidden="true"
+            class="notranslate"
+          >
+            ​
+          </span>
+        </legend>
+      </fieldset>
     </div>
   </div>
 </div>
diff --git a/frontend/src/js/components/header/Header.tsx b/frontend/src/js/components/header/Header.tsx
index 9e36bc58..8dc3e853 100644
--- a/frontend/src/js/components/header/Header.tsx
+++ b/frontend/src/js/components/header/Header.tsx
@@ -146,7 +146,8 @@ const useStyles = makeStyles()(theme => ({
   organization: { marginBottom: theme.spacing() },
   redAnnouncementIcon: {
     color: theme.palette.error.dark
-  }
+  },
+  search: { alignSelf: 'center' }
 }));
 
 const AccountMenu = () => {
@@ -378,7 +379,7 @@ export const Header = ({ isDarkMode }) => {
           </>
         ) : (
           <>
-            <Search isSearching={isSearching} searchTerm={searchTerm} onSearch={onSearch} trigger={refreshTrigger} />
+            <Search className={classes.search} isSearching={isSearching} searchTerm={searchTerm} onSearch={onSearch} trigger={refreshTrigger} />
             <div className="flexbox center-aligned">
               <DeviceNotifications pending={pendingDevices} total={acceptedDevices} limit={deviceLimit} />
               <DeploymentNotifications inprogress={inProgress} />
diff --git a/frontend/src/js/components/login/Login.tsx b/frontend/src/js/components/login/Login.tsx
index 21de8d94..665836ef 100644
--- a/frontend/src/js/components/login/Login.tsx
+++ b/frontend/src/js/components/login/Login.tsx
@@ -78,7 +78,7 @@ const useStyles = makeStyles()(theme => {
       transform: `skew(0, -${skew}deg)`,
       zIndex: 1
     },
-    link: { marginLeft: theme.spacing(-0.5) },
+    link: { marginTop: theme.spacing(0.5) },
     ntBranding: { bottom: `calc(${theme.mixins.toolbar.minHeight}px + 3vh)`, right: 0, zIndex: 0 },
     tfaNote: { maxWidth: 300 },
     tfaTip: { position: 'absolute', right: -120 }
@@ -213,7 +213,7 @@ export const Login = () => {
             <Form className={classes.form} showButtons={true} buttonColor="primary" onSubmit={onLoginClick} submitLabel="Log in">
               <TextInput hint="Your email" label="Your email" id="email" required={true} validations="isLength:1,isEmail,trim" />
               <Collapse in={showPassword}>
-                <PasswordInput className="margin-bottom-small" id="password" label="Password" required={showPassword} />
+                <PasswordInput className="margin-top-small" id="password" label="Password" required={showPassword} />
               </Collapse>
               {isHosted ? (
                 <div className="flexbox">
diff --git a/frontend/src/js/components/login/Signup.test.tsx b/frontend/src/js/components/login/Signup.test.tsx
index dff84146..1a529918 100644
--- a/frontend/src/js/components/login/Signup.test.tsx
+++ b/frontend/src/js/components/login/Signup.test.tsx
@@ -56,7 +56,7 @@ describe('Signup Component', () => {
     await act(async () => jest.runOnlyPendingTimers());
     expect(screen.getByRole('button', { name: /sign up/i })).toBeEnabled();
     await user.click(screen.getByRole('button', { name: /sign up/i }));
-    await waitFor(() => screen.queryByText('Company or organization name *'));
+    await waitFor(() => screen.queryByPlaceholderText('Company or organization name *'));
     await user.type(screen.getByRole('textbox', { name: /company or organization name \*/i }), 'test');
     expect(screen.getByRole('button', { name: /complete signup/i })).toBeDisabled();
     await user.click(screen.getByRole('checkbox', { name: /by checking this you agree to our/i }));
diff --git a/frontend/src/js/components/login/__snapshots__/Login.test.tsx.snap b/frontend/src/js/components/login/__snapshots__/Login.test.tsx.snap
index 55c2dae5..7b23881e 100644
--- a/frontend/src/js/components/login/__snapshots__/Login.test.tsx.snap
+++ b/frontend/src/js/components/login/__snapshots__/Login.test.tsx.snap
@@ -247,7 +247,6 @@ exports[`Login Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -275,6 +274,13 @@ exports[`Login Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-15.Mui-focused {
@@ -311,6 +317,7 @@ exports[`Login Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-16.Mui-disabled {
@@ -318,77 +325,30 @@ exports[`Login Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-16 {
-  margin-top: 16px;
-}
-
-.emotion-16::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-16.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-16.Mui-error::before,
-.emotion-16.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-16::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-16:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-16:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-16:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-16:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-16.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-16::after {
-  border-bottom: 2px solid #337a87;
+.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-16:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-16.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-16:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-16:after {
-  border-bottom: 2px solid #337a87;
+.emotion-16.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-17 {
@@ -409,6 +369,7 @@ label+.emotion-16 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-17::-webkit-input-placeholder {
@@ -480,7 +441,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-17:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-18 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-19 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-19>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-20 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -491,24 +497,26 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-20.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-18.Mui-error {
+.emotion-20.Mui-error {
   color: #ab1000;
 }
 
-.emotion-19 {
+.emotion-21 {
   height: 0;
   overflow: hidden;
   -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-20 {
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -516,11 +524,159 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   width: 100%;
 }
 
-.emotion-21 {
+.emotion-23 {
   width: 100%;
 }
 
 .emotion-26 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
+}
+
+.emotion-26.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-26:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-26:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-26.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-26.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-26.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-26.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-27 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
+}
+
+.emotion-27::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-27::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-27::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-27:focus {
+  outline: 0;
+}
+
+.emotion-27:invalid {
+  box-shadow: none;
+}
+
+.emotion-27::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-27::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-27::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-27::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-27:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-27:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-27:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-27.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-27:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-27:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -535,7 +691,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   margin-left: 8px;
 }
 
-.emotion-27 {
+.emotion-29 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -585,42 +741,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-27::-moz-focus-inner {
+.emotion-29::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-27.Mui-disabled {
+.emotion-29.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-27 {
+  .emotion-29 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-27:hover {
+.emotion-29:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-27:hover {
+  .emotion-29:hover {
     background-color: transparent;
   }
 }
 
-.emotion-27.Mui-disabled {
+.emotion-29.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-27.MuiIconButton-loading {
+.emotion-29.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-28 {
+.emotion-30 {
   display: none;
   position: absolute;
   visibility: visible;
@@ -633,7 +789,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-29 {
+.emotion-31 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -650,15 +806,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   font-size: 1.3929rem;
 }
 
-.emotion-29 iconButton {
+.emotion-31 iconButton {
   margin-right: 8px;
 }
 
-.emotion-31 {
-  margin-left: -4px;
+.emotion-35 {
+  margin-top: 4px;
 }
 
-.emotion-32 {
+.emotion-36 {
   height: 0;
   overflow: hidden;
   -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -666,7 +822,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   visibility: hidden;
 }
 
-.emotion-40 {
+.emotion-46 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -683,15 +839,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   margin-top: 18px;
 }
 
-.emotion-40.Mui-disabled {
+.emotion-46.Mui-disabled {
   cursor: default;
 }
 
-.emotion-40 .MuiFormControlLabel-label.Mui-disabled {
+.emotion-46 .MuiFormControlLabel-label.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-41 {
+.emotion-47 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -730,42 +886,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-41::-moz-focus-inner {
+.emotion-47::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-41.Mui-disabled {
+.emotion-47.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-41 {
+  .emotion-47 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-41:hover {
+.emotion-47:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-41.Mui-checked,
-.emotion-41.MuiCheckbox-indeterminate {
+.emotion-47.Mui-checked,
+.emotion-47.MuiCheckbox-indeterminate {
   color: #337a87;
 }
 
-.emotion-41.Mui-disabled {
+.emotion-47.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: none) {
-  .emotion-41:hover {
+  .emotion-47:hover {
     background-color: transparent;
   }
 }
 
-.emotion-42 {
+.emotion-48 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -778,7 +934,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   z-index: 1;
 }
 
-.emotion-44 {
+.emotion-50 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -786,7 +942,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   font-size: 0.9286rem;
 }
 
-.emotion-45 {
+.emotion-51 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -801,15 +957,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
   margin-top: 32px;
 }
 
-.emotion-47 {
+.emotion-53 {
   color: #fff;
 }
 
-.emotion-47 a {
+.emotion-53 a {
   color: #7adce6;
 }
 
-.emotion-49 {
+.emotion-55 {
   bottom: calc(56px + 3vh);
   right: 0;
   z-index: 0;
@@ -968,43 +1124,53 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
             style="width: 400px;"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-15"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-15"
               data-shrink="false"
               for="email"
             >
               Your email
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-16"
-              required=""
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-16"
             >
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input emotion-17"
+                class="MuiInputBase-input MuiOutlinedInput-input emotion-17"
                 id="email"
                 name="email"
                 placeholder="Your email"
-                required=""
                 type="text"
                 value=""
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-18"
+              >
+                <legend
+                  class="emotion-19"
+                >
+                  <span>
+                    Your email
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <p
-              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-18"
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-20"
             />
           </div>
           <div
-            class="MuiCollapse-root MuiCollapse-vertical emotion-19"
+            class="MuiCollapse-root MuiCollapse-vertical emotion-21"
             style="min-height: 0px; height: 0px; transition-duration: 300ms;"
           >
             <div
-              class="MuiCollapse-wrapper MuiCollapse-vertical emotion-20"
+              class="MuiCollapse-wrapper MuiCollapse-vertical emotion-22"
             >
               <div
-                class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-21"
+                class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-23"
               >
                 <div
-                  class="margin-bottom-small"
+                  class="margin-top-small"
                 >
                   <div
                     class="password-wrapper"
@@ -1014,38 +1180,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
                       style="width: 400px;"
                     >
                       <label
-                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-15"
+                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-15"
                         data-shrink="false"
                         for="password"
                       >
                         Password
                       </label>
                       <div
-                        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-16"
+                        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-26"
                       >
                         <input
                           aria-invalid="false"
-                          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-17"
+                          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-27"
                           id="password"
                           name="password"
                           type="password"
                           value=""
                         />
                         <div
-                          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-26"
+                          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-28"
                         >
                           <button
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-27"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-29"
                             id=":r3:"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="MuiIconButton-loadingIndicator emotion-28"
+                              class="MuiIconButton-loadingIndicator emotion-30"
                             />
                             <svg
                               aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-29"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-31"
                               data-testid="VisibilityOffIcon"
                               focusable="false"
                               viewBox="0 0 24 24"
@@ -1056,9 +1222,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
                             </svg>
                           </button>
                         </div>
+                        <fieldset
+                          aria-hidden="true"
+                          class="MuiOutlinedInput-notchedOutline emotion-18"
+                        >
+                          <legend
+                            class="emotion-19"
+                          >
+                            <span>
+                              Password
+                            </span>
+                          </legend>
+                        </fieldset>
                       </div>
                       <p
-                        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-18"
+                        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-20"
                       />
                     </div>
                   </div>
@@ -1070,7 +1248,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
             class="flexbox"
           >
             <a
-              class="emotion-31"
+              class="emotion-35"
               data-discover="true"
               href="/password"
             >
@@ -1078,60 +1256,72 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
             </a>
           </div>
           <div
-            class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden emotion-32"
+            class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden emotion-36"
             style="min-height: 0px;"
           >
             <div
-              class="MuiCollapse-wrapper MuiCollapse-vertical emotion-20"
+              class="MuiCollapse-wrapper MuiCollapse-vertical emotion-22"
             >
               <div
-                class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-21"
+                class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-23"
               >
                 <div
                   class="MuiFormControl-root emotion-14"
                   style="width: 400px;"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-15"
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-15"
                     data-shrink="false"
                     for="token2fa"
                   >
                     Two Factor Authentication Code
                   </label>
                   <div
-                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-16"
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-16"
                   >
                     <input
                       aria-invalid="false"
-                      class="MuiInputBase-input MuiInput-input emotion-17"
+                      class="MuiInputBase-input MuiOutlinedInput-input emotion-17"
                       id="token2fa"
                       name="token2fa"
                       placeholder="Two Factor Authentication Code"
                       type="text"
                       value=""
                     />
+                    <fieldset
+                      aria-hidden="true"
+                      class="MuiOutlinedInput-notchedOutline emotion-18"
+                    >
+                      <legend
+                        class="emotion-19"
+                      >
+                        <span>
+                          Two Factor Authentication Code
+                        </span>
+                      </legend>
+                    </fieldset>
                   </div>
                   <p
-                    class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-18"
+                    class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-20"
                   />
                 </div>
               </div>
             </div>
           </div>
           <label
-            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-40"
+            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-46"
           >
             <span
-              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-41"
+              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-47"
             >
               <input
-                class="PrivateSwitchBase-input emotion-42"
+                class="PrivateSwitchBase-input emotion-48"
                 data-indeterminate="false"
                 type="checkbox"
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-29"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-31"
                 data-testid="CheckBoxOutlineBlankIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1142,13 +1332,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
               </svg>
             </span>
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-44"
+              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-50"
             >
               Stay logged in
             </span>
           </label>
           <div
-            class="button-wrapper emotion-45 "
+            class="button-wrapper emotion-51 "
           >
             <button
               class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-3"
@@ -1163,7 +1353,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
         </form>
       </div>
       <div
-        class="margin-top margin-bottom flexbox centered emotion-47"
+        class="margin-top margin-bottom flexbox centered emotion-53"
       >
         <div
           class="muted margin-right"
@@ -1193,7 +1383,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-
     </div>
   </div>
   <svg
-    class="absolute emotion-49"
+    class="absolute emotion-55"
     id="Verymuch"
   />
 </div>
diff --git a/frontend/src/js/components/login/__snapshots__/Password.test.tsx.snap b/frontend/src/js/components/login/__snapshots__/Password.test.tsx.snap
index cbff76d6..fd38fdac 100644
--- a/frontend/src/js/components/login/__snapshots__/Password.test.tsx.snap
+++ b/frontend/src/js/components/login/__snapshots__/Password.test.tsx.snap
@@ -36,7 +36,6 @@ exports[`Password Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -64,6 +63,13 @@ exports[`Password Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-2.Mui-focused {
@@ -100,6 +106,7 @@ exports[`Password Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-3.Mui-disabled {
@@ -107,77 +114,30 @@ exports[`Password Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -198,6 +158,7 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -269,7 +230,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-6 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-6>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-7 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -280,17 +286,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-5.Mui-disabled {
+.emotion-7.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-5.Mui-error {
+.emotion-7.Mui-error {
   color: #ab1000;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -305,7 +313,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   margin-top: 32px;
 }
 
-.emotion-7 {
+.emotion-9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -364,57 +372,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-7::-moz-focus-inner {
+.emotion-9::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-7 {
+  .emotion-9 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-7:hover {
+  .emotion-9:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-7:active {
+.emotion-9:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-7.Mui-focusVisible {
+.emotion-9.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-7:hover {
+  .emotion-9:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -422,15 +430,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   }
 }
 
-.emotion-7.MuiButton-loading {
+.emotion-9.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   colors: #337a87;
 }
 
-.emotion-7.MuiButton-text {
+.emotion-9.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -508,36 +516,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         style="width: 400px;"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-2"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-2"
           data-shrink="false"
           for="email"
         >
           Your email
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-3"
-          required=""
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-3"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input emotion-4"
+            class="MuiInputBase-input MuiOutlinedInput-input emotion-4"
             id="email"
             name="email"
             placeholder="Your email"
-            required=""
             type="text"
             value=""
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-5"
+          >
+            <legend
+              class="emotion-6"
+            >
+              <span>
+                Your email
+              </span>
+            </legend>
+          </fieldset>
         </div>
         <p
-          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-5"
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-7"
         />
       </div>
       <div
-        class="button-wrapper emotion-6 "
+        class="button-wrapper emotion-8 "
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-7"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-9"
           disabled=""
           id=":r0:"
           tabindex="-1"
diff --git a/frontend/src/js/components/login/__snapshots__/PasswordReset.test.tsx.snap b/frontend/src/js/components/login/__snapshots__/PasswordReset.test.tsx.snap
index f6e51870..f29aa723 100644
--- a/frontend/src/js/components/login/__snapshots__/PasswordReset.test.tsx.snap
+++ b/frontend/src/js/components/login/__snapshots__/PasswordReset.test.tsx.snap
@@ -36,7 +36,6 @@ exports[`PasswordReset Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -64,6 +63,13 @@ exports[`PasswordReset Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-2.Mui-focused {
@@ -100,6 +106,8 @@ exports[`PasswordReset Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -107,77 +115,30 @@ exports[`PasswordReset Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -198,6 +159,8 @@ label+.emotion-3 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -269,6 +232,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -404,6 +371,47 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
 }
 
 .emotion-9 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-10 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-10>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-11 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -414,17 +422,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-11.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-9.Mui-error {
+.emotion-11.Mui-error {
   color: #ab1000;
 }
 
-.emotion-19 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -439,7 +449,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   margin-top: 32px;
 }
 
-.emotion-20 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -498,57 +508,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-20::-moz-focus-inner {
+.emotion-24::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-20 {
+  .emotion-24 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-20:active {
+.emotion-24:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-focusVisible {
+.emotion-24.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -556,15 +566,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   }
 }
 
-.emotion-20.MuiButton-loading {
+.emotion-24.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   colors: #337a87;
 }
 
-.emotion-20.MuiButton-text {
+.emotion-24.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -643,19 +653,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
             style="width: 400px;"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-2"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-2"
               data-shrink="false"
               for="password"
             >
               Password *
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-3"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-3"
               required=""
             >
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-4"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-4"
                 id="password"
                 name="password"
                 required=""
@@ -663,7 +673,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
                 value=""
               />
               <div
-                class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-5"
+                class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-5"
               >
                 <button
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-6"
@@ -687,9 +697,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
                   </svg>
                 </button>
               </div>
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-9"
+              >
+                <legend
+                  class="emotion-10"
+                >
+                  <span>
+                    Password *
+                     
+                    *
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <p
-              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-9"
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-11"
             />
           </div>
         </div>
@@ -717,19 +741,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
             style="width: 400px;"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-2"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-2"
               data-shrink="false"
               for="password_confirmation"
             >
               Confirm password *
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-3"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-3"
               required=""
             >
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-4"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-4"
                 id="password_confirmation"
                 name="password_confirmation"
                 required=""
@@ -737,7 +761,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
                 value=""
               />
               <div
-                class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-5"
+                class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-5"
               >
                 <button
                   class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-6"
@@ -761,18 +785,32 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
                   </svg>
                 </button>
               </div>
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-9"
+              >
+                <legend
+                  class="emotion-10"
+                >
+                  <span>
+                    Confirm password *
+                     
+                    *
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <p
-              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-9"
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-11"
             />
           </div>
         </div>
       </div>
       <div
-        class="button-wrapper emotion-19 "
+        class="button-wrapper emotion-23 "
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-20"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-24"
           disabled=""
           id=":r2:"
           tabindex="-1"
diff --git a/frontend/src/js/components/login/__snapshots__/Signup.test.tsx.snap b/frontend/src/js/components/login/__snapshots__/Signup.test.tsx.snap
index 9ceb4823..0fd20bd4 100644
--- a/frontend/src/js/components/login/__snapshots__/Signup.test.tsx.snap
+++ b/frontend/src/js/components/login/__snapshots__/Signup.test.tsx.snap
@@ -221,7 +221,6 @@ exports[`Signup Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -249,6 +248,13 @@ exports[`Signup Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-14.Mui-focused {
@@ -285,6 +291,7 @@ exports[`Signup Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-15.Mui-disabled {
@@ -292,77 +299,30 @@ exports[`Signup Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-15 {
-  margin-top: 16px;
-}
-
-.emotion-15::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-15.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-15.Mui-error::before,
-.emotion-15.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-15::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-15:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-15:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-15:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-15.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-15.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-15::after {
-  border-bottom: 2px solid #337a87;
+.emotion-15.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-15:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-15.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-15:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-15:after {
-  border-bottom: 2px solid #337a87;
+.emotion-15.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-16 {
@@ -383,6 +343,7 @@ label+.emotion-15 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-16::-webkit-input-placeholder {
@@ -454,7 +415,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-16:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-17 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-18 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-18>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-19 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -465,17 +471,167 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-17.Mui-disabled {
+.emotion-19.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-17.Mui-error {
+.emotion-19.Mui-error {
   color: #ab1000;
 }
 
 .emotion-22 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
+}
+
+.emotion-22.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-22:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-22:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-22.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-22.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-22.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-22.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-23 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
+}
+
+.emotion-23::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-23::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-23::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-23:focus {
+  outline: 0;
+}
+
+.emotion-23:invalid {
+  box-shadow: none;
+}
+
+.emotion-23::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-23.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-23:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-23:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -490,7 +646,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   margin-left: 8px;
 }
 
-.emotion-23 {
+.emotion-25 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -540,42 +696,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-23::-moz-focus-inner {
+.emotion-25::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-23.Mui-disabled {
+.emotion-25.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-23 {
+  .emotion-25 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-23:hover {
+.emotion-25:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-23:hover {
+  .emotion-25:hover {
     background-color: transparent;
   }
 }
 
-.emotion-23.Mui-disabled {
+.emotion-25.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-23.MuiIconButton-loading {
+.emotion-25.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-24 {
+.emotion-26 {
   display: none;
   position: absolute;
   visibility: visible;
@@ -588,7 +744,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-25 {
+.emotion-27 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -605,11 +761,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   font-size: 1.3929rem;
 }
 
-.emotion-25 iconButton {
+.emotion-27 iconButton {
   margin-right: 8px;
 }
 
-.emotion-37 {
+.emotion-43 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -626,11 +782,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
   font-size: 1.1607rem;
 }
 
-.emotion-37 iconButton {
+.emotion-43 iconButton {
   margin-right: 8px;
 }
 
-.emotion-38 {
+.emotion-44 {
   background: #f7f7f7;
   grid-template-rows: min-content min-content min-content;
   padding: 80px 0;
@@ -748,29 +904,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
             style="width: 400px;"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-14"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-14"
               data-shrink="false"
               for="email"
             >
               Email *
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-15"
-              required=""
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-15"
             >
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input emotion-16"
+                class="MuiInputBase-input MuiOutlinedInput-input emotion-16"
                 id="email"
                 name="email"
                 placeholder="Email *"
-                required=""
                 type="text"
                 value=""
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-17"
+              >
+                <legend
+                  class="emotion-18"
+                >
+                  <span>
+                    Email *
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <p
-              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-17"
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-19"
             />
           </div>
           <div
@@ -784,19 +950,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
                 style="width: 400px;"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-14"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-14"
                   data-shrink="false"
                   for="password"
                 >
                   Password *
                 </label>
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-15"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-22"
                   required=""
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-16"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-23"
                     id="password"
                     name="password"
                     required=""
@@ -804,20 +970,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
                     value=""
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-22"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-24"
                   >
                     <button
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-23"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-25"
                       id=":r3:"
                       tabindex="0"
                       type="button"
                     >
                       <span
-                        class="MuiIconButton-loadingIndicator emotion-24"
+                        class="MuiIconButton-loadingIndicator emotion-26"
                       />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-25"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-27"
                         data-testid="VisibilityOffIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -828,9 +994,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
                       </svg>
                     </button>
                   </div>
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-17"
+                  >
+                    <legend
+                      class="emotion-18"
+                    >
+                      <span>
+                        Password *
+                         
+                        *
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
                 <p
-                  class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-17"
+                  class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-19"
                 />
               </div>
             </div>
@@ -858,19 +1038,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
                 style="width: 400px;"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-14"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-14"
                   data-shrink="false"
                   for="password_confirmation"
                 >
                   Confirm password *
                 </label>
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-15"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-22"
                   required=""
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-16"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-23"
                     id="password_confirmation"
                     name="password_confirmation"
                     required=""
@@ -878,20 +1058,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
                     value=""
                   />
                   <div
-                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-22"
+                    class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-24"
                   >
                     <button
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-23"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-25"
                       id=":r4:"
                       tabindex="0"
                       type="button"
                     >
                       <span
-                        class="MuiIconButton-loadingIndicator emotion-24"
+                        class="MuiIconButton-loadingIndicator emotion-26"
                       />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-25"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-27"
                         data-testid="VisibilityOffIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -902,9 +1082,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
                       </svg>
                     </button>
                   </div>
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-17"
+                  >
+                    <legend
+                      class="emotion-18"
+                    >
+                      <span>
+                        Confirm password *
+                         
+                        *
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
                 <p
-                  class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-17"
+                  class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-19"
                 />
               </div>
             </div>
@@ -937,7 +1131,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
            
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-37"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-43"
             data-testid="ChevronRightIcon"
             focusable="false"
             viewBox="0 0 24 24"
@@ -950,7 +1144,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-
       </div>
     </div>
     <div
-      class="emotion-38"
+      class="emotion-44"
     >
       <h2>
         Connect up to 10 devices free for 12 months – no credit card required.
diff --git a/frontend/src/js/components/login/signup-steps/OrgdataEntry.tsx b/frontend/src/js/components/login/signup-steps/OrgdataEntry.tsx
index 887ad28c..061ee3e4 100644
--- a/frontend/src/js/components/login/signup-steps/OrgdataEntry.tsx
+++ b/frontend/src/js/components/login/signup-steps/OrgdataEntry.tsx
@@ -45,7 +45,7 @@ export const OrgDataEntry = ({ classes, emailVerified, recaptchaSiteKey = '', se
       <TextInput hint="Company or organization name *" label="Company or organization name *" id="name" required validations="isLength:1,trim" />
       {!emailVerified && <TextInput hint="Email *" label="Email *" id="email" required validations="isLength:1,isEmail,trim" />}
       <div className={classes.locationSelect}>
-        <div className="flexbox center-aligned margin-top slightly-smaller">
+        <div className="flexbox center-aligned slightly-smaller margin-bottom-x-small">
           <p className="margin-bottom-none margin-top-none muted" style={{ marginRight: 4 }}>
             Choose a hosting region for your account.
           </p>
diff --git a/frontend/src/js/components/login/signup-steps/__snapshots__/OrgdataEntry.test.tsx.snap b/frontend/src/js/components/login/signup-steps/__snapshots__/OrgdataEntry.test.tsx.snap
index 4c1fc134..ac416faf 100644
--- a/frontend/src/js/components/login/signup-steps/__snapshots__/OrgdataEntry.test.tsx.snap
+++ b/frontend/src/js/components/login/signup-steps/__snapshots__/OrgdataEntry.test.tsx.snap
@@ -156,7 +156,6 @@ exports[`Form Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -184,6 +183,13 @@ exports[`Form Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-6.Mui-focused {
@@ -220,6 +226,8 @@ exports[`Form Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-7.Mui-disabled {
@@ -227,77 +235,30 @@ exports[`Form Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-7 {
-  margin-top: 16px;
-}
-
-.emotion-7::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-7.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-7.Mui-error::before,
-.emotion-7.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-7::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-7:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-7:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-7:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-7:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-7.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-7::after {
-  border-bottom: 2px solid #337a87;
+.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-7:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-7.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-7:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-7:after {
-  border-bottom: 2px solid #337a87;
+.emotion-7.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-8 {
@@ -318,6 +279,8 @@ label+.emotion-7 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-8::-webkit-input-placeholder {
@@ -389,6 +352,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-8:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -503,6 +470,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
 }
 
 .emotion-13 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-14 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-15 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -513,17 +508,165 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-13.Mui-error {
+.emotion-15.Mui-error {
   color: #ab1000;
 }
 
+.emotion-18 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+}
+
+.emotion-18.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-18:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-18:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-18.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-18.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
 .emotion-19 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+}
+
+.emotion-19::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19:focus {
+  outline: 0;
+}
+
+.emotion-19:invalid {
+  box-shadow: none;
+}
+
+.emotion-19::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-19.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-19:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-19:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -538,7 +681,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-top: 32px;
 }
 
-.emotion-20 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -597,57 +740,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-20::-moz-focus-inner {
+.emotion-24::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-20 {
+  .emotion-24 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-20:active {
+.emotion-24:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-focusVisible {
+.emotion-24.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -655,15 +798,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   }
 }
 
-.emotion-20.MuiButton-loading {
+.emotion-24.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   colors: #337a87;
 }
 
-.emotion-20.MuiButton-text {
+.emotion-24.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -710,23 +853,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
         style="width: 400px;"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-6"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-6"
           data-shrink="false"
           for="password"
         />
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-7"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-7"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-8"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-8"
             id="password"
             name="password"
             type="password"
             value=""
           />
           <div
-            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-9"
+            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-9"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-10"
@@ -750,9 +893,24 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </svg>
             </button>
           </div>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-13"
+          >
+            <legend
+              class="emotion-14"
+            >
+              <span
+                aria-hidden="true"
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
         </div>
         <p
-          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-13"
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-15"
         />
       </div>
     </div>
@@ -776,31 +934,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
     style="width: 400px;"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-6"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-6"
       data-shrink="false"
       for="textbox"
     />
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-7"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiInput-input emotion-8"
+        class="MuiInputBase-input MuiOutlinedInput-input emotion-19"
         id="textbox"
         name="textbox"
         type="text"
         value=""
       />
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline emotion-13"
+      >
+        <legend
+          class="emotion-14"
+        >
+          <span
+            aria-hidden="true"
+            class="notranslate"
+          >
+            ​
+          </span>
+        </legend>
+      </fieldset>
     </div>
     <p
-      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-13"
+      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-15"
     />
   </div>
   <div
-    class="button-wrapper emotion-19 "
+    class="button-wrapper emotion-23 "
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-20"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-24"
       disabled=""
       id=":r1:"
       tabindex="-1"
@@ -825,7 +998,6 @@ exports[`Login Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -853,6 +1025,13 @@ exports[`Login Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-1.Mui-focused {
@@ -889,6 +1068,7 @@ exports[`Login Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-2.Mui-disabled {
@@ -896,77 +1076,30 @@ exports[`Login Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-2 {
-  margin-top: 16px;
-}
-
-.emotion-2::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-2.Mui-error::before,
-.emotion-2.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-2::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-2:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-2:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-2.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-2::after {
-  border-bottom: 2px solid #337a87;
+.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-2:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-2:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-2.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-2:after {
-  border-bottom: 2px solid #337a87;
+.emotion-2.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-3 {
@@ -987,6 +1120,7 @@ label+.emotion-2 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-3::-webkit-input-placeholder {
@@ -1058,7 +1192,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-3:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-4 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-5 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-5>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-6 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1069,17 +1248,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-4.Mui-disabled {
+.emotion-6.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-4.Mui-error {
+.emotion-6.Mui-error {
   color: #ab1000;
 }
 
-.emotion-10 {
+.emotion-14 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1097,83 +1278,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-10.Mui-disabled {
+.emotion-14.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-.emotion-10::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-10.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-10.Mui-error::before,
-.emotion-10.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-10::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-10:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-14:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-10:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-14:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-10.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-10::after {
-  border-bottom: 2px solid #337a87;
+.emotion-14.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-10:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-14.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-10:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-14.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-10:after {
-  border-bottom: 2px solid #337a87;
-}
-
-.emotion-11 {
+.emotion-15 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -1182,6 +1321,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -1199,31 +1339,35 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-11:focus {
+.emotion-15:focus {
   border-radius: 0;
 }
 
-.emotion-11.Mui-disabled {
+.emotion-15.Mui-disabled {
   cursor: default;
 }
 
-.emotion-11[multiple] {
+.emotion-15[multiple] {
   height: auto;
 }
 
-.emotion-11:not([multiple]) option,
-.emotion-11:not([multiple]) optgroup {
+.emotion-15:not([multiple]) option,
+.emotion-15:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-11.emotion-11.emotion-11 {
-  padding-right: 24px;
-  min-width: 16px;
+.emotion-15:focus {
+  border-radius: 4px;
 }
 
-.emotion-11.MuiSelect-select {
+.emotion-15.emotion-15.emotion-15 {
+  padding-right: 32px;
+}
+
+.emotion-15.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -1231,76 +1375,80 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   overflow: hidden;
 }
 
-.emotion-11::-webkit-input-placeholder {
+.emotion-15::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-11::-moz-placeholder {
+.emotion-15::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-11::-ms-input-placeholder {
+.emotion-15::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-11:focus {
+.emotion-15:focus {
   outline: 0;
 }
 
-.emotion-11:invalid {
+.emotion-15:invalid {
   box-shadow: none;
 }
 
-.emotion-11::-webkit-search-decoration {
+.emotion-15::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-11.Mui-disabled {
+.emotion-15.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-11:-webkit-autofill {
+.emotion-15:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-12 {
+.emotion-15:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-16 {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -1310,7 +1458,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
   box-sizing: border-box;
 }
 
-.emotion-13 {
+.emotion-17 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1330,17 +1478,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
-.emotion-13 iconButton {
+.emotion-17 iconButton {
   margin-right: 8px;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-17.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-14 {
+.emotion-19 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-20 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1357,15 +1516,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
   margin-top: 18px;
 }
 
-.emotion-14.Mui-disabled {
+.emotion-20.Mui-disabled {
   cursor: default;
 }
 
-.emotion-14 .MuiFormControlLabel-label.Mui-disabled {
+.emotion-20 .MuiFormControlLabel-label.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-15 {
+.emotion-21 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1404,42 +1563,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-15::-moz-focus-inner {
+.emotion-21::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-15.Mui-disabled {
+.emotion-21.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-15 {
+  .emotion-21 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-15:hover {
+.emotion-21:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-15.Mui-checked,
-.emotion-15.MuiCheckbox-indeterminate {
+.emotion-21.Mui-checked,
+.emotion-21.MuiCheckbox-indeterminate {
   color: #337a87;
 }
 
-.emotion-15.Mui-disabled {
+.emotion-21.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: none) {
-  .emotion-15:hover {
+  .emotion-21:hover {
     background-color: transparent;
   }
 }
 
-.emotion-16 {
+.emotion-22 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -1452,7 +1611,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
   z-index: 1;
 }
 
-.emotion-17 {
+.emotion-23 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1469,11 +1628,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
   font-size: 1.3929rem;
 }
 
-.emotion-17 iconButton {
+.emotion-23 iconButton {
   margin-right: 8px;
 }
 
-.emotion-18 {
+.emotion-24 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -1500,29 +1659,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
       style="width: 400px;"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-1"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-1"
         data-shrink="false"
         for="name"
       >
         Company or organization name *
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-2"
-        required=""
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-2"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input emotion-3"
+          class="MuiInputBase-input MuiOutlinedInput-input emotion-3"
           id="name"
           name="name"
           placeholder="Company or organization name *"
-          required=""
           type="text"
           value=""
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-4"
+        >
+          <legend
+            class="emotion-5"
+          >
+            <span>
+              Company or organization name *
+            </span>
+          </legend>
+        </fieldset>
       </div>
       <p
-        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-4"
+        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-6"
       />
     </div>
     <div
@@ -1530,34 +1699,44 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
       style="width: 400px;"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-1"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-1"
         data-shrink="false"
         for="email"
       >
         Email *
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-2"
-        required=""
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-2"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input emotion-3"
+          class="MuiInputBase-input MuiOutlinedInput-input emotion-3"
           id="email"
           name="email"
           placeholder="Email *"
-          required=""
           type="text"
           value=""
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-4"
+        >
+          <legend
+            class="emotion-5"
+          >
+            <span>
+              Email *
+            </span>
+          </legend>
+        </fieldset>
       </div>
       <p
-        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-4"
+        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-6"
       />
     </div>
     <div>
       <div
-        class="flexbox center-aligned margin-top slightly-smaller"
+        class="flexbox center-aligned slightly-smaller margin-bottom-x-small"
       >
         <p
           class="margin-bottom-none margin-top-none muted"
@@ -1575,12 +1754,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
         </a>
       </div>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiSelect-root emotion-10"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiSelect-root emotion-14"
       >
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-11"
+          class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-15"
           role="combobox"
           tabindex="0"
         >
@@ -1594,13 +1773,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
         <input
           aria-hidden="true"
           aria-invalid="false"
-          class="MuiSelect-nativeInput emotion-12"
+          class="MuiSelect-nativeInput emotion-16"
           tabindex="-1"
           value=""
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-13"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-17"
           data-testid="ArrowDropDownIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -1609,23 +1788,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
             d="M7 10l5 5 5-5z"
           />
         </svg>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-4"
+        >
+          <legend
+            class="emotion-19"
+          >
+            <span
+              aria-hidden="true"
+              class="notranslate"
+            >
+              ​
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
     <label
-      class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-14"
+      class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-20"
     >
       <span
-        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-15"
+        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-21"
       >
         <input
-          class="PrivateSwitchBase-input emotion-16"
+          class="PrivateSwitchBase-input emotion-22"
           data-indeterminate="false"
           name="tos"
           type="checkbox"
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-17"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-23"
           data-testid="CheckBoxOutlineBlankIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -1636,7 +1830,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
         </svg>
       </span>
       <span
-        class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-18"
+        class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-24"
       >
         <label
           for="tos"
@@ -1664,20 +1858,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
       </span>
     </label>
     <label
-      class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-14"
+      class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-20"
     >
       <span
-        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-15"
+        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-21"
       >
         <input
-          class="PrivateSwitchBase-input emotion-16"
+          class="PrivateSwitchBase-input emotion-22"
           data-indeterminate="false"
           name="marketing"
           type="checkbox"
         />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-17"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-23"
           data-testid="CheckBoxOutlineBlankIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -1688,7 +1882,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
         </svg>
       </span>
       <span
-        class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-18"
+        class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-24"
       >
         By checking this you agree that we can send you occasional email updates about Mender. You can unsubscribe from these emails at any time
       </span>
diff --git a/frontend/src/js/components/login/signup-steps/__snapshots__/UserdataEntry.test.tsx.snap b/frontend/src/js/components/login/signup-steps/__snapshots__/UserdataEntry.test.tsx.snap
index 53b2532f..8160d117 100644
--- a/frontend/src/js/components/login/signup-steps/__snapshots__/UserdataEntry.test.tsx.snap
+++ b/frontend/src/js/components/login/signup-steps/__snapshots__/UserdataEntry.test.tsx.snap
@@ -156,7 +156,6 @@ exports[`Form Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -184,6 +183,13 @@ exports[`Form Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-6.Mui-focused {
@@ -220,6 +226,8 @@ exports[`Form Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
 }
 
 .emotion-7.Mui-disabled {
@@ -227,77 +235,30 @@ exports[`Form Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-7 {
-  margin-top: 16px;
-}
-
-.emotion-7::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-7.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-7.Mui-error::before,
-.emotion-7.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-7::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-7:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-7:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-7:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-7:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-7.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-7::after {
-  border-bottom: 2px solid #337a87;
+.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-7:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-7:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-7.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-7:after {
-  border-bottom: 2px solid #337a87;
+.emotion-7.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-8 {
@@ -318,6 +279,8 @@ label+.emotion-7 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
 }
 
 .emotion-8::-webkit-input-placeholder {
@@ -389,6 +352,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-8:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -503,6 +470,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
 }
 
 .emotion-13 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-14 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-15 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -513,17 +508,165 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-13.Mui-error {
+.emotion-15.Mui-error {
   color: #ab1000;
 }
 
+.emotion-18 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+}
+
+.emotion-18.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-18:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-18:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-18.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-18.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
 .emotion-19 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+}
+
+.emotion-19::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-19:focus {
+  outline: 0;
+}
+
+.emotion-19:invalid {
+  box-shadow: none;
+}
+
+.emotion-19::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-19.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-19:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-19:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -538,7 +681,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   margin-top: 32px;
 }
 
-.emotion-20 {
+.emotion-24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -597,57 +740,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-20::-moz-focus-inner {
+.emotion-24::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-20 {
+  .emotion-24 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-20:active {
+.emotion-24:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-focusVisible {
+.emotion-24.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-20.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-20:hover {
+  .emotion-24:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -655,15 +798,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
   }
 }
 
-.emotion-20.MuiButton-loading {
+.emotion-24.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-20:hover {
+.emotion-24:hover {
   colors: #337a87;
 }
 
-.emotion-20.MuiButton-text {
+.emotion-24.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -710,23 +853,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
         style="width: 400px;"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-6"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-6"
           data-shrink="false"
           for="password"
         />
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-7"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-7"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-8"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-8"
             id="password"
             name="password"
             type="password"
             value=""
           />
           <div
-            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-9"
+            class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-9"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-10"
@@ -750,9 +893,24 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
               </svg>
             </button>
           </div>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-13"
+          >
+            <legend
+              class="emotion-14"
+            >
+              <span
+                aria-hidden="true"
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
         </div>
         <p
-          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-13"
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-15"
         />
       </div>
     </div>
@@ -776,31 +934,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p
     style="width: 400px;"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-6"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-6"
       data-shrink="false"
       for="textbox"
     />
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-7"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-18"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiInput-input emotion-8"
+        class="MuiInputBase-input MuiOutlinedInput-input emotion-19"
         id="textbox"
         name="textbox"
         type="text"
         value=""
       />
+      <fieldset
+        aria-hidden="true"
+        class="MuiOutlinedInput-notchedOutline emotion-13"
+      >
+        <legend
+          class="emotion-14"
+        >
+          <span
+            aria-hidden="true"
+            class="notranslate"
+          >
+            ​
+          </span>
+        </legend>
+      </fieldset>
     </div>
     <p
-      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-13"
+      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-15"
     />
   </div>
   <div
-    class="button-wrapper emotion-19 "
+    class="button-wrapper emotion-23 "
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-20"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-24"
       disabled=""
       id=":r1:"
       tabindex="-1"
@@ -993,7 +1166,6 @@ exports[`Login Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -1021,6 +1193,13 @@ exports[`Login Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-11.Mui-focused {
@@ -1057,6 +1236,7 @@ exports[`Login Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-12.Mui-disabled {
@@ -1064,77 +1244,30 @@ exports[`Login Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-12 {
-  margin-top: 16px;
-}
-
-.emotion-12::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-12.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-12.Mui-error::before,
-.emotion-12.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-12::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-12:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-12:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-12:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-12:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-12.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-12::after {
-  border-bottom: 2px solid #337a87;
+.emotion-12.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-12:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-12.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-12:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-12.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-12:after {
-  border-bottom: 2px solid #337a87;
+.emotion-12.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-13 {
@@ -1155,6 +1288,7 @@ label+.emotion-12 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-13::-webkit-input-placeholder {
@@ -1226,7 +1360,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
+.emotion-13:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-14 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-15 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-15>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-16 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1237,17 +1416,167 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-14.Mui-disabled {
+.emotion-16.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-14.Mui-error {
+.emotion-16.Mui-error {
   color: #ab1000;
 }
 
 .emotion-19 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
+}
+
+.emotion-19.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-19:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-19:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-19.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-19.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-20 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
+}
+
+.emotion-20::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-20::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-20::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-20:focus {
+  outline: 0;
+}
+
+.emotion-20:invalid {
+  box-shadow: none;
+}
+
+.emotion-20::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-20.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-20:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-20:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1262,7 +1591,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   margin-left: 8px;
 }
 
-.emotion-20 {
+.emotion-22 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1312,42 +1641,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-20::-moz-focus-inner {
+.emotion-22::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-22.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-20 {
+  .emotion-22 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-20:hover {
+.emotion-22:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-20:hover {
+  .emotion-22:hover {
     background-color: transparent;
   }
 }
 
-.emotion-20.Mui-disabled {
+.emotion-22.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-20.MuiIconButton-loading {
+.emotion-22.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-21 {
+.emotion-23 {
   display: none;
   position: absolute;
   visibility: visible;
@@ -1360,7 +1689,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-22 {
+.emotion-24 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1377,7 +1706,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
   font-size: 1.3929rem;
 }
 
-.emotion-22 iconButton {
+.emotion-24 iconButton {
   margin-right: 8px;
 }
 
@@ -1480,29 +1809,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
       style="width: 400px;"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-11"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-11"
         data-shrink="false"
         for="email"
       >
         Email *
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-12"
-        required=""
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-12"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input emotion-13"
+          class="MuiInputBase-input MuiOutlinedInput-input emotion-13"
           id="email"
           name="email"
           placeholder="Email *"
-          required=""
           type="text"
           value=""
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-14"
+        >
+          <legend
+            class="emotion-15"
+          >
+            <span>
+              Email *
+            </span>
+          </legend>
+        </fieldset>
       </div>
       <p
-        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-14"
+        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-16"
       />
     </div>
     <div
@@ -1516,19 +1855,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
           style="width: 400px;"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-11"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-11"
             data-shrink="false"
             for="password"
           >
             Password *
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-12"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-19"
             required=""
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-13"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-20"
               id="password"
               name="password"
               required=""
@@ -1536,20 +1875,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
               value=""
             />
             <div
-              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-19"
+              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-21"
             >
               <button
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-20"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-22"
                 id=":r8:"
                 tabindex="0"
                 type="button"
               >
                 <span
-                  class="MuiIconButton-loadingIndicator emotion-21"
+                  class="MuiIconButton-loadingIndicator emotion-23"
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-22"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-24"
                   data-testid="VisibilityOffIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1560,9 +1899,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-14"
+            >
+              <legend
+                class="emotion-15"
+              >
+                <span>
+                  Password *
+                   
+                  *
+                </span>
+              </legend>
+            </fieldset>
           </div>
           <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-14"
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-16"
           />
         </div>
       </div>
@@ -1590,19 +1943,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
           style="width: 400px;"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-11"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-11"
             data-shrink="false"
             for="password_confirmation"
           >
             Confirm password *
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-12"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-19"
             required=""
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-13"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-20"
               id="password_confirmation"
               name="password_confirmation"
               required=""
@@ -1610,20 +1963,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
               value=""
             />
             <div
-              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-19"
+              class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-21"
             >
               <button
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-20"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-22"
                 id=":r9:"
                 tabindex="0"
                 type="button"
               >
                 <span
-                  class="MuiIconButton-loadingIndicator emotion-21"
+                  class="MuiIconButton-loadingIndicator emotion-23"
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-22"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-24"
                   data-testid="VisibilityOffIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1634,9 +1987,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-13:focus::-ms-input-
                 </svg>
               </button>
             </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-14"
+            >
+              <legend
+                class="emotion-15"
+              >
+                <span>
+                  Confirm password *
+                   
+                  *
+                </span>
+              </legend>
+            </fieldset>
           </div>
           <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-14"
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-16"
           />
         </div>
       </div>
diff --git a/frontend/src/js/components/releases/ReleaseDetails.tsx b/frontend/src/js/components/releases/ReleaseDetails.tsx
index 6796234c..4d31563b 100644
--- a/frontend/src/js/components/releases/ReleaseDetails.tsx
+++ b/frontend/src/js/components/releases/ReleaseDetails.tsx
@@ -227,7 +227,7 @@ const ReleaseTags = ({ existingTags = [], release: { tags = [] }, onChange }) =>
         <h4 className="margin-right">Tags</h4>
         {!isEditing && <EditButton onClick={onToggleEdit} />}
       </div>
-      <div className="flexbox" style={{ alignItems: 'end' }}>
+      <div className="flexbox" style={{ alignItems: 'center' }}>
         <FormProvider {...methods}>
           <form noValidate>
             <ChipSelect
diff --git a/frontend/src/js/components/releases/Releases.tsx b/frontend/src/js/components/releases/Releases.tsx
index aff799cc..e19bb0a7 100644
--- a/frontend/src/js/components/releases/Releases.tsx
+++ b/frontend/src/js/components/releases/Releases.tsx
@@ -15,7 +15,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux';
 
 import { CloudUpload } from '@mui/icons-material';
-import { Button, Tab, Tabs, TextField } from '@mui/material';
+import { Button, Tab, Tabs, TextField, inputBaseClasses, outlinedInputClasses } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 
 import ChipSelect from '@northern.tech/common-ui/ChipSelect';
@@ -71,7 +71,8 @@ const useStyles = makeStyles()(theme => ({
   container: { maxWidth: 1600 },
   searchNote: { minHeight: '1.8rem' },
   tabContainer: { alignSelf: 'flex-start' },
-  uploadButton: { minWidth: 164, marginRight: theme.spacing(2) }
+  uploadButton: { minWidth: 164, marginRight: theme.spacing(2) },
+  nameSearch: { [`.${inputBaseClasses.root}.${outlinedInputClasses.root}`]: { paddingTop: theme.spacing(), paddingBottom: theme.spacing() } }
 }));
 
 const Header = ({ canUpload, releasesListState, setReleasesListState, onUploadClick }) => {
@@ -116,6 +117,7 @@ const Header = ({ canUpload, releasesListState, setReleasesListState, onUploadCl
               title: 'Release name',
               Component: ControlledSearch,
               componentProps: {
+                className: classes.nameSearch,
                 onSearch: searchUpdated,
                 placeholder: 'Starts with'
               }
diff --git a/frontend/src/js/components/releases/__snapshots__/ReleaseDetails.test.tsx.snap b/frontend/src/js/components/releases/__snapshots__/ReleaseDetails.test.tsx.snap
index 8e10c173..1847b8c6 100644
--- a/frontend/src/js/components/releases/__snapshots__/ReleaseDetails.test.tsx.snap
+++ b/frontend/src/js/components/releases/__snapshots__/ReleaseDetails.test.tsx.snap
@@ -535,7 +535,6 @@ exports[`ReleaseDetails Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -1884,7 +1883,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
     </div>
     <div
       class="flexbox"
-      style="align-items: end;"
+      style="align-items: center;"
     >
       <form
         novalidate=""
@@ -1898,6 +1897,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
           >
             <div
               class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-22"
+              variant="outlined"
             >
               <input
                 aria-autocomplete="list"
diff --git a/frontend/src/js/components/releases/__snapshots__/Releases.test.tsx.snap b/frontend/src/js/components/releases/__snapshots__/Releases.test.tsx.snap
index 8906963e..1a6e6f72 100644
--- a/frontend/src/js/components/releases/__snapshots__/Releases.test.tsx.snap
+++ b/frontend/src/js/components/releases/__snapshots__/Releases.test.tsx.snap
@@ -482,12 +482,12 @@ exports[`Releases Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-15 input {
-  font-size: 13px;
+.emotion-15 .MuiInputBase-root.MuiOutlinedInput-root {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .emotion-16 {
@@ -508,6 +508,8 @@ exports[`Releases Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
+  padding-left: 14px;
 }
 
 .emotion-16.Mui-disabled {
@@ -515,77 +517,30 @@ exports[`Releases Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-16 {
-  margin-top: 16px;
-}
-
-.emotion-16::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-16.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-16.Mui-error::before,
-.emotion-16.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-16::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-16:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-16:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-16:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-16:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-16.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-16::after {
-  border-bottom: 2px solid #337a87;
+.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-16:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-16:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-16.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-16:after {
-  border-bottom: 2px solid #337a87;
+.emotion-16.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-17 {
@@ -644,6 +599,9 @@ label+.emotion-16 {
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
   padding-top: 1px;
+  padding: 16.5px 14px;
+  padding: 8.5px 14px;
+  padding-left: 0;
 }
 
 .emotion-19::-webkit-input-placeholder {
@@ -715,128 +673,160 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
-.emotion-20.Mui-focused .MuiAutocomplete-clearIndicator {
+.emotion-19:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-20 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-21 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-22.Mui-focused .MuiAutocomplete-clearIndicator {
   visibility: visible;
 }
 
 @media (pointer: fine) {
-  .emotion-20:hover .MuiAutocomplete-clearIndicator {
+  .emotion-22:hover .MuiAutocomplete-clearIndicator {
     visibility: visible;
   }
 }
 
-.emotion-20 .MuiAutocomplete-tag {
+.emotion-22 .MuiAutocomplete-tag {
   margin: 3px;
   max-width: calc(100% - 6px);
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-20 .MuiAutocomplete-inputRoot,
-.MuiAutocomplete-hasClearIcon.emotion-20 .MuiAutocomplete-inputRoot {
+.MuiAutocomplete-hasPopupIcon.emotion-22 .MuiAutocomplete-inputRoot,
+.MuiAutocomplete-hasClearIcon.emotion-22 .MuiAutocomplete-inputRoot {
   padding-right: 30px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-20 .MuiAutocomplete-inputRoot {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-22 .MuiAutocomplete-inputRoot {
   padding-right: 56px;
 }
 
-.emotion-20 .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
+.emotion-22 .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
   width: 0;
   min-width: 30px;
 }
 
-.emotion-20 .MuiInput-root {
+.emotion-22 .MuiInput-root {
   padding-bottom: 1px;
 }
 
-.emotion-20 .MuiInput-root .MuiInput-input {
+.emotion-22 .MuiInput-root .MuiInput-input {
   padding: 4px 4px 4px 0px;
 }
 
-.emotion-20 .MuiInput-root.MuiInputBase-sizeSmall .MuiInput-input {
+.emotion-22 .MuiInput-root.MuiInputBase-sizeSmall .MuiInput-input {
   padding: 2px 4px 3px 0;
 }
 
-.emotion-20 .MuiOutlinedInput-root {
+.emotion-22 .MuiOutlinedInput-root {
   padding: 9px;
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-20 .MuiOutlinedInput-root,
-.MuiAutocomplete-hasClearIcon.emotion-20 .MuiOutlinedInput-root {
+.MuiAutocomplete-hasPopupIcon.emotion-22 .MuiOutlinedInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-22 .MuiOutlinedInput-root {
   padding-right: 39px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-20 .MuiOutlinedInput-root {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-22 .MuiOutlinedInput-root {
   padding-right: 65px;
 }
 
-.emotion-20 .MuiOutlinedInput-root .MuiAutocomplete-input {
+.emotion-22 .MuiOutlinedInput-root .MuiAutocomplete-input {
   padding: 7.5px 4px 7.5px 5px;
 }
 
-.emotion-20 .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
+.emotion-22 .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
   right: 9px;
 }
 
-.emotion-20 .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
+.emotion-22 .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 6px;
 }
 
-.emotion-20 .MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+.emotion-22 .MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input {
   padding: 2.5px 4px 2.5px 8px;
 }
 
-.emotion-20 .MuiFilledInput-root {
+.emotion-22 .MuiFilledInput-root {
   padding-top: 19px;
   padding-left: 8px;
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-20 .MuiFilledInput-root,
-.MuiAutocomplete-hasClearIcon.emotion-20 .MuiFilledInput-root {
+.MuiAutocomplete-hasPopupIcon.emotion-22 .MuiFilledInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-22 .MuiFilledInput-root {
   padding-right: 39px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-20 .MuiFilledInput-root {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-22 .MuiFilledInput-root {
   padding-right: 65px;
 }
 
-.emotion-20 .MuiFilledInput-root .MuiFilledInput-input {
+.emotion-22 .MuiFilledInput-root .MuiFilledInput-input {
   padding: 7px 4px;
 }
 
-.emotion-20 .MuiFilledInput-root .MuiAutocomplete-endAdornment {
+.emotion-22 .MuiFilledInput-root .MuiAutocomplete-endAdornment {
   right: 9px;
 }
 
-.emotion-20 .MuiFilledInput-root.MuiInputBase-sizeSmall {
+.emotion-22 .MuiFilledInput-root.MuiInputBase-sizeSmall {
   padding-bottom: 1px;
 }
 
-.emotion-20 .MuiFilledInput-root.MuiInputBase-sizeSmall .MuiFilledInput-input {
+.emotion-22 .MuiFilledInput-root.MuiInputBase-sizeSmall .MuiFilledInput-input {
   padding: 2.5px 4px;
 }
 
-.emotion-20 .MuiInputBase-hiddenLabel {
+.emotion-22 .MuiInputBase-hiddenLabel {
   padding-top: 8px;
 }
 
-.emotion-20 .MuiFilledInput-root.MuiInputBase-hiddenLabel {
+.emotion-22 .MuiFilledInput-root.MuiInputBase-hiddenLabel {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.emotion-20 .MuiFilledInput-root.MuiInputBase-hiddenLabel .MuiAutocomplete-input {
+.emotion-22 .MuiFilledInput-root.MuiInputBase-hiddenLabel .MuiAutocomplete-input {
   padding-top: 16px;
   padding-bottom: 17px;
 }
 
-.emotion-20 .MuiFilledInput-root.MuiInputBase-hiddenLabel.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+.emotion-22 .MuiFilledInput-root.MuiInputBase-hiddenLabel.MuiInputBase-sizeSmall .MuiAutocomplete-input {
   padding-top: 8px;
   padding-bottom: 9px;
 }
 
-.emotion-20 .MuiAutocomplete-input {
+.emotion-22 .MuiAutocomplete-input {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -845,18 +835,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
   opacity: 0;
 }
 
-.emotion-20 .MuiAutocomplete-input {
+.emotion-22 .MuiAutocomplete-input {
   opacity: 1;
 }
 
-.emotion-20 .MuiAutocomplete-inputRoot {
+.emotion-22 .MuiAutocomplete-inputRoot {
   -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 
-.emotion-21 {
+.emotion-23 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -871,11 +861,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-22 {
+.emotion-24 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -894,87 +883,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-22.Mui-disabled {
+.emotion-24.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-22 {
-  margin-top: 16px;
-}
-
-.emotion-22::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-22.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-22.Mui-error::before,
-.emotion-22.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-22::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-22:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-24:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-22:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-24:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-22.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-24.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-22::after {
-  border-bottom: 2px solid #337a87;
+.emotion-24.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-22:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-24.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-22:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-24.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-22:after {
-  border-bottom: 2px solid #337a87;
-}
-
-.emotion-23 {
+.emotion-25 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -992,199 +935,204 @@ label+.emotion-22 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-23::-webkit-input-placeholder {
+.emotion-25::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-23::-moz-placeholder {
+.emotion-25::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-23::-ms-input-placeholder {
+.emotion-25::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-23:focus {
+.emotion-25:focus {
   outline: 0;
 }
 
-.emotion-23:invalid {
+.emotion-25:invalid {
   box-shadow: none;
 }
 
-.emotion-23::-webkit-search-decoration {
+.emotion-25::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-25::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-25::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-25::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-25:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-25:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-25:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-23.Mui-disabled {
+.emotion-25.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-23:-webkit-autofill {
+.emotion-25:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-24.Mui-focused .MuiAutocomplete-clearIndicator {
+.emotion-25:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-28.Mui-focused .MuiAutocomplete-clearIndicator {
   visibility: visible;
 }
 
 @media (pointer: fine) {
-  .emotion-24:hover .MuiAutocomplete-clearIndicator {
+  .emotion-28:hover .MuiAutocomplete-clearIndicator {
     visibility: visible;
   }
 }
 
-.emotion-24 .MuiAutocomplete-tag {
+.emotion-28 .MuiAutocomplete-tag {
   margin: 3px;
   max-width: calc(100% - 6px);
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-24 .MuiAutocomplete-inputRoot,
-.MuiAutocomplete-hasClearIcon.emotion-24 .MuiAutocomplete-inputRoot {
+.MuiAutocomplete-hasPopupIcon.emotion-28 .MuiAutocomplete-inputRoot,
+.MuiAutocomplete-hasClearIcon.emotion-28 .MuiAutocomplete-inputRoot {
   padding-right: 30px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-24 .MuiAutocomplete-inputRoot {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-28 .MuiAutocomplete-inputRoot {
   padding-right: 56px;
 }
 
-.emotion-24 .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
+.emotion-28 .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
   width: 0;
   min-width: 30px;
 }
 
-.emotion-24 .MuiInput-root {
+.emotion-28 .MuiInput-root {
   padding-bottom: 1px;
 }
 
-.emotion-24 .MuiInput-root .MuiInput-input {
+.emotion-28 .MuiInput-root .MuiInput-input {
   padding: 4px 4px 4px 0px;
 }
 
-.emotion-24 .MuiInput-root.MuiInputBase-sizeSmall .MuiInput-input {
+.emotion-28 .MuiInput-root.MuiInputBase-sizeSmall .MuiInput-input {
   padding: 2px 4px 3px 0;
 }
 
-.emotion-24 .MuiOutlinedInput-root {
+.emotion-28 .MuiOutlinedInput-root {
   padding: 9px;
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-24 .MuiOutlinedInput-root,
-.MuiAutocomplete-hasClearIcon.emotion-24 .MuiOutlinedInput-root {
+.MuiAutocomplete-hasPopupIcon.emotion-28 .MuiOutlinedInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-28 .MuiOutlinedInput-root {
   padding-right: 39px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-24 .MuiOutlinedInput-root {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-28 .MuiOutlinedInput-root {
   padding-right: 65px;
 }
 
-.emotion-24 .MuiOutlinedInput-root .MuiAutocomplete-input {
+.emotion-28 .MuiOutlinedInput-root .MuiAutocomplete-input {
   padding: 7.5px 4px 7.5px 5px;
 }
 
-.emotion-24 .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
+.emotion-28 .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
   right: 9px;
 }
 
-.emotion-24 .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
+.emotion-28 .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 6px;
 }
 
-.emotion-24 .MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+.emotion-28 .MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input {
   padding: 2.5px 4px 2.5px 8px;
 }
 
-.emotion-24 .MuiFilledInput-root {
+.emotion-28 .MuiFilledInput-root {
   padding-top: 19px;
   padding-left: 8px;
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-24 .MuiFilledInput-root,
-.MuiAutocomplete-hasClearIcon.emotion-24 .MuiFilledInput-root {
+.MuiAutocomplete-hasPopupIcon.emotion-28 .MuiFilledInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-28 .MuiFilledInput-root {
   padding-right: 39px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-24 .MuiFilledInput-root {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-28 .MuiFilledInput-root {
   padding-right: 65px;
 }
 
-.emotion-24 .MuiFilledInput-root .MuiFilledInput-input {
+.emotion-28 .MuiFilledInput-root .MuiFilledInput-input {
   padding: 7px 4px;
 }
 
-.emotion-24 .MuiFilledInput-root .MuiAutocomplete-endAdornment {
+.emotion-28 .MuiFilledInput-root .MuiAutocomplete-endAdornment {
   right: 9px;
 }
 
-.emotion-24 .MuiFilledInput-root.MuiInputBase-sizeSmall {
+.emotion-28 .MuiFilledInput-root.MuiInputBase-sizeSmall {
   padding-bottom: 1px;
 }
 
-.emotion-24 .MuiFilledInput-root.MuiInputBase-sizeSmall .MuiFilledInput-input {
+.emotion-28 .MuiFilledInput-root.MuiInputBase-sizeSmall .MuiFilledInput-input {
   padding: 2.5px 4px;
 }
 
-.emotion-24 .MuiInputBase-hiddenLabel {
+.emotion-28 .MuiInputBase-hiddenLabel {
   padding-top: 8px;
 }
 
-.emotion-24 .MuiFilledInput-root.MuiInputBase-hiddenLabel {
+.emotion-28 .MuiFilledInput-root.MuiInputBase-hiddenLabel {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.emotion-24 .MuiFilledInput-root.MuiInputBase-hiddenLabel .MuiAutocomplete-input {
+.emotion-28 .MuiFilledInput-root.MuiInputBase-hiddenLabel .MuiAutocomplete-input {
   padding-top: 16px;
   padding-bottom: 17px;
 }
 
-.emotion-24 .MuiFilledInput-root.MuiInputBase-hiddenLabel.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+.emotion-28 .MuiFilledInput-root.MuiInputBase-hiddenLabel.MuiInputBase-sizeSmall .MuiAutocomplete-input {
   padding-top: 8px;
   padding-bottom: 9px;
 }
 
-.emotion-24 .MuiAutocomplete-input {
+.emotion-28 .MuiAutocomplete-input {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1193,11 +1141,160 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   opacity: 0;
 }
 
-.emotion-24 .MuiAutocomplete-input {
+.emotion-28 .MuiAutocomplete-input {
+  opacity: 1;
+}
+
+.emotion-30 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
+}
+
+.emotion-30.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-30:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-30:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-30.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-30.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-30.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-30.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-31 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
+}
+
+.emotion-31::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-31::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-31::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-31:focus {
+  outline: 0;
+}
+
+.emotion-31:invalid {
+  box-shadow: none;
+}
+
+.emotion-31::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-31::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-31::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-31::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-31.Mui-disabled {
   opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-31:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
 }
 
-.emotion-28 {
+.emotion-31:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-32 {
   position: absolute;
   right: 0;
   top: 50%;
@@ -1207,7 +1304,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   transform: translate(0, -50%);
 }
 
-.emotion-29 {
+.emotion-33 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1258,42 +1355,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   visibility: hidden;
 }
 
-.emotion-29::-moz-focus-inner {
+.emotion-33::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-29.Mui-disabled {
+.emotion-33.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-29 {
+  .emotion-33 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-29:hover {
+.emotion-33:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-29:hover {
+  .emotion-33:hover {
     background-color: transparent;
   }
 }
 
-.emotion-29.Mui-disabled {
+.emotion-33.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-29.MuiIconButton-loading {
+.emotion-33.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-30 {
+.emotion-34 {
   display: none;
   position: absolute;
   visibility: visible;
@@ -1306,18 +1403,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-32 {
+.emotion-38 {
   min-height: 1.8rem;
 }
 
-.emotion-34 {
+.emotion-40 {
   display: table;
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-.emotion-34 caption {
+.emotion-40 caption {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -1328,42 +1425,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   caption-side: bottom;
 }
 
-.emotion-35 {
+.emotion-41 {
   display: table-header-group;
 }
 
-.emotion-35 .columnHeader {
+.emotion-41 .columnHeader {
   display: table-cell;
 }
 
-.emotion-35 .columnHeader .sortIcon {
+.emotion-41 .columnHeader .sortIcon {
   margin-bottom: -6px;
 }
 
-.emotion-35 .nonSortable {
+.emotion-41 .nonSortable {
   cursor: initial;
 }
 
-.emotion-36 {
+.emotion-42 {
   color: inherit;
   display: table-row;
   vertical-align: middle;
   outline: 0;
 }
 
-.emotion-36.MuiTableRow-hover:hover {
+.emotion-42.MuiTableRow-hover:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-.emotion-36.Mui-selected {
+.emotion-42.Mui-selected {
   background-color: rgba(51, 122, 135, 0.08);
 }
 
-.emotion-36.Mui-selected:hover {
+.emotion-42.Mui-selected:hover {
   background-color: rgba(51, 122, 135, 0.12);
 }
 
-.emotion-37 {
+.emotion-43 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -1382,7 +1479,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   line-height: 1.15rem;
 }
 
-.emotion-38 {
+.emotion-44 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1421,42 +1518,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-38::-moz-focus-inner {
+.emotion-44::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-38.Mui-disabled {
+.emotion-44.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-38 {
+  .emotion-44 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-38:hover {
+.emotion-44:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-38.Mui-checked,
-.emotion-38.MuiCheckbox-indeterminate {
+.emotion-44.Mui-checked,
+.emotion-44.MuiCheckbox-indeterminate {
   color: #337a87;
 }
 
-.emotion-38.Mui-disabled {
+.emotion-44.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: none) {
-  .emotion-38:hover {
+  .emotion-44:hover {
     background-color: transparent;
   }
 }
 
-.emotion-39 {
+.emotion-45 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -1469,7 +1566,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   z-index: 1;
 }
 
-.emotion-40 {
+.emotion-46 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1486,15 +1583,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   font-size: 1.3929rem;
 }
 
-.emotion-40 iconButton {
+.emotion-46 iconButton {
   margin-right: 8px;
 }
 
-.emotion-48 {
+.emotion-54 {
   display: table-row-group;
 }
 
-.emotion-50 {
+.emotion-56 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -1509,17 +1606,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   height: 48px;
 }
 
-.emotion-229 {
+.emotion-235 {
   overflow: auto;
   color: rgba(10, 10, 11, 0.78);
   font-size: 0.8125rem;
 }
 
-.emotion-229:last-child {
+.emotion-235:last-child {
   padding: 0;
 }
 
-.emotion-230 {
+.emotion-236 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1537,7 +1634,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
 }
 
 @media (min-width:600px) {
-  .emotion-230 {
+  .emotion-236 {
     padding-left: 24px;
     padding-right: 24px;
   }
@@ -1545,45 +1642,45 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
 
 @media (min-width:0px) {
   @media (orientation: landscape) {
-    .emotion-230 {
+    .emotion-236 {
       min-height: 48px;
     }
   }
 }
 
 @media (min-width:600px) {
-  .emotion-230 {
+  .emotion-236 {
     min-height: 64px;
   }
 }
 
 @media (min-width:0px) and (orientation: landscape) {
-  .emotion-230 {
+  .emotion-236 {
     min-height: 52px;
   }
 }
 
 @media (min-width:600px) {
-  .emotion-230 {
+  .emotion-236 {
     min-height: 52px;
     padding-right: 2px;
   }
 }
 
-.emotion-230 .MuiTablePagination-actions {
+.emotion-236 .MuiTablePagination-actions {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: 20px;
 }
 
-.emotion-231 {
+.emotion-237 {
   -webkit-flex: 1 1 100%;
   -ms-flex: 1 1 100%;
   flex: 1 1 100%;
 }
 
-.emotion-232 {
+.emotion-238 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -1593,7 +1690,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   flex-shrink: 0;
 }
 
-.emotion-233 {
+.emotion-239 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1619,12 +1716,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   margin-left: 8px;
 }
 
-.emotion-233.Mui-disabled {
+.emotion-239.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-.emotion-233 .MuiTablePagination-select {
+.emotion-239 .MuiTablePagination-select {
   padding-left: 8px;
   padding-right: 24px;
   text-align: right;
@@ -1632,7 +1729,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   text-align-last: right;
 }
 
-.emotion-234 {
+.emotion-240 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -1660,29 +1757,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   animation-duration: 10ms;
 }
 
-.emotion-234:focus {
+.emotion-240:focus {
   border-radius: 0;
 }
 
-.emotion-234.Mui-disabled {
+.emotion-240.Mui-disabled {
   cursor: default;
 }
 
-.emotion-234[multiple] {
+.emotion-240[multiple] {
   height: auto;
 }
 
-.emotion-234:not([multiple]) option,
-.emotion-234:not([multiple]) optgroup {
+.emotion-240:not([multiple]) option,
+.emotion-240:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-234.emotion-234.emotion-234 {
+.emotion-240.emotion-240.emotion-240 {
   padding-right: 24px;
   min-width: 16px;
 }
 
-.emotion-234.MuiSelect-select {
+.emotion-240.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -1690,76 +1787,76 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   overflow: hidden;
 }
 
-.emotion-234::-webkit-input-placeholder {
+.emotion-240::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-234::-moz-placeholder {
+.emotion-240::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-234::-ms-input-placeholder {
+.emotion-240::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-234:focus {
+.emotion-240:focus {
   outline: 0;
 }
 
-.emotion-234:invalid {
+.emotion-240:invalid {
   box-shadow: none;
 }
 
-.emotion-234::-webkit-search-decoration {
+.emotion-240::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-234::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-240::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-234::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-240::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-234::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-240::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-240:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-240:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-240:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-234.Mui-disabled {
+.emotion-240.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-234:-webkit-autofill {
+.emotion-240:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-235 {
+.emotion-241 {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -1769,7 +1866,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
   box-sizing: border-box;
 }
 
-.emotion-236 {
+.emotion-242 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1791,15 +1888,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-236 iconButton {
+.emotion-242 iconButton {
   margin-right: 8px;
 }
 
-.emotion-236.Mui-disabled {
+.emotion-242.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-237 {
+.emotion-243 {
   font-family: Lato,sans-serif;
   font-weight: 400;
   font-size: 0.8125rem;
@@ -1809,7 +1906,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
   flex-shrink: 0;
 }
 
-.emotion-238 {
+.emotion-244 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1859,38 +1956,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-238::-moz-focus-inner {
+.emotion-244::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-238.Mui-disabled {
+.emotion-244.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-238 {
+  .emotion-244 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-238:hover {
+.emotion-244:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-238:hover {
+  .emotion-244:hover {
     background-color: transparent;
   }
 }
 
-.emotion-238.Mui-disabled {
+.emotion-244.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-238.MuiIconButton-loading {
+.emotion-244.MuiIconButton-loading {
   color: transparent;
 }
 
@@ -2019,7 +2116,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
             class="filter-item"
           >
             <h5
-              class="margin-top-small margin-bottom-none muted"
+              class="margin-top-small margin-bottom-small muted"
             >
               Release name
             </h5>
@@ -2027,10 +2124,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               class="MuiFormControl-root MuiTextField-root emotion-15"
             >
               <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart emotion-16"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart emotion-16"
               >
                 <div
-                  class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-standard MuiInputAdornment-sizeSmall emotion-17"
+                  class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall emotion-17"
                 >
                   <span
                     aria-hidden="true"
@@ -2052,13 +2149,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </div>
                 <input
                   aria-invalid="false"
-                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart emotion-19"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart emotion-19"
                   id=":r3:"
                   name="name"
                   placeholder="Starts with"
                   type="text"
                   value=""
                 />
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline emotion-20"
+                >
+                  <legend
+                    class="emotion-21"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="notranslate"
+                    >
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
             </div>
           </div>
@@ -2066,19 +2178,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
             class="filter-item"
           >
             <h5
-              class="margin-top-small margin-bottom-none muted"
+              class="margin-top-small margin-bottom-small muted"
             >
               Tags
             </h5>
             <div
-              class="MuiAutocomplete-root emotion-20"
+              class="MuiAutocomplete-root emotion-22"
               name="tags"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-21"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-23"
               >
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-22"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-24"
                 >
                   <input
                     aria-autocomplete="list"
@@ -2086,7 +2198,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-23"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-25"
                     id="tags-chip-select"
                     placeholder="Select tags"
                     role="combobox"
@@ -2094,6 +2206,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                     type="text"
                     value=""
                   />
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-20"
+                  >
+                    <legend
+                      class="emotion-21"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="notranslate"
+                      >
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
               </div>
             </div>
@@ -2102,19 +2229,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
             class="filter-item"
           >
             <h5
-              class="margin-top-small margin-bottom-none muted"
+              class="margin-top-small margin-bottom-small muted"
             >
               Contains Artifact type
             </h5>
             <div
-              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon emotion-24"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon emotion-28"
               name="type"
             >
               <div
-                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-21"
+                class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-23"
               >
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-22"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot emotion-30"
                 >
                   <input
                     aria-autocomplete="list"
@@ -2122,7 +2249,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-23"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-31"
                     id=":r6:"
                     placeholder="Any"
                     role="combobox"
@@ -2131,18 +2258,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment emotion-28"
+                    class="MuiAutocomplete-endAdornment emotion-32"
                   >
                     <button
                       aria-label="Clear"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator emotion-29"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-clearIndicator emotion-33"
                       id=":r8:"
                       tabindex="-1"
                       title="Clear"
                       type="button"
                     >
                       <span
-                        class="MuiIconButton-loadingIndicator emotion-30"
+                        class="MuiIconButton-loadingIndicator emotion-34"
                       />
                       <svg
                         aria-hidden="true"
@@ -2157,42 +2284,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                       </svg>
                     </button>
                   </div>
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-20"
+                  >
+                    <legend
+                      class="emotion-21"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="notranslate"
+                      >
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
               </div>
             </div>
           </div>
         </form>
         <p
-          class="muted emotion-32"
+          class="muted emotion-38"
         />
       </div>
       <div
         class="emotion-14"
       >
         <table
-          class="MuiTable-root margin-bottom emotion-34"
+          class="MuiTable-root margin-bottom emotion-40"
         >
           <thead
-            class="MuiTableHead-root emotion-35"
+            class="MuiTableHead-root emotion-41"
           >
             <tr
-              class="MuiTableRow-root MuiTableRow-head emotion-36"
+              class="MuiTableRow-root MuiTableRow-head emotion-42"
             >
               <th
-                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-37"
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium emotion-43"
                 scope="col"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2204,13 +2346,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </th>
               <th
-                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader emotion-37"
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader emotion-43"
                 scope="col"
               >
                 Name
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium sortIcon selected true emotion-40"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium sortIcon selected true emotion-46"
                   data-testid="SortIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -2221,19 +2363,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </svg>
               </th>
               <th
-                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader nonSortable emotion-37"
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader nonSortable emotion-43"
                 scope="col"
               >
                 Number of artifacts
               </th>
               <th
-                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader emotion-37"
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader emotion-43"
                 scope="col"
               >
                 Tags
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium sortIcon true emotion-40"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium sortIcon true emotion-46"
                   data-testid="SortIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -2244,13 +2386,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </svg>
               </th>
               <th
-                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader emotion-37"
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium columnHeader emotion-43"
                 scope="col"
               >
                 Last modified
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium sortIcon true emotion-40"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium sortIcon true emotion-46"
                   data-testid="SortIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -2263,25 +2405,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
             </tr>
           </thead>
           <tbody
-            class="MuiTableBody-root emotion-48"
+            class="MuiTableBody-root emotion-54"
           >
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2293,22 +2435,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-999
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2324,22 +2466,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2351,22 +2493,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-998
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2382,22 +2524,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2409,22 +2551,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-997
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2440,22 +2582,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2467,22 +2609,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-996
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2498,22 +2640,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2525,22 +2667,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-995
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2556,22 +2698,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2583,22 +2725,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-994
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2614,22 +2756,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2641,22 +2783,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-993
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2672,22 +2814,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2699,22 +2841,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-992
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2730,22 +2872,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2757,22 +2899,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-991
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2788,22 +2930,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2815,22 +2957,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-990
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2846,22 +2988,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2873,22 +3015,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-99
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2904,22 +3046,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2931,22 +3073,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-989
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -2962,22 +3104,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -2989,22 +3131,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-988
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -3020,22 +3162,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3047,22 +3189,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-987
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -3078,22 +3220,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3105,22 +3247,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-986
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -3136,22 +3278,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3163,22 +3305,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-985
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -3194,22 +3336,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3221,22 +3363,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-984
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -3252,22 +3394,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3279,22 +3421,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-983
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -3310,22 +3452,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3337,22 +3479,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-982
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -3368,22 +3510,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
               </td>
             </tr>
             <tr
-              class="MuiTableRow-root MuiTableRow-hover clickable emotion-36"
+              class="MuiTableRow-root MuiTableRow-hover clickable emotion-42"
             >
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium emotion-56"
               >
                 <span
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-38"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-44"
                 >
                   <input
-                    class="PrivateSwitchBase-input emotion-39"
+                    class="PrivateSwitchBase-input emotion-45"
                     data-indeterminate="false"
                     type="checkbox"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="CheckBoxOutlineBlankIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3395,22 +3537,22 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </span>
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 release-981
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 1
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 -
               </td>
               <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-50"
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium relative emotion-56"
               >
                 <span
                   aria-label="Thu Sep 10 2020 12:16:22 GMT+0000"
@@ -3431,28 +3573,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
           class="flexbox"
         >
           <div
-            class="MuiTablePagination-root flexbox margin-top margin-top-none emotion-229"
+            class="MuiTablePagination-root flexbox margin-top margin-top-none emotion-235"
           >
             <div
-              class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar emotion-230"
+              class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar emotion-236"
             >
               <div
-                class="MuiTablePagination-spacer flexbox no-basis emotion-231"
+                class="MuiTablePagination-spacer flexbox no-basis emotion-237"
               />
               <p
-                class="MuiTablePagination-selectLabel emotion-232"
+                class="MuiTablePagination-selectLabel emotion-238"
                 id=":rb:"
               >
                 Rows
               </p>
               <div
-                class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-select MuiSelect-root MuiTablePagination-input emotion-233"
+                class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-select MuiSelect-root MuiTablePagination-input emotion-239"
               >
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   aria-labelledby=":rb: :ra:"
-                  class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input emotion-234"
+                  class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input emotion-240"
                   id=":ra:"
                   role="combobox"
                   tabindex="0"
@@ -3462,14 +3604,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 <input
                   aria-hidden="true"
                   aria-invalid="false"
-                  class="MuiSelect-nativeInput emotion-235"
+                  class="MuiSelect-nativeInput emotion-241"
                   name="pagination"
                   tabindex="-1"
                   value="20"
                 />
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard emotion-236"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard emotion-242"
                   data-testid="ArrowDropDownIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -3480,7 +3622,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </svg>
               </div>
               <p
-                class="MuiTablePagination-displayedRows emotion-237"
+                class="MuiTablePagination-displayedRows emotion-243"
               />
               <div
                 class="flexbox center-aligned"
@@ -3489,18 +3631,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                   1-20 of 5000
                 </div>
                 <button
-                  class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-238"
+                  class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge emotion-244"
                   disabled=""
                   id=":r1e:"
                   tabindex="-1"
                   type="button"
                 >
                   <span
-                    class="MuiIconButton-loadingIndicator emotion-30"
+                    class="MuiIconButton-loadingIndicator emotion-34"
                   />
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                     data-testid="KeyboardArrowLeftIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -3512,17 +3654,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-234:focus::-ms-input
                 </button>
                 <div>
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-238"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-244"
                     id=":r1f:"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiIconButton-loadingIndicator emotion-30"
+                      class="MuiIconButton-loadingIndicator emotion-34"
                     />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-40"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-46"
                       data-testid="KeyboardArrowRightIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
diff --git a/frontend/src/js/components/releases/dialogs/ArtifactInformationForm.tsx b/frontend/src/js/components/releases/dialogs/ArtifactInformationForm.tsx
index 2854cf23..d539678a 100644
--- a/frontend/src/js/components/releases/dialogs/ArtifactInformationForm.tsx
+++ b/frontend/src/js/components/releases/dialogs/ArtifactInformationForm.tsx
@@ -14,7 +14,8 @@
 import React, { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { FormControl, Input, InputLabel, TextField } from '@mui/material';
+import { FormControl, InputLabel, OutlinedInput, TextField, inputLabelClasses } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
 import ChipSelect from '@northern.tech/common-ui/ChipSelect';
 import { DOCSTIPS, DocsTooltip } from '@northern.tech/common-ui/DocsLink';
@@ -25,6 +26,19 @@ import { FileInformation } from './FileInformation';
 
 const defaultVersion = '1.0.0';
 
+const useStyles = makeStyles()(theme => ({
+  releaseName: {
+    display: 'flex',
+    alignItems: 'center',
+    [`&.${inputLabelClasses.shrink}`]: {
+      background: theme.palette.background.default,
+      paddingLeft: theme.spacing(0.5),
+      paddingRight: theme.spacing(),
+      marginTop: theme.spacing(-0.5)
+    }
+  }
+}));
+
 export const VersionInformation = ({ creation = {}, onRemove, updateCreation }) => {
   const { file, fileSystem: propFs, name, softwareName: propName, softwareVersion: version = '', type } = creation;
   const [fileSystem, setFileSystem] = useState(propFs);
@@ -64,6 +78,7 @@ export const ArtifactInformation = ({ creation = {}, deviceTypes = [], onRemove,
   const methods = useForm({ mode: 'onChange', defaultValues: { deviceTypes: selectedDeviceTypes } });
   const { watch } = methods;
   const formDeviceTypes = watch('deviceTypes');
+  const { classes } = useStyles();
 
   useEffect(() => {
     updateCreation({ selectedDeviceTypes: formDeviceTypes });
@@ -82,30 +97,30 @@ export const ArtifactInformation = ({ creation = {}, deviceTypes = [], onRemove,
 
   const isValidDestination = checkDestinationValidity(destination);
   return (
-    <div className="flexbox column">
+    <div className="flexbox column" style={{ gap: 15 }}>
       <FileInformation file={file} type={type} onRemove={onRemove} />
       <TextField
         autoFocus={true}
         error={!isValidDestination}
         fullWidth
-        helperText={!isValidDestination && <div className="warning">Destination has to be an absolute path</div>}
-        inputProps={{ style: { marginTop: 16 } }}
-        InputLabelProps={{ shrink: true }}
-        label="Destination directory where the file will be installed on your devices"
+        helperText={
+          !isValidDestination ? <div className="warning">Destination has to be an absolute path</div> : 'where the file will be installed on your devices'
+        }
+        label="Destination directory"
         onChange={onDestinationChange}
         placeholder="Example: /opt/installed-by-single-file"
         value={destination}
       />
       <h4>Artifact information</h4>
       <FormControl>
-        <InputLabel htmlFor="release-name" className="flexbox center-aligned" onClick={e => e.preventDefault()}>
+        <InputLabel htmlFor="release-name" className={classes.releaseName} onClick={e => e.preventDefault()}>
           Release name
           <InfoHintContainer>
             <MenderHelpTooltip id={HELPTOOLTIPS.releaseName.id} />
             <DocsTooltip id={DOCSTIPS.releases.id} />
           </InfoHintContainer>
         </InputLabel>
-        <Input
+        <OutlinedInput
           defaultValue={name}
           className="release-name-input"
           id="release-name"
@@ -118,7 +133,7 @@ export const ArtifactInformation = ({ creation = {}, deviceTypes = [], onRemove,
           <ChipSelect
             name="deviceTypes"
             label="Device types compatible"
-            placeholder="Enter all device types this software is compatible with"
+            helperText="Enter all device types this software is compatible with"
             options={deviceTypes}
           />
         </form>
diff --git a/frontend/src/js/components/releases/dialogs/__snapshots__/ArtifactInformationForm.test.tsx.snap b/frontend/src/js/components/releases/dialogs/__snapshots__/ArtifactInformationForm.test.tsx.snap
index 0df06588..5ece7b4b 100644
--- a/frontend/src/js/components/releases/dialogs/__snapshots__/ArtifactInformationForm.test.tsx.snap
+++ b/frontend/src/js/components/releases/dialogs/__snapshots__/ArtifactInformationForm.test.tsx.snap
@@ -16,7 +16,6 @@ exports[`ArtifactInformationForm Component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -50,6 +49,23 @@ exports[`ArtifactInformationForm Component renders correctly 1`] = `
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
 .emotion-1.Mui-focused {
@@ -87,6 +103,7 @@ exports[`ArtifactInformationForm Component renders correctly 1`] = `
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-2.Mui-disabled {
@@ -94,77 +111,30 @@ exports[`ArtifactInformationForm Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-2 {
-  margin-top: 16px;
-}
-
-.emotion-2::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-2.Mui-error::before,
-.emotion-2.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-2::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-2:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-2:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-2.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-2::after {
-  border-bottom: 2px solid #337a87;
+.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-2:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-2:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-2.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-2:after {
-  border-bottom: 2px solid #337a87;
+.emotion-2.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-3 {
@@ -185,6 +155,7 @@ label+.emotion-2 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-3::-webkit-input-placeholder {
@@ -256,7 +227,78 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-3:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-4 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-5 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-5>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-6 {
+  color: rgba(0, 0, 0, 0.54);
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.6964rem;
+  line-height: 1.66;
+  text-align: left;
+  margin-top: 3px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
+}
+
+.emotion-6.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-6.Mui-error {
+  color: #ab1000;
+}
+
+.emotion-7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -270,11 +312,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-5 {
+.emotion-8 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -298,29 +339,51 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-.emotion-5.Mui-focused {
+.emotion-8.Mui-focused {
   color: #337a87;
 }
 
-.emotion-5.Mui-disabled {
+.emotion-8.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-5.Mui-error {
+.emotion-8.Mui-error {
   color: #ab1000;
 }
 
-.emotion-5.Mui-focused {
+.emotion-8.Mui-focused {
   color: #337a87;
 }
 
-.emotion-6 {
+.emotion-8.MuiInputLabel-shrink {
+  background: #fff;
+  padding-left: 4px;
+  padding-right: 8px;
+  margin-top: -4px;
+}
+
+.emotion-9 {
   gap: 16px;
 }
 
-.emotion-7 {
+.emotion-10 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -338,15 +401,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   color: #337a87;
 }
 
-.emotion-7 iconButton {
+.emotion-10 iconButton {
   margin-right: 8px;
 }
 
-.emotion-7.read {
+.emotion-10.read {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-8 {
+.emotion-11 {
   position: absolute;
   top: -5px;
   bottom: 0;
@@ -356,11 +419,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-8.read {
+.emotion-11.read {
   border-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-9 {
+.emotion-12 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -438,28 +501,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   border-style: dashed;
 }
 
-.emotion-9::-moz-focus-inner {
+.emotion-12::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-12.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-9 {
+  .emotion-12 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-9.Mui-disabled {
+.emotion-12.Mui-disabled {
   opacity: 0.38;
   pointer-events: none;
 }
 
-.emotion-9 .MuiChip-avatar {
+.emotion-12 .MuiChip-avatar {
   margin-left: 5px;
   margin-right: -6px;
   width: 24px;
@@ -468,17 +531,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   font-size: 0.6964rem;
 }
 
-.emotion-9 .MuiChip-avatarColorPrimary {
+.emotion-12 .MuiChip-avatarColorPrimary {
   color: #fff;
   background-color: rgb(35, 85, 94);
 }
 
-.emotion-9 .MuiChip-avatarColorSecondary {
+.emotion-12 .MuiChip-avatarColorSecondary {
   color: #fff;
   background-color: rgb(65, 10, 46);
 }
 
-.emotion-9 .MuiChip-avatarSmall {
+.emotion-12 .MuiChip-avatarSmall {
   margin-left: 4px;
   margin-right: -4px;
   width: 18px;
@@ -486,12 +549,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   font-size: 0.5804rem;
 }
 
-.emotion-9 .MuiChip-icon {
+.emotion-12 .MuiChip-icon {
   margin-left: 5px;
   margin-right: -6px;
 }
 
-.emotion-9 .MuiChip-deleteIcon {
+.emotion-12 .MuiChip-deleteIcon {
   -webkit-tap-highlight-color: transparent;
   color: rgba(10, 10, 11, 0.26);
   font-size: 22px;
@@ -499,120 +562,120 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   margin: 0 5px 0 -6px;
 }
 
-.emotion-9 .MuiChip-deleteIcon:hover {
+.emotion-12 .MuiChip-deleteIcon:hover {
   color: rgba(10, 10, 11, 0.4);
 }
 
-.emotion-9 .MuiChip-deleteIcon {
+.emotion-12 .MuiChip-deleteIcon {
   color: rgba(255, 255, 255, 0.7);
 }
 
-.emotion-9 .MuiChip-deleteIcon:hover,
-.emotion-9 .MuiChip-deleteIcon:active {
+.emotion-12 .MuiChip-deleteIcon:hover,
+.emotion-12 .MuiChip-deleteIcon:active {
   color: #fff;
 }
 
-.emotion-9 .MuiChip-icon {
+.emotion-12 .MuiChip-icon {
   color: #bcbcbc;
 }
 
-.emotion-9 .MuiChip-icon {
+.emotion-12 .MuiChip-icon {
   color: inherit;
 }
 
-.emotion-9.Mui-focusVisible {
+.emotion-12.Mui-focusVisible {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-9.Mui-focusVisible {
+.emotion-12.Mui-focusVisible {
   background: rgb(35, 85, 94);
 }
 
-.emotion-9:hover {
+.emotion-12:hover {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-9.Mui-focusVisible {
+.emotion-12.Mui-focusVisible {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-9:active {
+.emotion-12:active {
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-9:hover,
-.emotion-9.Mui-focusVisible {
+.emotion-12:hover,
+.emotion-12.Mui-focusVisible {
   background-color: rgb(35, 85, 94);
 }
 
-.emotion-9.MuiChip-clickable:hover {
+.emotion-12.MuiChip-clickable:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-.emotion-9.Mui-focusVisible {
+.emotion-12.Mui-focusVisible {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-9 .MuiChip-avatar {
+.emotion-12 .MuiChip-avatar {
   margin-left: 4px;
 }
 
-.emotion-9 .MuiChip-avatarSmall {
+.emotion-12 .MuiChip-avatarSmall {
   margin-left: 2px;
 }
 
-.emotion-9 .MuiChip-icon {
+.emotion-12 .MuiChip-icon {
   margin-left: 4px;
 }
 
-.emotion-9 .MuiChip-iconSmall {
+.emotion-12 .MuiChip-iconSmall {
   margin-left: 2px;
 }
 
-.emotion-9 .MuiChip-deleteIcon {
+.emotion-12 .MuiChip-deleteIcon {
   margin-right: 5px;
 }
 
-.emotion-9 .MuiChip-deleteIconSmall {
+.emotion-12 .MuiChip-deleteIconSmall {
   margin-right: 3px;
 }
 
-.emotion-9.MuiChip-clickable:hover {
+.emotion-12.MuiChip-clickable:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-9.Mui-focusVisible {
+.emotion-12.Mui-focusVisible {
   background-color: rgba(51, 122, 135, 0.12);
 }
 
-.emotion-9 .MuiChip-deleteIcon {
+.emotion-12 .MuiChip-deleteIcon {
   color: rgba(51, 122, 135, 0.7);
 }
 
-.emotion-9 .MuiChip-deleteIcon:hover,
-.emotion-9 .MuiChip-deleteIcon:active {
+.emotion-12 .MuiChip-deleteIcon:hover,
+.emotion-12 .MuiChip-deleteIcon:active {
   color: #337a87;
 }
 
-.emotion-9 .MuiChip-deleteIcon {
+.emotion-12 .MuiChip-deleteIcon {
   font-size: smaller;
 }
 
-.emotion-9.not-hovering {
+.emotion-12.not-hovering {
   border-color: transparent;
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-9.not-hovering .MuiChip-deleteIcon {
+.emotion-12.not-hovering .MuiChip-deleteIcon {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-9.not-hovering .MuiChip-label {
+.emotion-12.not-hovering .MuiChip-label {
   padding-left: 0;
   visibility: collapse;
 }
 
-.emotion-10 {
+.emotion-13 {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 12px;
@@ -622,7 +685,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   padding-right: 11px;
 }
 
-.emotion-11 {
+.emotion-14 {
   height: 0;
   overflow: hidden;
   -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -634,7 +697,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   visibility: hidden;
 }
 
-.emotion-12 {
+.emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -644,13 +707,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   height: 100%;
 }
 
-.emotion-13 {
+.emotion-16 {
   width: 100%;
   width: auto;
   height: 100%;
 }
 
-.emotion-14 {
+.emotion-17 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -667,11 +730,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   font-size: 1.1607rem;
 }
 
-.emotion-14 iconButton {
+.emotion-17 iconButton {
   margin-right: 8px;
 }
 
-.emotion-15 {
+.emotion-18 {
   position: absolute;
   top: -6px;
   bottom: -4px;
@@ -681,11 +744,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-15.hovering {
+.emotion-18.hovering {
   border-color: transparent;
 }
 
-.emotion-16 {
+.emotion-19 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -703,208 +766,172 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-16.Mui-disabled {
+.emotion-19.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-16 {
-  margin-top: 16px;
-}
-
-.emotion-16::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-16.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-16.Mui-error::before,
-.emotion-16.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-16::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-16:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-19:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-16:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-19:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-16.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-16::after {
-  border-bottom: 2px solid #337a87;
+.emotion-19.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-16:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-19.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-16:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-19.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-16:after {
-  border-bottom: 2px solid #337a87;
+.emotion-22 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
 }
 
-.emotion-18.Mui-focused .MuiAutocomplete-clearIndicator {
+.emotion-23.Mui-focused .MuiAutocomplete-clearIndicator {
   visibility: visible;
 }
 
 @media (pointer: fine) {
-  .emotion-18:hover .MuiAutocomplete-clearIndicator {
+  .emotion-23:hover .MuiAutocomplete-clearIndicator {
     visibility: visible;
   }
 }
 
-.emotion-18 .MuiAutocomplete-tag {
+.emotion-23 .MuiAutocomplete-tag {
   margin: 3px;
   max-width: calc(100% - 6px);
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-18 .MuiAutocomplete-inputRoot,
-.MuiAutocomplete-hasClearIcon.emotion-18 .MuiAutocomplete-inputRoot {
+.MuiAutocomplete-hasPopupIcon.emotion-23 .MuiAutocomplete-inputRoot,
+.MuiAutocomplete-hasClearIcon.emotion-23 .MuiAutocomplete-inputRoot {
   padding-right: 30px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-18 .MuiAutocomplete-inputRoot {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-23 .MuiAutocomplete-inputRoot {
   padding-right: 56px;
 }
 
-.emotion-18 .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
+.emotion-23 .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
   width: 0;
   min-width: 30px;
 }
 
-.emotion-18 .MuiInput-root {
+.emotion-23 .MuiInput-root {
   padding-bottom: 1px;
 }
 
-.emotion-18 .MuiInput-root .MuiInput-input {
+.emotion-23 .MuiInput-root .MuiInput-input {
   padding: 4px 4px 4px 0px;
 }
 
-.emotion-18 .MuiInput-root.MuiInputBase-sizeSmall .MuiInput-input {
+.emotion-23 .MuiInput-root.MuiInputBase-sizeSmall .MuiInput-input {
   padding: 2px 4px 3px 0;
 }
 
-.emotion-18 .MuiOutlinedInput-root {
+.emotion-23 .MuiOutlinedInput-root {
   padding: 9px;
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-18 .MuiOutlinedInput-root,
-.MuiAutocomplete-hasClearIcon.emotion-18 .MuiOutlinedInput-root {
+.MuiAutocomplete-hasPopupIcon.emotion-23 .MuiOutlinedInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-23 .MuiOutlinedInput-root {
   padding-right: 39px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-18 .MuiOutlinedInput-root {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-23 .MuiOutlinedInput-root {
   padding-right: 65px;
 }
 
-.emotion-18 .MuiOutlinedInput-root .MuiAutocomplete-input {
+.emotion-23 .MuiOutlinedInput-root .MuiAutocomplete-input {
   padding: 7.5px 4px 7.5px 5px;
 }
 
-.emotion-18 .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
+.emotion-23 .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
   right: 9px;
 }
 
-.emotion-18 .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
+.emotion-23 .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 6px;
 }
 
-.emotion-18 .MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+.emotion-23 .MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input {
   padding: 2.5px 4px 2.5px 8px;
 }
 
-.emotion-18 .MuiFilledInput-root {
+.emotion-23 .MuiFilledInput-root {
   padding-top: 19px;
   padding-left: 8px;
 }
 
-.MuiAutocomplete-hasPopupIcon.emotion-18 .MuiFilledInput-root,
-.MuiAutocomplete-hasClearIcon.emotion-18 .MuiFilledInput-root {
+.MuiAutocomplete-hasPopupIcon.emotion-23 .MuiFilledInput-root,
+.MuiAutocomplete-hasClearIcon.emotion-23 .MuiFilledInput-root {
   padding-right: 39px;
 }
 
-.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-18 .MuiFilledInput-root {
+.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon.emotion-23 .MuiFilledInput-root {
   padding-right: 65px;
 }
 
-.emotion-18 .MuiFilledInput-root .MuiFilledInput-input {
+.emotion-23 .MuiFilledInput-root .MuiFilledInput-input {
   padding: 7px 4px;
 }
 
-.emotion-18 .MuiFilledInput-root .MuiAutocomplete-endAdornment {
+.emotion-23 .MuiFilledInput-root .MuiAutocomplete-endAdornment {
   right: 9px;
 }
 
-.emotion-18 .MuiFilledInput-root.MuiInputBase-sizeSmall {
+.emotion-23 .MuiFilledInput-root.MuiInputBase-sizeSmall {
   padding-bottom: 1px;
 }
 
-.emotion-18 .MuiFilledInput-root.MuiInputBase-sizeSmall .MuiFilledInput-input {
+.emotion-23 .MuiFilledInput-root.MuiInputBase-sizeSmall .MuiFilledInput-input {
   padding: 2.5px 4px;
 }
 
-.emotion-18 .MuiInputBase-hiddenLabel {
+.emotion-23 .MuiInputBase-hiddenLabel {
   padding-top: 8px;
 }
 
-.emotion-18 .MuiFilledInput-root.MuiInputBase-hiddenLabel {
+.emotion-23 .MuiFilledInput-root.MuiInputBase-hiddenLabel {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.emotion-18 .MuiFilledInput-root.MuiInputBase-hiddenLabel .MuiAutocomplete-input {
+.emotion-23 .MuiFilledInput-root.MuiInputBase-hiddenLabel .MuiAutocomplete-input {
   padding-top: 16px;
   padding-bottom: 17px;
 }
 
-.emotion-18 .MuiFilledInput-root.MuiInputBase-hiddenLabel.MuiInputBase-sizeSmall .MuiAutocomplete-input {
+.emotion-23 .MuiFilledInput-root.MuiInputBase-hiddenLabel.MuiInputBase-sizeSmall .MuiAutocomplete-input {
   padding-top: 8px;
   padding-bottom: 9px;
 }
 
-.emotion-18 .MuiAutocomplete-input {
+.emotion-23 .MuiAutocomplete-input {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -913,61 +940,152 @@ label+.emotion-16 {
   opacity: 0;
 }
 
-.emotion-18 .MuiAutocomplete-input {
+.emotion-23 .MuiAutocomplete-input {
   opacity: 1;
 }
 
-.emotion-18 .MuiAutocomplete-inputRoot {
+.emotion-23 .MuiAutocomplete-inputRoot {
   -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 
+.emotion-25 {
+  color: rgba(0, 0, 0, 0.54);
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  padding: 0;
+  position: relative;
+  color: rgba(0, 0, 0, 0.54);
+  display: block;
+  transform-origin: top left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-transform: translate(0, 20px) scale(1);
+  -moz-transform: translate(0, 20px) scale(1);
+  -ms-transform: translate(0, 20px) scale(1);
+  transform: translate(0, 20px) scale(1);
+  -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+}
+
+.emotion-25.Mui-focused {
+  color: #337a87;
+}
+
+.emotion-25.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-25.Mui-error {
+  color: #ab1000;
+}
+
+.emotion-25.Mui-focused {
+  color: #337a87;
+}
+
+.emotion-29 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-29>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
 <div>
   <div
     class="flexbox column"
+    style="gap: 15px;"
   >
     <div />
     <div
       class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-0"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-focused MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-1"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-focused MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-1"
         data-shrink="true"
         for=":r0:"
         id=":r0:-label"
       >
-        Destination directory where the file will be installed on your devices
+        Destination directory
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl emotion-2"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl emotion-2"
       >
         <input
+          aria-describedby=":r0:-helper-text"
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input emotion-3"
+          class="MuiInputBase-input MuiOutlinedInput-input emotion-3"
           id=":r0:"
           placeholder="Example: /opt/installed-by-single-file"
-          style="margin-top: 16px;"
           type="text"
           value=""
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-4"
+        >
+          <legend
+            class="emotion-5"
+          >
+            <span>
+              Destination directory
+            </span>
+          </legend>
+        </fieldset>
       </div>
+      <p
+        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained Mui-focused emotion-6"
+        id=":r0:-helper-text"
+      >
+        where the file will be installed on your devices
+      </p>
     </div>
     <h4>
       Artifact information
     </h4>
     <div
-      class="MuiFormControl-root emotion-4"
+      class="MuiFormControl-root emotion-7"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard flexbox center-aligned emotion-5"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-8"
         data-shrink="false"
         for="release-name"
       >
         Release name
         <div
-          class="flexbox center-aligned margin-left-small emotion-6"
+          class="flexbox center-aligned margin-left-small emotion-9"
         >
           <div
             class=""
@@ -978,7 +1096,7 @@ label+.emotion-16 {
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-7"
+                class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-10"
                 data-testid="HelpIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -988,7 +1106,7 @@ label+.emotion-16 {
                 />
               </svg>
               <div
-                class="emotion-8 "
+                class="emotion-11 "
               />
             </div>
           </div>
@@ -997,22 +1115,22 @@ label+.emotion-16 {
             data-mui-internal-clone-element="true"
           >
             <div
-              class="MuiButtonBase-root MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-outlinedPrimary not-hovering emotion-9"
+              class="MuiButtonBase-root MuiChip-root MuiChip-outlined MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-outlinedPrimary not-hovering emotion-12"
               role="button"
               tabindex="0"
             >
               <span
-                class="MuiChip-label MuiChip-labelMedium emotion-10"
+                class="MuiChip-label MuiChip-labelMedium emotion-13"
               >
                 <div
-                  class="MuiCollapse-root MuiCollapse-horizontal MuiCollapse-hidden emotion-11"
+                  class="MuiCollapse-root MuiCollapse-horizontal MuiCollapse-hidden emotion-14"
                   style="min-width: 0px;"
                 >
                   <div
-                    class="MuiCollapse-wrapper MuiCollapse-horizontal emotion-12"
+                    class="MuiCollapse-wrapper MuiCollapse-horizontal emotion-15"
                   >
                     <div
-                      class="MuiCollapse-wrapperInner MuiCollapse-horizontal emotion-13"
+                      class="MuiCollapse-wrapperInner MuiCollapse-horizontal emotion-16"
                     >
                       Learn more
                     </div>
@@ -1024,7 +1142,7 @@ label+.emotion-16 {
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-14"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-17"
                   data-testid="DescriptionIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -1034,7 +1152,7 @@ label+.emotion-16 {
                   />
                 </svg>
                 <div
-                  class="emotion-15 not-hovering"
+                  class="emotion-18 not-hovering"
                 />
               </div>
             </div>
@@ -1042,30 +1160,45 @@ label+.emotion-16 {
         </div>
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl release-name-input emotion-16"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl release-name-input emotion-19"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input emotion-3"
+          class="MuiInputBase-input MuiOutlinedInput-input emotion-3"
           id="release-name"
           placeholder="A descriptive name for the software"
           type="text"
           value=""
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-4"
+        >
+          <legend
+            class="emotion-22"
+          >
+            <span
+              aria-hidden="true"
+              class="notranslate"
+            >
+              ​
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
     <form
       novalidate=""
     >
       <div
-        class="MuiAutocomplete-root emotion-18"
+        class="MuiAutocomplete-root emotion-23"
         name="deviceTypes"
       >
         <div
           class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-0"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-5"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-25"
             data-shrink="false"
             for="deviceTypes-chip-select"
             id="deviceTypes-chip-select-label"
@@ -1073,23 +1206,42 @@ label+.emotion-16 {
             Device types compatible
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-2"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiAutocomplete-inputRoot emotion-2"
           >
             <input
               aria-autocomplete="list"
+              aria-describedby="deviceTypes-chip-select-helper-text"
               aria-expanded="false"
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-3"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused emotion-3"
               id="deviceTypes-chip-select"
-              placeholder="Enter all device types this software is compatible with"
+              placeholder=""
               role="combobox"
               spellcheck="false"
               type="text"
               value=""
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-4"
+            >
+              <legend
+                class="emotion-29"
+              >
+                <span>
+                  Device types compatible
+                </span>
+              </legend>
+            </fieldset>
           </div>
+          <p
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-6"
+            id="deviceTypes-chip-select-helper-text"
+          >
+            Enter all device types this software is compatible with
+          </p>
         </div>
       </div>
     </form>
diff --git a/frontend/src/js/components/settings/AccessTokenManagement.tsx b/frontend/src/js/components/settings/AccessTokenManagement.tsx
index be69dd1e..355a1683 100644
--- a/frontend/src/js/components/settings/AccessTokenManagement.tsx
+++ b/frontend/src/js/components/settings/AccessTokenManagement.tsx
@@ -47,7 +47,10 @@ const useStyles = makeStyles()(theme => ({
     minWidth: 900
   },
   creationDialog: {
-    minWidth: 500
+    minWidth: 500,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2)
   },
   formEntries: {
     minWidth: 270
@@ -136,8 +139,8 @@ export const AccessTokenCreationDialog = ({ onCancel, generateToken, isEnterpris
         </form>
         <div>
           <FormControl className={classes.formEntries}>
-            <InputLabel>Expiration</InputLabel>
-            <Select disabled={!!token} onChange={onChangeExpirationTime} value={expirationTime}>
+            <InputLabel id="token-expiration-label">Expiration</InputLabel>
+            <Select labelId="token-expiration-label" label="Expiration" disabled={!!token} onChange={onChangeExpirationTime} value={expirationTime}>
               {Object.entries(expirationTimes).map(([title, item]) => (
                 <MenuItem key={item.value} value={item.value}>
                   {title}
@@ -154,7 +157,7 @@ export const AccessTokenCreationDialog = ({ onCancel, generateToken, isEnterpris
           </FormControl>
         </div>
         {token && (
-          <div className="margin-top margin-bottom">
+          <div className="margin-top-small margin-bottom-small">
             <CopyCode code={token} />
             <p className="warning">This is the only time you will be able to see the token, so make sure to store it in a safe place.</p>
           </div>
diff --git a/frontend/src/js/components/settings/ArtifactGeneration.tsx b/frontend/src/js/components/settings/ArtifactGeneration.tsx
index 0c26be22..07524ee2 100644
--- a/frontend/src/js/components/settings/ArtifactGeneration.tsx
+++ b/frontend/src/js/components/settings/ArtifactGeneration.tsx
@@ -16,7 +16,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 // material ui
 import { InfoOutlined as InfoOutlinedIcon } from '@mui/icons-material';
-import { Checkbox, FormControlLabel, TextField, Typography, formControlLabelClasses, textFieldClasses } from '@mui/material';
+import { Checkbox, FormControlLabel, TextField, Typography, textFieldClasses } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 
 import EnterpriseNotification from '@northern.tech/common-ui/EnterpriseNotification';
@@ -30,6 +30,7 @@ import DeltaIcon from '../../../assets/img/deltaicon.svg';
 
 const useStyles = makeStyles()(theme => ({
   deviceLimitBar: { backgroundColor: theme.palette.grey[500], margin: '15px 0' },
+  formWrapper: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), marginLeft: theme.spacing(2) },
   wrapper: {
     backgroundColor: theme.palette.background.lightgrey,
     display: 'flex',
@@ -39,8 +40,7 @@ const useStyles = makeStyles()(theme => ({
     paddingTop: 0,
     '&>h5': { marginTop: 0, marginBottom: 0 },
     '.flexbox>span': { alignSelf: 'flex-end' },
-    [`.${textFieldClasses.root}`]: { maxWidth: 200, minWidth: 100 },
-    [`.${formControlLabelClasses.root}`]: { marginTop: theme.spacing() }
+    [`.${textFieldClasses.root}`]: { maxWidth: 200, minWidth: 100 }
   }
 }));
 
@@ -69,8 +69,7 @@ const NumberInputLimited = ({ limit, onChange, value: propsValue, ...remainder }
 
   return (
     <TextField
-      inputProps={{ step: 1, type: 'numeric', pattern: '[0-9]*', autoComplete: 'off' }}
-      InputLabelProps={{ shrink: true }}
+      slotProps={{ htmlInput: { step: 1, type: 'numeric', pattern: '[0-9]*', autoComplete: 'off' } }}
       error={min || max ? min > value || value > max : false}
       value={value}
       onChange={({ target: { value } }) => setValue(Number(value) || 0)}
@@ -185,7 +184,7 @@ export const ArtifactGenerationSettings = () => {
               <Typography className="margin-top-small" display="block" variant="caption">
                 xDelta3 arguments
               </Typography>
-              <div className="flexbox column margin-left">
+              <div className={classes.formWrapper}>
                 <FormControlLabel
                   control={
                     <Checkbox color="primary" checked={disableChecksum} onChange={({ target: { checked } }) => setDisableChecksum(checked)} size="small" />
@@ -193,6 +192,7 @@ export const ArtifactGenerationSettings = () => {
                   label="Disable checksum"
                 />
                 <FormControlLabel
+                  className="margin-top-none"
                   control={
                     <Checkbox
                       color="primary"
diff --git a/frontend/src/js/components/settings/CardSection.tsx b/frontend/src/js/components/settings/CardSection.tsx
index 8f993613..bacbd7ae 100644
--- a/frontend/src/js/components/settings/CardSection.tsx
+++ b/frontend/src/js/components/settings/CardSection.tsx
@@ -97,7 +97,7 @@ const CardSection = ({ isSignUp, onClose, organization, onSubmit, onCardConfirme
 
   return (
     <form className="margin-top-small" onSubmit={handleSubmit} onReset={onCancel}>
-      <CardElement className="warning" onChange={event => stripeElementChange(event)} />
+      <CardElement className="warning" onChange={stripeElementChange} />
       {!!errors && <p className="warning">There is an error in the form. Please check that your details are correct</p>}
 
       <div id="poweredByStripe">
diff --git a/frontend/src/js/components/settings/Global.tsx b/frontend/src/js/components/settings/Global.tsx
index 5a5ad8bb..72ec7bae 100644
--- a/frontend/src/js/components/settings/Global.tsx
+++ b/frontend/src/js/components/settings/Global.tsx
@@ -78,25 +78,25 @@ export const IdAttributeSelection = ({ attributes, dialog = false, onCloseClick,
   const saveSettings = e => onSaveClick(e, { attribute: attributeSelection, scope: attributes.find(({ value }) => value === attributeSelection).scope });
 
   return (
-    <div className="flexbox space-between" style={{ alignItems: 'flex-start', maxWidth }}>
-      <FormControl>
-        <InputLabel shrink id="device-id">
-          Device identity attribute
-        </InputLabel>
-        <Select value={attributeSelection} onChange={onChangeIdAttribute}>
-          {attributes.map(item => (
-            <MenuItem key={item.value} value={item.value}>
-              {item.label}
-            </MenuItem>
-          ))}
-        </Select>
-        <FormHelperText className="info" component="div">
-          <div className="margin-top-small margin-bottom-small">Choose a device identity attribute to use to identify your devices throughout the UI.</div>
-          <div className="margin-top-small margin-bottom-small">
-            <DocsLink path="client-installation/identity" title="Learn how to add custom identity attributes" /> to your devices.
-          </div>
-        </FormHelperText>
-      </FormControl>
+    <div className="flexbox space-between" style={{ alignItems: 'start', maxWidth }}>
+      <div className="flexbox column">
+        <FormControl className="margin-top-none">
+          <InputLabel id="device-id">Device identity attribute</InputLabel>
+          <Select label="Device identity attribute" labelId="device-id" value={attributeSelection} onChange={onChangeIdAttribute}>
+            {attributes.map(item => (
+              <MenuItem key={item.value} value={item.value}>
+                {item.label}
+              </MenuItem>
+            ))}
+          </Select>
+          <FormHelperText className="info margin-left-none" component="div">
+            <div>Choose a device identity attribute to use to identify your devices throughout the UI.</div>
+            <div className={`margin-top-x-small ${dialog ? 'margin-bottom-small' : ''}`}>
+              <DocsLink path="client-installation/identity" title="Learn how to add custom identity attributes" /> to your devices.
+            </div>
+          </FormHelperText>
+        </FormControl>
+      </div>
       {dialog && (
         <div className="margin-left margin-top flexbox">
           <Button onClick={undoChanges} style={{ marginRight: 10 }}>
@@ -221,7 +221,7 @@ export const GlobalSettingsDialog = ({
           className={classes.textInput}
           type="number"
           onChange={onChangeOfflineInterval}
-          inputProps={{ min: '1', max: '1000' }}
+          slotProps={{ htmlInput: { min: '1', max: '1000' } }}
           error={!!intervalErrorText}
           value={currentInterval}
         />
diff --git a/frontend/src/js/components/settings/Integrations.tsx b/frontend/src/js/components/settings/Integrations.tsx
index 5ac01833..546d5963 100644
--- a/frontend/src/js/components/settings/Integrations.tsx
+++ b/frontend/src/js/components/settings/Integrations.tsx
@@ -33,8 +33,9 @@ const maxWidth = 750;
 const useStyles = makeStyles()(theme => ({
   leftButton: { marginRight: theme.spacing() },
   inputWrapper: { alignItems: 'flex-end' },
-  select: { marginTop: theme.spacing(2), minWidth: 300 },
-  textInput: { margin: theme.spacing(), minWidth: 500, wordBreak: 'break-all' },
+  select: { minWidth: 300 },
+  formWrapper: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2) },
+  textInput: { minWidth: 500, wordBreak: 'break-all' },
   widthLimit: { maxWidth }
 }));
 
@@ -77,7 +78,7 @@ const ConnectionDetailsInput = ({ connectionConfig, isEditing, setConnectionConf
 
   const commonProps = { className: classes.textInput, disabled: !isEditing, multiline: true };
   return (
-    <div className="flexbox column">
+    <div className={classes.formWrapper}>
       <TextField {...commonProps} label="Key ID" onChange={onKeyChange} value={keyId} />
       <TextField {...commonProps} label="Key Secret" onChange={onSecretChange} value={keySecret} />
       <TextField {...commonProps} label="Region" onChange={onRegionChange} value={awsRegion} />
@@ -159,9 +160,9 @@ export const IntegrationConfiguration = ({ integration, isLast, onCancel, onDele
   return (
     <>
       <h3 className="margin-bottom-none">{title}</h3>
-      <div className={`flexbox space-between relative ${classes.widthLimit} ${classes.inputWrapper}`}>
+      <div className={`flexbox space-between padding-top-small relative ${classes.widthLimit} ${classes.inputWrapper}`}>
         <ConfigInput connectionConfig={connectionConfig} isEditing={isEditing} setConnectionConfig={setConnectionConfig} title={title} />
-        <div className="flexbox">
+        <div className="flexbox margin-bottom-x-small">
           {isEditing ? (
             <>
               <Button className={classes.leftButton} onClick={onCancelClick}>
@@ -263,7 +264,7 @@ export const Integrations = () => {
       {!!availableIntegrations.length && (
         <FormControl>
           <InputLabel id="integration-select-label">Add an integration</InputLabel>
-          <Select className={classes.select} labelId="integration-select-label" onChange={onConfigureIntegration} value="">
+          <Select className={classes.select} label="Add an integration" labelId="integration-select-label" onChange={onConfigureIntegration} value="">
             {availableIntegrations.map(item => (
               <MenuItem key={item.provider} value={item.provider}>
                 {item.title}
diff --git a/frontend/src/js/components/settings/PlanExpanded.tsx b/frontend/src/js/components/settings/PlanExpanded.tsx
index 3b734d43..949e8798 100644
--- a/frontend/src/js/components/settings/PlanExpanded.tsx
+++ b/frontend/src/js/components/settings/PlanExpanded.tsx
@@ -15,6 +15,7 @@ import { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { Button, Divider, Drawer } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
 import { DrawerTitle } from '@northern.tech/common-ui/DrawerTitle';
 import Form from '@northern.tech/common-ui/forms/Form';
@@ -47,6 +48,16 @@ interface PlanProps extends PlanExpandedPropsBase {
   plan: Plan;
 }
 
+const useStyles = makeStyles()(theme => ({
+  formWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    maxWidth: 600,
+    '.required .relative': { marginLeft: theme.spacing(10) }
+  }
+}));
+
 const successMessage = (plan: string) =>
   `Thank you! You have successfully subscribed to the ${plan} plan.  You can view and edit your billing details on the Organization and billing page.`;
 
@@ -59,6 +70,8 @@ export const PlanExpanded = (props: ProfileEditProps | PlanProps) => {
   const dispatch = useAppDispatch();
   const formSubmitRef = useRef<() => void | null>(null);
   const { email } = useSelector(getCurrentUser);
+  const { classes } = useStyles();
+
   const handleUpgrade = () => {
     if (formSubmitRef.current) {
       formSubmitRef.current();
@@ -81,33 +94,37 @@ export const PlanExpanded = (props: ProfileEditProps | PlanProps) => {
   };
 
   return (
-    <Drawer anchor="right" open={true} PaperProps={{ style: { minWidth: '75vw' } }}>
-      <DrawerTitle title={<>{selectedPlan ? `Subscribe to Mender ${selectedPlan.name}` : 'Edit billing details'}</>} onClose={onCloseClick} />
+    <Drawer anchor="right" open={true} PaperProps={{ style: { minWidth: '50vw' } }}>
+      <DrawerTitle title={selectedPlan ? `Subscribe to Mender ${selectedPlan.name}` : 'Edit billing details'} onClose={onCloseClick} />
       <Divider className="margin-bottom" />
       {selectedPlan && (
-        <div>
+        <div className="margin-bottom">
           Complete checkout to subscribe to <b>{selectedPlan.name}</b> at <b>{selectedPlan.price}</b>
         </div>
       )}
       <Form submitRef={formSubmitRef} onSubmit={handleSubmit} defaultValues={initialValues} showButtons={false} autocomplete="off">
-        <PlanExpandedForm setIsValid={setIsValid} />
+        <PlanExpandedForm className={classes.formWrapper} setIsValid={setIsValid} />
       </Form>
       {isEdit ? (
-        <>
-          <OrganizationPaymentSettings onComplete={handleUpgrade} updatingCard={updatingCard} setUpdatingCard={setUpdatingCard} isValid={isValid} />
-        </>
+        <OrganizationPaymentSettings
+          className={classes.formWrapper}
+          onComplete={handleUpgrade}
+          updatingCard={updatingCard}
+          setUpdatingCard={setUpdatingCard}
+          isValid={isValid}
+        />
       ) : (
         isValid &&
         organization && (
-          <>
-            <h4>Card Details</h4>
+          <div className={classes.formWrapper}>
+            <h4 className="margin-top margin-bottom-none">Card Details</h4>
             <CardSection
               organization={organization}
               onCardConfirmed={handleUpgrade}
               onSubmit={() => dispatch(startUpgrade(organization.id)).unwrap()}
               isSignUp
             />
-          </>
+          </div>
         )
       )}
       {isEdit && !updatingCard && (
diff --git a/frontend/src/js/components/settings/PlanExpandedForm.tsx b/frontend/src/js/components/settings/PlanExpandedForm.tsx
index 14f060b7..114d22ff 100644
--- a/frontend/src/js/components/settings/PlanExpandedForm.tsx
+++ b/frontend/src/js/components/settings/PlanExpandedForm.tsx
@@ -19,11 +19,14 @@ import TextInput from '@northern.tech/common-ui/forms/TextInput';
 import { HELPTOOLTIPS, MenderHelpTooltip } from '@northern.tech/helptips/HelpTooltips';
 
 interface PlanExpandedFormProp {
+  className: string;
   setIsValid: (disabled: boolean) => void;
 }
+
 export const PlanExpandedForm = (props: PlanExpandedFormProp) => {
-  const { setIsValid } = props;
+  const { className, setIsValid } = props;
   const { formState } = useFormContext();
+
   useEffect(() => {
     if (formState.isDirty) {
       setIsValid(formState.isValid);
@@ -31,25 +34,19 @@ export const PlanExpandedForm = (props: PlanExpandedFormProp) => {
   }, [formState, setIsValid]);
 
   return (
-    <>
-      <div className="flexbox column">
-        <div className="flexbox">
-          <TextInput hint="Billing email" label="Billing email" id="email" required validations="isEmail,trim" />
-          <div className="margin-left-x-large align-self-end">
-            <MenderHelpTooltip id={HELPTOOLTIPS.planUpgradeEmail.id} />
-          </div>
-        </div>
-        <TextInput hint="Company name" label="Company name" id="name" required validations="isLength:2,trim" />
+    <div className={className}>
+      <div className="flexbox center-aligned">
+        <TextInput hint="Billing email" label="Billing email" id="email" required validations="isEmail,trim" />
+        <MenderHelpTooltip className="required" id={HELPTOOLTIPS.planUpgradeEmail.id} />
       </div>
-      <h4>Billing address</h4>
-      <div className="flexbox column">
-        <TextInput hint="Address line 1" label="Address line 1" required id="line1" validations="isLength:3,trim" />
-        <TextInput hint="State" label="State" required id="state" validations="isLength:2,trim" />
+      <TextInput hint="Company name" label="Company name" id="name" required validations="isLength:2,trim" />
 
-        <TextInput hint="City" label="City" required id="city" validations="isLength:2,trim" />
-        <TextInput hint="Zip or Postal code" required label="Zip or Postal code" id="postal_code" validations="isLength:4,trim" />
-        <ControlledCountrySelect required id="country" />
-      </div>
-    </>
+      <h4>Billing address</h4>
+      <TextInput hint="Address line 1" label="Address line 1" required id="line1" validations="isLength:3,trim" />
+      <TextInput hint="State" label="State" required id="state" validations="isLength:2,trim" />
+      <TextInput hint="City" label="City" required id="city" validations="isLength:2,trim" />
+      <TextInput hint="Zip or Postal code" required label="Zip or Postal code" id="postal_code" validations="isLength:4,trim" />
+      <ControlledCountrySelect required id="country" />
+    </div>
   );
 };
diff --git a/frontend/src/js/components/settings/__snapshots__/AccessTokenManagement.test.tsx.snap b/frontend/src/js/components/settings/__snapshots__/AccessTokenManagement.test.tsx.snap
index 7a15a36e..225ed836 100644
--- a/frontend/src/js/components/settings/__snapshots__/AccessTokenManagement.test.tsx.snap
+++ b/frontend/src/js/components/settings/__snapshots__/AccessTokenManagement.test.tsx.snap
@@ -56,6 +56,14 @@ exports[`UserManagement Component renders AccessTokenCreationDialog correctly 1`
   overflow-y: auto;
   padding: 20px 24px;
   min-width: 500px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .MuiDialogTitle-root+.emotion-2 {
@@ -76,7 +84,6 @@ exports[`UserManagement Component renders AccessTokenCreationDialog correctly 1`
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
   min-width: 270px;
 }
@@ -99,6 +106,7 @@ exports[`UserManagement Component renders AccessTokenCreationDialog correctly 1`
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-4.Mui-disabled {
@@ -106,77 +114,30 @@ exports[`UserManagement Component renders AccessTokenCreationDialog correctly 1`
   cursor: default;
 }
 
-label+.emotion-4 {
-  margin-top: 16px;
-}
-
-.emotion-4::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-4.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-4.Mui-error::before,
-.emotion-4.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-4::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-4:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-4:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-4:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-4:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-4.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-4::after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-4:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-4:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-4.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-4:after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-5 {
@@ -197,6 +158,7 @@ label+.emotion-4 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-5::-webkit-input-placeholder {
@@ -268,7 +230,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-5:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-6 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-7 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -282,12 +276,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
   min-width: 270px;
 }
 
-.emotion-7 {
+.emotion-9 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -317,25 +310,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
-.emotion-7.Mui-focused {
+.emotion-9.Mui-focused {
   color: #337a87;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-7.Mui-error {
+.emotion-9.Mui-error {
   color: #ab1000;
 }
 
-.emotion-7.Mui-focused {
+.emotion-9.Mui-focused {
   color: #337a87;
 }
 
-.emotion-8 {
+.emotion-10 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -353,87 +363,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-10.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-8 {
-  margin-top: 16px;
-}
-
-.emotion-8::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-8.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-8.Mui-error::before,
-.emotion-8.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-8::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-8:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-10:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-8:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-10:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-8.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-8::after {
-  border-bottom: 2px solid #337a87;
+.emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-8:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-10.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-8:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-10.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-8:after {
-  border-bottom: 2px solid #337a87;
-}
-
-.emotion-9 {
+.emotion-11 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -442,6 +406,7 @@ label+.emotion-8 {
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -459,31 +424,35 @@ label+.emotion-8 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-9:focus {
+.emotion-11:focus {
   border-radius: 0;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-11.Mui-disabled {
   cursor: default;
 }
 
-.emotion-9[multiple] {
+.emotion-11[multiple] {
   height: auto;
 }
 
-.emotion-9:not([multiple]) option,
-.emotion-9:not([multiple]) optgroup {
+.emotion-11:not([multiple]) option,
+.emotion-11:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-9.emotion-9.emotion-9 {
-  padding-right: 24px;
-  min-width: 16px;
+.emotion-11:focus {
+  border-radius: 4px;
 }
 
-.emotion-9.MuiSelect-select {
+.emotion-11.emotion-11.emotion-11 {
+  padding-right: 32px;
+}
+
+.emotion-11.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -491,76 +460,80 @@ label+.emotion-8 {
   overflow: hidden;
 }
 
-.emotion-9::-webkit-input-placeholder {
+.emotion-11::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-9::-moz-placeholder {
+.emotion-11::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-9::-ms-input-placeholder {
+.emotion-11::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-9:focus {
+.emotion-11:focus {
   outline: 0;
 }
 
-.emotion-9:invalid {
+.emotion-11:invalid {
   box-shadow: none;
 }
 
-.emotion-9::-webkit-search-decoration {
+.emotion-11::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-11.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-9:-webkit-autofill {
+.emotion-11:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-10 {
+.emotion-11:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-12 {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -570,7 +543,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   box-sizing: border-box;
 }
 
-.emotion-11 {
+.emotion-13 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -590,17 +563,44 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
-.emotion-11 iconButton {
+.emotion-13 iconButton {
   margin-right: 8px;
 }
 
-.emotion-11.Mui-disabled {
+.emotion-13.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-12 {
+.emotion-15 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-15>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-16 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -611,23 +611,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-12.Mui-disabled {
+.emotion-16.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-12.Mui-error {
+.emotion-16.Mui-error {
   color: #ab1000;
 }
 
-.emotion-13 {
+.emotion-17 {
   border: 1px solid;
   border-color: #f7f7f7;
   background-color: #f7f7f7;
 }
 
-.emotion-14 {
+.emotion-18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -677,42 +679,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-14::-moz-focus-inner {
+.emotion-18::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-14.Mui-disabled {
+.emotion-18.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-14 {
+  .emotion-18 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-14:hover {
+.emotion-18:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-14:hover {
+  .emotion-18:hover {
     background-color: transparent;
   }
 }
 
-.emotion-14.Mui-disabled {
+.emotion-18.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-14.MuiIconButton-loading {
+.emotion-18.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-15 {
+.emotion-19 {
   display: none;
   position: absolute;
   visibility: visible;
@@ -725,7 +727,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-16 {
+.emotion-20 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -742,11 +744,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-16 iconButton {
+.emotion-20 iconButton {
   margin-right: 8px;
 }
 
-.emotion-17 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -765,11 +767,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   flex: 0 0 auto;
 }
 
-.emotion-17>:not(style)~:not(style) {
+.emotion-21>:not(style)~:not(style) {
   margin-left: 8px;
 }
 
-.emotion-18 {
+.emotion-22 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -828,57 +830,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-18::-moz-focus-inner {
+.emotion-22::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-22.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-18 {
+  .emotion-22 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-18:hover {
+.emotion-22:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-22.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-18:hover {
+.emotion-22:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-18:hover {
+  .emotion-22:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-18:active {
+.emotion-22:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-18.Mui-focusVisible {
+.emotion-22.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-18.Mui-disabled {
+.emotion-22.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-18:hover {
+  .emotion-22:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -886,15 +888,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   }
 }
 
-.emotion-18.MuiButton-loading {
+.emotion-22.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-18:hover {
+.emotion-22:hover {
   colors: #337a87;
 }
 
-.emotion-18.MuiButton-text {
+.emotion-22.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -919,38 +921,55 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
         class="MuiFormControl-root MuiTextField-root required emotion-3"
       >
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-4"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-4"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input Mui-disabled emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-5"
             disabled=""
             id=":rm:"
             placeholder="Name"
             type="text"
             value=""
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-6"
+          >
+            <legend
+              class="emotion-7"
+            >
+              <span
+                aria-hidden="true"
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
     </form>
     <div>
       <div
-        class="MuiFormControl-root emotion-6"
+        class="MuiFormControl-root emotion-8"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-7"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
           data-shrink="true"
+          id="token-expiration-label"
         >
           Expiration
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiSelect-root emotion-8"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiSelect-root emotion-10"
         >
           <div
             aria-disabled="true"
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="MuiSelect-select MuiSelect-standard Mui-disabled MuiInputBase-input MuiInput-input Mui-disabled emotion-9"
+            aria-labelledby="token-expiration-label"
+            class="MuiSelect-select MuiSelect-outlined Mui-disabled MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-11"
             role="combobox"
           >
             a year
@@ -958,14 +977,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
           <input
             aria-hidden="true"
             aria-invalid="false"
-            class="MuiSelect-nativeInput emotion-10"
+            class="MuiSelect-nativeInput emotion-12"
             disabled=""
             tabindex="-1"
             value="31536000"
           />
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard Mui-disabled emotion-11"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined Mui-disabled emotion-13"
             data-testid="ArrowDropDownIcon"
             focusable="false"
             viewBox="0 0 24 24"
@@ -974,9 +993,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
               d="M7 10l5 5 5-5z"
             />
           </svg>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-6"
+          >
+            <legend
+              class="emotion-15"
+            >
+              <span>
+                Expiration
+              </span>
+            </legend>
+          </fieldset>
         </div>
         <p
-          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-12"
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-16"
           title="2020-01-13"
         >
           expires on 
@@ -989,24 +1020,24 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
       </div>
     </div>
     <div
-      class="margin-top margin-bottom"
+      class="margin-top-small margin-bottom-small"
     >
       <div
-        class="code emotion-13 "
+        class="code emotion-17 "
       >
         <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-14"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-18"
           id=":ro:"
           style="float: right; margin: -20px 0px 0px 10px;"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiIconButton-loadingIndicator emotion-15"
+            class="MuiIconButton-loadingIndicator emotion-19"
           />
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-16"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-20"
             data-testid="FileCopyIcon"
             focusable="false"
             viewBox="0 0 24 24"
@@ -1031,10 +1062,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
     </div>
   </div>
   <div
-    class="MuiDialogActions-root MuiDialogActions-spacing emotion-17"
+    class="MuiDialogActions-root MuiDialogActions-spacing emotion-21"
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-18"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-22"
       disabled=""
       id=":rp:"
       tabindex="-1"
diff --git a/frontend/src/js/components/settings/__snapshots__/Global.test.tsx.snap b/frontend/src/js/components/settings/__snapshots__/Global.test.tsx.snap
index e4a1d3ac..c3e0e3d4 100644
--- a/frontend/src/js/components/settings/__snapshots__/Global.test.tsx.snap
+++ b/frontend/src/js/components/settings/__snapshots__/Global.test.tsx.snap
@@ -55,7 +55,6 @@ exports[`GlobalSettings Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -89,6 +88,23 @@ exports[`GlobalSettings Component renders correctly 1`] = `
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
 .emotion-3.Mui-focused {
@@ -125,6 +141,7 @@ exports[`GlobalSettings Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-4.Mui-disabled {
@@ -132,77 +149,30 @@ exports[`GlobalSettings Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-4 {
-  margin-top: 16px;
-}
-
-.emotion-4::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-4.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-4.Mui-error::before,
-.emotion-4.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-4::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-4:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-4:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-4:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-4:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-4.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-4::after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-4:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-4.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-4:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-4:after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-5 {
@@ -214,6 +184,7 @@ label+.emotion-4 {
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -231,6 +202,7 @@ label+.emotion-4 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-5:focus {
@@ -250,9 +222,12 @@ label+.emotion-4 {
   background-color: #fff;
 }
 
+.emotion-5:focus {
+  border-radius: 4px;
+}
+
 .emotion-5.emotion-5.emotion-5 {
-  padding-right: 24px;
-  min-width: 16px;
+  padding-right: 32px;
 }
 
 .emotion-5.MuiSelect-select {
@@ -332,6 +307,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-5:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-6 {
   bottom: 0;
   left: 0;
@@ -362,6 +341,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
 .emotion-7 iconButton {
@@ -373,6 +353,50 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
 }
 
 .emotion-8 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-9 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-9>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-10 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -383,17 +407,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-10.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-8.Mui-error {
+.emotion-10.Mui-error {
   color: #ab1000;
 }
 
-.emotion-9 {
+.emotion-11 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -418,27 +444,27 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
 }
 
-.emotion-9.Mui-focused {
+.emotion-11.Mui-focused {
   color: #337a87;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-11.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-9.Mui-error {
+.emotion-11.Mui-error {
   color: #ab1000;
 }
 
-.emotion-9.Mui-focused {
+.emotion-11.Mui-focused {
   color: #337a87;
 }
 
-.emotion-10 {
+.emotion-12 {
   gap: 16px;
 }
 
-.emotion-13 {
+.emotion-15 {
   background-color: #fff;
   color: rgba(10, 10, 11, 0.78);
   -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -454,7 +480,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   padding: 0;
 }
 
-.emotion-13::before {
+.emotion-15::before {
   position: absolute;
   left: 0;
   top: -1px;
@@ -467,58 +493,58 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-13:first-of-type::before {
+.emotion-15:first-of-type::before {
   display: none;
 }
 
-.emotion-13.Mui-expanded::before {
+.emotion-15.Mui-expanded::before {
   opacity: 0;
 }
 
-.emotion-13.Mui-expanded:first-of-type {
+.emotion-15.Mui-expanded:first-of-type {
   margin-top: 0;
 }
 
-.emotion-13.Mui-expanded:last-of-type {
+.emotion-15.Mui-expanded:last-of-type {
   margin-bottom: 0;
 }
 
-.emotion-13.Mui-expanded+.emotion-13.Mui-expanded::before {
+.emotion-15.Mui-expanded+.emotion-15.Mui-expanded::before {
   display: none;
 }
 
-.emotion-13.Mui-disabled {
+.emotion-15.Mui-disabled {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-13.Mui-expanded {
+.emotion-15.Mui-expanded {
   margin: 16px 0;
 }
 
-.emotion-13:before {
+.emotion-15:before {
   display: none;
 }
 
-.emotion-13.Mui-expanded {
+.emotion-15.Mui-expanded {
   margin: auto;
   background-color: #f7f7f7;
 }
 
-.emotion-13 ul {
+.emotion-15 ul {
   -webkit-padding-start: 0;
   padding-inline-start: 0;
 }
 
-.emotion-13.Mui-disabled,
-.emotion-13.Mui-expanded {
+.emotion-15.Mui-disabled,
+.emotion-15.Mui-expanded {
   background-color: #fff;
 }
 
-.emotion-14 {
+.emotion-16 {
   all: unset;
 }
 
-.emotion-15 {
+.emotion-17 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -566,44 +592,44 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin-bottom: 8px;
 }
 
-.emotion-15::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-15.Mui-disabled {
+.emotion-17.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-15 {
+  .emotion-17 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-15.Mui-focusVisible {
+.emotion-17.Mui-focusVisible {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-15.Mui-disabled {
+.emotion-17.Mui-disabled {
   opacity: 0.38;
 }
 
-.emotion-15:hover:not(.Mui-disabled) {
+.emotion-17:hover:not(.Mui-disabled) {
   cursor: pointer;
 }
 
-.emotion-15.Mui-expanded {
+.emotion-17.Mui-expanded {
   min-height: 64px;
 }
 
-.emotion-15.Mui-expanded {
+.emotion-17.Mui-expanded {
   height: 48px;
   min-height: 48px;
 }
 
-.emotion-16 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -622,19 +648,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   align-items: center;
 }
 
-.emotion-16.Mui-expanded {
+.emotion-18.Mui-expanded {
   margin: 20px 0;
 }
 
-.emotion-16.Mui-expanded {
+.emotion-18.Mui-expanded {
   margin: 0;
 }
 
-.emotion-16>:last-child {
+.emotion-18>:last-child {
   padding-right: 12px;
 }
 
-.emotion-17 {
+.emotion-19 {
   position: relative;
   overflow: hidden;
   display: block;
@@ -646,13 +672,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
 }
 
 @media print {
-  .emotion-17 {
+  .emotion-19 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-18 {
+.emotion-20 {
   width: 100%;
   position: absolute;
   left: 0;
@@ -666,7 +692,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   transition: transform .4s linear;
 }
 
-.emotion-19 {
+.emotion-21 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -716,42 +742,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-19::-moz-focus-inner {
+.emotion-21::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-19.Mui-disabled {
+.emotion-21.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-19 {
+  .emotion-21 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-19:hover {
+.emotion-21:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-19:hover {
+  .emotion-21:hover {
     background-color: transparent;
   }
 }
 
-.emotion-19.Mui-disabled {
+.emotion-21.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-19.MuiIconButton-loading {
+.emotion-21.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-20 {
+.emotion-22 {
   display: none;
   position: absolute;
   visibility: visible;
@@ -764,7 +790,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-21 {
+.emotion-23 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -781,11 +807,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-21 iconButton {
+.emotion-23 iconButton {
   margin-right: 8px;
 }
 
-.emotion-22 {
+.emotion-24 {
   height: 0;
   overflow: hidden;
   -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -793,7 +819,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   visibility: hidden;
 }
 
-.emotion-23 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -801,18 +827,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   width: 100%;
 }
 
-.emotion-24 {
+.emotion-26 {
   width: 100%;
 }
 
-.emotion-25 {
+.emotion-27 {
   padding: 8px 16px 16px;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
 }
 
-.emotion-26 {
+.emotion-28 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -826,15 +852,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   position: relative;
 }
 
-.emotion-26 .MuiListSubheader-root {
+.emotion-28 .MuiListSubheader-root {
   top: -10px;
 }
 
-.emotion-26 li>ul {
+.emotion-28 li>ul {
   overflow: initial;
 }
 
-.emotion-27 {
+.emotion-29 {
   box-sizing: border-box;
   line-height: 48px;
   list-style: none;
@@ -851,7 +877,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   background-color: #fff;
 }
 
-.emotion-28 {
+.emotion-30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -878,25 +904,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   padding-bottom: 11px;
 }
 
-.emotion-28.undefined {
+.emotion-30.undefined {
   opacity: 1;
 }
 
-.emotion-28.active {
+.emotion-30.active {
   background-color: #fff;
 }
 
-.emotion-28.leftNav.active {
+.emotion-30.leftNav.active {
   border-top: 1px solid #d4e9e7;
   border-bottom: 1px solid #d4e9e7;
 }
 
-.emotion-28.navLink,
-.emotion-28.navLink .MuiListItemText-root {
+.emotion-30.navLink,
+.emotion-30.navLink .MuiListItemText-root {
   color: #969696;
 }
 
-.emotion-29 {
+.emotion-31 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -908,15 +934,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   color: rgba(10, 10, 11, 0.78);
 }
 
-.MuiTypography-root:where(.emotion-29 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-31 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-29 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-31 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-30 {
+.emotion-32 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -924,7 +950,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   font-size: 0.9286rem;
 }
 
-.emotion-92 {
+.emotion-94 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -943,13 +969,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
 }
 
 @media print {
-  .emotion-92 {
+  .emotion-94 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-93 {
+.emotion-95 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -993,79 +1019,79 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-93::-moz-focus-inner {
+.emotion-95::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-93.Mui-disabled {
+.emotion-95.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-93 {
+  .emotion-95 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-93.Mui-checked {
+.emotion-95.Mui-checked {
   -webkit-transform: translateX(20px);
   -moz-transform: translateX(20px);
   -ms-transform: translateX(20px);
   transform: translateX(20px);
 }
 
-.emotion-93.Mui-disabled {
+.emotion-95.Mui-disabled {
   color: #d8ebe9;
 }
 
-.emotion-93.Mui-checked+.MuiSwitch-track {
+.emotion-95.Mui-checked+.MuiSwitch-track {
   opacity: 0.5;
 }
 
-.emotion-93.Mui-disabled+.MuiSwitch-track {
+.emotion-95.Mui-disabled+.MuiSwitch-track {
   opacity: 0.12;
 }
 
-.emotion-93 .MuiSwitch-input {
+.emotion-95 .MuiSwitch-input {
   left: -100%;
   width: 300%;
 }
 
-.emotion-93:hover {
+.emotion-95:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
 @media (hover: none) {
-  .emotion-93:hover {
+  .emotion-95:hover {
     background-color: transparent;
   }
 }
 
-.emotion-93.Mui-checked {
+.emotion-95.Mui-checked {
   color: #337a87;
 }
 
-.emotion-93.Mui-checked:hover {
+.emotion-95.Mui-checked:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
 @media (hover: none) {
-  .emotion-93.Mui-checked:hover {
+  .emotion-95.Mui-checked:hover {
     background-color: transparent;
   }
 }
 
-.emotion-93.Mui-checked.Mui-disabled {
+.emotion-95.Mui-checked.Mui-disabled {
   color: rgb(177, 204, 209);
 }
 
-.emotion-93.Mui-checked+.MuiSwitch-track {
+.emotion-95.Mui-checked+.MuiSwitch-track {
   background-color: #337a87;
 }
 
-.emotion-94 {
+.emotion-96 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -1078,7 +1104,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   z-index: 1;
 }
 
-.emotion-95 {
+.emotion-97 {
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
   background-color: currentColor;
   width: 20px;
@@ -1086,7 +1112,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-96 {
+.emotion-98 {
   height: 100%;
   width: 100%;
   border-radius: 7px;
@@ -1097,7 +1123,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   opacity: 0.38;
 }
 
-.emotion-97 {
+.emotion-99 {
   background-color: #f7f7f7;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1111,27 +1137,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   padding-top: 0;
 }
 
-.emotion-97>h5 {
+.emotion-99>h5 {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.emotion-97 .flexbox>span {
+.emotion-99 .flexbox>span {
   -webkit-align-self: flex-end;
   -ms-flex-item-align: flex-end;
   align-self: flex-end;
 }
 
-.emotion-97 .MuiTextField-root {
+.emotion-99 .MuiTextField-root {
   max-width: 200px;
   min-width: 100px;
 }
 
-.emotion-97 .MuiFormControlLabel-root {
-  margin-top: 8px;
-}
-
-.emotion-98 {
+.emotion-100 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1145,11 +1167,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-100 {
+.emotion-102 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1167,87 +1188,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-100.Mui-disabled {
+.emotion-102.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-100 {
-  margin-top: 16px;
-}
-
-.emotion-100::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-100.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-100.Mui-error::before,
-.emotion-100.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-100::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-100:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-102:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-100:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-102:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-100.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-100::after {
-  border-bottom: 2px solid #337a87;
+.emotion-102.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-100:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-102.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-100:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-102.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-100:after {
-  border-bottom: 2px solid #337a87;
+.emotion-102.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-101 {
+.emotion-103 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -1265,78 +1240,83 @@ label+.emotion-100 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-101::-webkit-input-placeholder {
+.emotion-103::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-101::-moz-placeholder {
+.emotion-103::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-101::-ms-input-placeholder {
+.emotion-103::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-101:focus {
+.emotion-103:focus {
   outline: 0;
 }
 
-.emotion-101:invalid {
+.emotion-103:invalid {
   box-shadow: none;
 }
 
-.emotion-101::-webkit-search-decoration {
+.emotion-103::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-101::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-103::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-101::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-103::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-101::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-103::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-103:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-103:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-103:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-101.Mui-disabled {
+.emotion-103.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-101:-webkit-autofill {
+.emotion-103:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-103 {
+.emotion-103:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-107 {
   margin: 0;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1345,7 +1325,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
   display: block;
 }
 
-.emotion-104 {
+.emotion-108 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 16px;
+  margin-left: 16px;
+}
+
+.emotion-109 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1362,15 +1354,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
   margin-top: 18px;
 }
 
-.emotion-104.Mui-disabled {
+.emotion-109.Mui-disabled {
   cursor: default;
 }
 
-.emotion-104 .MuiFormControlLabel-label.Mui-disabled {
+.emotion-109 .MuiFormControlLabel-label.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-105 {
+.emotion-110 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1409,42 +1401,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-105::-moz-focus-inner {
+.emotion-110::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-105.Mui-disabled {
+.emotion-110.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-105 {
+  .emotion-110 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-105:hover {
+.emotion-110:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-105.Mui-checked,
-.emotion-105.MuiCheckbox-indeterminate {
+.emotion-110.Mui-checked,
+.emotion-110.MuiCheckbox-indeterminate {
   color: #337a87;
 }
 
-.emotion-105.Mui-disabled {
+.emotion-110.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: none) {
-  .emotion-105:hover {
+  .emotion-110:hover {
     background-color: transparent;
   }
 }
 
-.emotion-107 {
+.emotion-112 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1461,11 +1453,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
   font-size: 1.1607rem;
 }
 
-.emotion-107 iconButton {
+.emotion-112 iconButton {
   margin-right: 8px;
 }
 
-.emotion-139 {
+.emotion-154 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -1476,7 +1468,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
   grid-template-columns: 100px 100px;
 }
 
-.emotion-140 {
+.emotion-155 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1490,12 +1482,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
   margin-top: 0;
   min-width: initial;
 }
 
+.emotion-159 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-161 {
+  color: rgba(0, 0, 0, 0.54);
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.6964rem;
+  line-height: 1.66;
+  text-align: left;
+  margin-top: 3px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+}
+
+.emotion-161.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-161.Mui-error {
+  color: #ab1000;
+}
+
 <div
   class="margin-top-small"
   style="max-width: 750px;"
@@ -1534,75 +1556,90 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
   </div>
   <div
     class="flexbox space-between"
-    style="align-items: flex-start; max-width: 750px;"
+    style="align-items: start; max-width: 750px;"
   >
     <div
-      class="MuiFormControl-root emotion-2"
+      class="flexbox column"
     >
-      <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
-        data-shrink="true"
-        id="device-id"
-      >
-        Device identity attribute
-      </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root emotion-4"
+        class="MuiFormControl-root margin-top-none emotion-2"
       >
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-5"
-          role="combobox"
-          tabindex="0"
-        >
-          Device ID
-        </div>
-        <input
-          aria-hidden="true"
-          aria-invalid="false"
-          class="MuiSelect-nativeInput emotion-6"
-          tabindex="-1"
-          value="id"
-        />
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-7"
-          data-testid="ArrowDropDownIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <label
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
+          data-shrink="true"
+          id="device-id"
         >
-          <path
-            d="M7 10l5 5 5-5z"
-          />
-        </svg>
-      </div>
-      <div
-        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled info emotion-8"
-      >
+          Device identity attribute
+        </label>
         <div
-          class="margin-top-small margin-bottom-small"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root emotion-4"
         >
-          Choose a device identity attribute to use to identify your devices throughout the UI.
+          <div
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-labelledby="device-id"
+            class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-5"
+            role="combobox"
+            tabindex="0"
+          >
+            Device ID
+          </div>
+          <input
+            aria-hidden="true"
+            aria-invalid="false"
+            class="MuiSelect-nativeInput emotion-6"
+            tabindex="-1"
+            value="id"
+          />
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-7"
+            data-testid="ArrowDropDownIcon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7 10l5 5 5-5z"
+            />
+          </svg>
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-8"
+          >
+            <legend
+              class="emotion-9"
+            >
+              <span>
+                Device identity attribute
+              </span>
+            </legend>
+          </fieldset>
         </div>
         <div
-          class="margin-top-small margin-bottom-small"
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled info margin-left-none emotion-10"
         >
-          <a
-            class=""
-            href="https://docs.mender.io/client-installation/identity"
-            rel="noopener"
-            target="_blank"
+          <div>
+            Choose a device identity attribute to use to identify your devices throughout the UI.
+          </div>
+          <div
+            class="margin-top-x-small "
           >
-            Learn how to add custom identity attributes
-          </a>
-           to your devices.
+            <a
+              class=""
+              href="https://docs.mender.io/client-installation/identity"
+              rel="noopener"
+              target="_blank"
+            >
+              Learn how to add custom identity attributes
+            </a>
+             to your devices.
+          </div>
         </div>
       </div>
     </div>
   </div>
   <label
-    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink margin-top-small padding-top-small flexbox emotion-9"
+    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink margin-top-small padding-top-small flexbox emotion-11"
     data-shrink="true"
     id="filterable-attributes-usage-and-limit"
   >
@@ -1612,7 +1649,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
     100
     )
     <div
-      class="flexbox center-aligned margin-left-small emotion-10"
+      class="flexbox center-aligned margin-left-small emotion-12"
     >
       <div
         class=""
@@ -1640,46 +1677,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
     </div>
   </label>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters emotion-13"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters emotion-15"
     style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
     <h3
-      class="MuiAccordion-heading emotion-14"
+      class="MuiAccordion-heading emotion-16"
     >
       <button
         aria-expanded="false"
-        class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters emotion-15"
+        class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters emotion-17"
         tabindex="0"
         type="button"
       >
         <span
-          class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters emotion-16"
+          class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters emotion-18"
         >
           <span
             aria-valuemax="100"
             aria-valuemin="0"
             aria-valuenow="20"
-            class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-determinate emotion-17"
+            class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-determinate emotion-19"
             role="progressbar"
             style="width: 100%;"
           >
             <span
-              class="MuiLinearProgress-bar MuiLinearProgress-bar1 MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Determinate emotion-18"
+              class="MuiLinearProgress-bar MuiLinearProgress-bar1 MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Determinate emotion-20"
               style="transform: translateX(-80%);"
             />
           </span>
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge margin-left-small expandButton emotion-19"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge margin-left-small expandButton emotion-21"
             id=":r3:"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiIconButton-loadingIndicator emotion-20"
+              class="MuiIconButton-loadingIndicator emotion-22"
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-21"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-23"
               data-testid="ArrowDropDownIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1693,53 +1730,53 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
       </button>
     </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden emotion-22"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden emotion-24"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical emotion-23"
+        class="MuiCollapse-wrapper MuiCollapse-vertical emotion-25"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-24"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-26"
         >
           <div
             class="MuiAccordion-region"
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root emotion-25"
+              class="MuiAccordionDetails-root emotion-27"
             >
               <ul
-                class="MuiList-root MuiList-padding emotion-26"
+                class="MuiList-root MuiList-padding emotion-28"
               >
                 <li>
                   <ul>
                     <li
-                      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky emotion-27"
+                      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky emotion-29"
                     >
                       identity
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           status
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           mac
                         </span>
@@ -1750,200 +1787,200 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
                 <li>
                   <ul>
                     <li
-                      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky emotion-27"
+                      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky emotion-29"
                     >
                       inventory
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           artifact_name
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           cpu_model
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           device_type
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           hostname
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           ipv4_wlan0
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           ipv6_wlan0
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           kernel
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           mac_eth0
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           mac_wlan0
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           mem_total_kB
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           mender_bootloader_integration
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           mender_client_version
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           network_interfaces
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           os
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           rootfs_type
                         </span>
@@ -1954,44 +1991,44 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
                 <li>
                   <ul>
                     <li
-                      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky emotion-27"
+                      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky emotion-29"
                     >
                       system
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           created_ts
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           updated_ts
                         </span>
                       </div>
                     </li>
                     <li
-                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-28"
+                      class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-30"
                     >
                       <div
-                        class="MuiListItemText-root emotion-29"
+                        class="MuiListItemText-root emotion-31"
                       >
                         <span
-                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
+                          class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-32"
                         >
                           group
                         </span>
@@ -2002,7 +2039,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
                 <li>
                   <ul>
                     <li
-                      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky emotion-27"
+                      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky emotion-29"
                     >
                       tags
                     </li>
@@ -2016,7 +2053,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
     </div>
   </div>
   <label
-    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink margin-top emotion-9"
+    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink margin-top emotion-11"
     data-shrink="true"
   >
     Deployments
@@ -2030,26 +2067,26 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
       Require confirmation on deployment creation
     </p>
     <span
-      class="MuiSwitch-root MuiSwitch-sizeMedium emotion-92"
+      class="MuiSwitch-root MuiSwitch-sizeMedium emotion-94"
     >
       <span
-        class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary emotion-93"
+        class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary emotion-95"
       >
         <input
-          class="PrivateSwitchBase-input MuiSwitch-input emotion-94"
+          class="PrivateSwitchBase-input MuiSwitch-input emotion-96"
           type="checkbox"
         />
         <span
-          class="MuiSwitch-thumb emotion-95"
+          class="MuiSwitch-thumb emotion-97"
         />
       </span>
       <span
-        class="MuiSwitch-track emotion-96"
+        class="MuiSwitch-track emotion-98"
       />
     </span>
   </div>
   <div
-    class="flexbox column emotion-97"
+    class="flexbox column emotion-99"
   >
     <div
       class="flexbox center-aligned"
@@ -2070,10 +2107,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
         class="flexbox"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-98"
+          class="MuiFormControl-root MuiTextField-root emotion-100"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
             data-shrink="true"
             for=":r5:"
             id=":r5:-label"
@@ -2081,22 +2118,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
             Timeout
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-100"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-102"
           >
             <input
               aria-describedby=":r5:-helper-text"
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input emotion-101"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-103"
               id=":r5:"
               pattern="[0-9]*"
               step="1"
               type="numeric"
               value="60"
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-8"
+            >
+              <legend
+                class="emotion-9"
+              >
+                <span>
+                  Timeout
+                </span>
+              </legend>
+            </fieldset>
           </div>
           <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-8"
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-10"
             id=":r5:-helper-text"
           >
             Defaults to: 60
@@ -2109,27 +2158,27 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
         </span>
       </div>
       <span
-        class="MuiTypography-root MuiTypography-caption margin-top-small emotion-103"
+        class="MuiTypography-root MuiTypography-caption margin-top-small emotion-107"
       >
         xDelta3 arguments
       </span>
       <div
-        class="flexbox column margin-left"
+        class="emotion-108"
       >
         <label
-          class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-104"
+          class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-109"
         >
           <span
-            class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall emotion-105"
+            class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall emotion-110"
           >
             <input
-              class="PrivateSwitchBase-input emotion-94"
+              class="PrivateSwitchBase-input emotion-96"
               data-indeterminate="false"
               type="checkbox"
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-107"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-112"
               data-testid="CheckBoxOutlineBlankIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -2140,25 +2189,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
             </svg>
           </span>
           <span
-            class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-30"
+            class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-32"
           >
             Disable checksum
           </span>
         </label>
         <label
-          class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-104"
+          class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd margin-top-none emotion-109"
         >
           <span
-            class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall emotion-105"
+            class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall emotion-110"
           >
             <input
-              class="PrivateSwitchBase-input emotion-94"
+              class="PrivateSwitchBase-input emotion-96"
               data-indeterminate="false"
               type="checkbox"
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-107"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-112"
               data-testid="CheckBoxOutlineBlankIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -2169,16 +2218,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
             </svg>
           </span>
           <span
-            class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-30"
+            class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-32"
           >
             Disable external decompression
           </span>
         </label>
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-98"
+          class="MuiFormControl-root MuiTextField-root emotion-100"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
             data-shrink="true"
             for=":r6:"
             id=":r6:-label"
@@ -2186,25 +2235,37 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
             Compression level
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-100"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-102"
           >
             <input
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input emotion-101"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-103"
               id=":r6:"
               pattern="[0-9]*"
               step="1"
               type="numeric"
               value="0"
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-8"
+            >
+              <legend
+                class="emotion-9"
+              >
+                <span>
+                  Compression level
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-98"
+          class="MuiFormControl-root MuiTextField-root emotion-100"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
             data-shrink="true"
             for=":r7:"
             id=":r7:-label"
@@ -2212,32 +2273,44 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
             Source window size
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-100"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-102"
           >
             <input
               aria-describedby=":r7:-helper-text"
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input emotion-101"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-103"
               id=":r7:"
               pattern="[0-9]*"
               step="1"
               type="numeric"
               value="5"
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-8"
+            >
+              <legend
+                class="emotion-9"
+              >
+                <span>
+                  Source window size
+                </span>
+              </legend>
+            </fieldset>
           </div>
           <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-8"
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-10"
             id=":r7:-helper-text"
           >
             Defaults to: 10
           </p>
         </div>
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-98"
+          class="MuiFormControl-root MuiTextField-root emotion-100"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
             data-shrink="true"
             for=":r8:"
             id=":r8:-label"
@@ -2245,32 +2318,44 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
             Input window size
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-100"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-102"
           >
             <input
               aria-describedby=":r8:-helper-text"
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input emotion-101"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-103"
               id=":r8:"
               pattern="[0-9]*"
               step="1"
               type="numeric"
               value="5"
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-8"
+            >
+              <legend
+                class="emotion-9"
+              >
+                <span>
+                  Input window size
+                </span>
+              </legend>
+            </fieldset>
           </div>
           <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-8"
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-10"
             id=":r8:-helper-text"
           >
             Defaults to: 10
           </p>
         </div>
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-98"
+          class="MuiFormControl-root MuiTextField-root emotion-100"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
             data-shrink="true"
             for=":r9:"
             id=":r9:-label"
@@ -2278,32 +2363,44 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
             Compression duplicates window
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-100"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-102"
           >
             <input
               aria-describedby=":r9:-helper-text"
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input emotion-101"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-103"
               id=":r9:"
               pattern="[0-9]*"
               step="1"
               type="numeric"
               value="5"
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-8"
+            >
+              <legend
+                class="emotion-9"
+              >
+                <span>
+                  Compression duplicates window
+                </span>
+              </legend>
+            </fieldset>
           </div>
           <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-8"
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-10"
             id=":r9:-helper-text"
           >
             Defaults to: 10
           </p>
         </div>
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-98"
+          class="MuiFormControl-root MuiTextField-root emotion-100"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
             data-shrink="true"
             for=":ra:"
             id=":ra:-label"
@@ -2311,22 +2408,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
             Instruction buffer size
           </label>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-100"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-102"
           >
             <input
               aria-describedby=":ra:-helper-text"
               aria-invalid="false"
               autocomplete="off"
-              class="MuiInputBase-input MuiInput-input emotion-101"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-103"
               id=":ra:"
               pattern="[0-9]*"
               step="1"
               type="numeric"
               value="5"
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-8"
+            >
+              <legend
+                class="emotion-9"
+              >
+                <span>
+                  Instruction buffer size
+                </span>
+              </legend>
+            </fieldset>
           </div>
           <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-8"
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-10"
             id=":ra:-helper-text"
           >
             Defaults to: 10
@@ -2336,40 +2445,55 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-101:focus::-ms-input
     </div>
   </div>
   <label
-    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink margin-top emotion-9"
+    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink margin-top emotion-11"
     data-shrink="true"
     id="offline-theshold"
   >
     Offline threshold
   </label>
   <div
-    class="emotion-139"
+    class="emotion-154"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root emotion-140"
+      class="MuiFormControl-root MuiTextField-root emotion-155"
     >
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-100"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-102"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input emotion-101"
+          class="MuiInputBase-input MuiOutlinedInput-input emotion-103"
           id=":r4:"
           max="1000"
           min="1"
           type="number"
           value="1"
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-8"
+        >
+          <legend
+            class="emotion-159"
+          >
+            <span
+              aria-hidden="true"
+              class="notranslate"
+            >
+              ​
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
     <p
-      class="MuiTypography-root MuiTypography-body1 capitalized-start emotion-30"
+      class="MuiTypography-root MuiTypography-body1 capitalized-start emotion-32"
     >
       days
     </p>
   </div>
   <div
-    class="MuiFormHelperText-root info emotion-8"
+    class="MuiFormHelperText-root info emotion-161"
   >
     Choose how long a device can go without reporting to the server before it is considered “offline”.
   </div>
diff --git a/frontend/src/js/components/settings/__snapshots__/Integrations.test.tsx.snap b/frontend/src/js/components/settings/__snapshots__/Integrations.test.tsx.snap
index bdea503f..18a1b19a 100644
--- a/frontend/src/js/components/settings/__snapshots__/Integrations.test.tsx.snap
+++ b/frontend/src/js/components/settings/__snapshots__/Integrations.test.tsx.snap
@@ -34,9 +34,7 @@ exports[`Integrations Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
-  margin: 8px;
   min-width: 500px;
   word-break: break-all;
 }
@@ -71,6 +69,23 @@ exports[`Integrations Component renders correctly 1`] = `
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
 .emotion-3.Mui-focused {
@@ -108,6 +123,8 @@ exports[`Integrations Component renders correctly 1`] = `
   align-items: center;
   padding: 4px 0 5px;
   position: relative;
+  border-radius: 4px;
+  padding: 16.5px 14px;
 }
 
 .emotion-4.Mui-disabled {
@@ -115,77 +132,30 @@ exports[`Integrations Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-4 {
-  margin-top: 16px;
-}
-
-.emotion-4::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-4.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-4.Mui-error::before,
-.emotion-4.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-4::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-4:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-4:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-4:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-4:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-4.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-4::after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-4:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-4.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-4:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-4:after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-5 {
@@ -210,6 +180,8 @@ label+.emotion-4 {
   resize: none;
   padding: 0;
   padding-top: 0;
+  padding: 16.5px 14px;
+  padding: 0;
 }
 
 .emotion-5::-webkit-input-placeholder {
@@ -281,7 +253,55 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-5:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-7 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-8 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-8>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -342,33 +362,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   margin-right: 8px;
 }
 
-.emotion-7::-moz-focus-inner {
+.emotion-9::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-7 {
+  .emotion-9 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-7:hover {
+  .emotion-9:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -376,19 +396,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   }
 }
 
-.emotion-7.MuiButton-loading {
+.emotion-9.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   colors: #337a87;
 }
 
-.emotion-7.MuiButton-text {
+.emotion-9.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-8 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -448,33 +468,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-8::-moz-focus-inner {
+.emotion-10::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-10.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-8 {
+  .emotion-10 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-8:hover {
+.emotion-10:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-10.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-8:hover {
+  .emotion-10:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -482,28 +502,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   }
 }
 
-.emotion-8.MuiButton-loading {
+.emotion-10.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-8:hover {
+.emotion-10:hover {
   colors: #337a87;
 }
 
-.emotion-8.MuiButton-text {
+.emotion-10.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-9 {
+.emotion-11 {
   color: rgba(0, 0, 0, 0.38);
   margin: 15px 0;
 }
 
-.emotion-10 {
+.emotion-12 {
   gap: 8px;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -520,11 +540,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   font-size: 1.1607rem;
 }
 
-.emotion-12 iconButton {
+.emotion-14 iconButton {
   margin-right: 8px;
 }
 
-.emotion-13 {
+.emotion-15 {
   margin: 0;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -536,7 +556,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   max-width: 750px;
 }
 
-.emotion-17 {
+.emotion-18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.emotion-20 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -560,24 +591,54 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
-.emotion-17.Mui-focused {
+.emotion-20.Mui-focused {
   color: #337a87;
 }
 
-.emotion-17.Mui-disabled {
+.emotion-20.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-17.Mui-error {
+.emotion-20.Mui-error {
   color: #ab1000;
 }
 
-.emotion-17.Mui-focused {
+.emotion-20.Mui-focused {
   color: #337a87;
 }
 
+.emotion-25 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-25>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
 <div>
   <h2
     class="margin-top-small"
@@ -590,13 +651,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
     Azure IoT Hub
   </h3>
   <div
-    class="flexbox space-between relative emotion-0 emotion-1"
+    class="flexbox space-between padding-top-small relative emotion-0 emotion-1"
   >
     <div
       class="MuiFormControl-root MuiTextField-root emotion-2"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-3"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
         data-shrink="true"
         for=":r3:"
         id=":r3:-label"
@@ -604,11 +665,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
         Azure IoT Hub connection string
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
       >
         <textarea
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+          class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
           disabled=""
           id=":r3:"
           style="height: 0px; overflow: hidden;"
@@ -617,18 +678,30 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
         </textarea>
         <textarea
           aria-hidden="true"
-          class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+          class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
           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"
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-7"
+        >
+          <legend
+            class="emotion-8"
+          >
+            <span>
+              Azure IoT Hub connection string
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
     <div
-      class="flexbox"
+      class="flexbox margin-bottom-x-small"
     >
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-7"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-9"
         id=":r4:"
         tabindex="0"
         type="button"
@@ -636,7 +709,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
         Edit
       </button>
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-8"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-10"
         id=":r5:"
         tabindex="0"
         type="button"
@@ -646,11 +719,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
     </div>
   </div>
   <p
-    class="emotion-9 icon flexbox center-aligned emotion-10 margin-bottom emotion-0"
+    class="emotion-11 icon flexbox center-aligned emotion-12 margin-bottom emotion-0"
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-12"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-14"
       data-testid="InfoOutlinedIcon"
       focusable="false"
       viewBox="0 0 24 24"
@@ -673,7 +746,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
     </span>
   </p>
   <hr
-    class="MuiDivider-root MuiDivider-fullWidth margin-bottom emotion-13"
+    class="MuiDivider-root MuiDivider-fullWidth margin-bottom emotion-15"
   />
   <h3
     class="margin-bottom-none"
@@ -681,16 +754,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
     AWS IoT Core
   </h3>
   <div
-    class="flexbox space-between relative emotion-0 emotion-1"
+    class="flexbox space-between padding-top-small relative emotion-0 emotion-1"
   >
     <div
-      class="flexbox column"
+      class="emotion-18"
     >
       <div
         class="MuiFormControl-root MuiTextField-root emotion-2"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-17"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-20"
           data-shrink="false"
           for=":r6:"
           id=":r6:-label"
@@ -698,29 +771,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
           Key ID
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
         >
           <textarea
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
             disabled=""
             id=":r6:"
             style="height: 0px; overflow: hidden;"
           />
           <textarea
             aria-hidden="true"
-            class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
             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"
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-7"
+          >
+            <legend
+              class="emotion-25"
+            >
+              <span>
+                Key ID
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
       <div
         class="MuiFormControl-root MuiTextField-root emotion-2"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-17"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-20"
           data-shrink="false"
           for=":r7:"
           id=":r7:-label"
@@ -728,29 +813,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
           Key Secret
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
         >
           <textarea
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
             disabled=""
             id=":r7:"
             style="height: 0px; overflow: hidden;"
           />
           <textarea
             aria-hidden="true"
-            class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
             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"
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-7"
+          >
+            <legend
+              class="emotion-25"
+            >
+              <span>
+                Key Secret
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
       <div
         class="MuiFormControl-root MuiTextField-root emotion-2"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-17"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-20"
           data-shrink="false"
           for=":r8:"
           id=":r8:-label"
@@ -758,29 +855,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
           Region
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
         >
           <textarea
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
             disabled=""
             id=":r8:"
             style="height: 0px; overflow: hidden;"
           />
           <textarea
             aria-hidden="true"
-            class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
             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"
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-7"
+          >
+            <legend
+              class="emotion-25"
+            >
+              <span>
+                Region
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
       <div
         class="MuiFormControl-root MuiTextField-root emotion-2"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-17"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-20"
           data-shrink="false"
           for=":r9:"
           id=":r9:-label"
@@ -788,30 +897,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
           Device Policy Name
         </label>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiInputBase-multiline emotion-4"
         >
           <textarea
             aria-invalid="false"
-            class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
             disabled=""
             id=":r9:"
             style="height: 0px; overflow: hidden;"
           />
           <textarea
             aria-hidden="true"
-            class="MuiInputBase-input MuiInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
+            class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled MuiInputBase-inputMultiline emotion-5"
             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"
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-7"
+          >
+            <legend
+              class="emotion-25"
+            >
+              <span>
+                Device Policy Name
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
     </div>
     <div
-      class="flexbox"
+      class="flexbox margin-bottom-x-small"
     >
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-7"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-9"
         id=":ra:"
         tabindex="0"
         type="button"
@@ -819,7 +940,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
         Edit
       </button>
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-8"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-10"
         id=":rb:"
         tabindex="0"
         type="button"
@@ -829,11 +950,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-p
     </div>
   </div>
   <p
-    class="emotion-9 icon flexbox center-aligned emotion-10 margin-bottom emotion-0"
+    class="emotion-11 icon flexbox center-aligned emotion-12 margin-bottom emotion-0"
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-12"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-14"
       data-testid="InfoOutlinedIcon"
       focusable="false"
       viewBox="0 0 24 24"
diff --git a/frontend/src/js/components/settings/__snapshots__/QuoteRequestForm.test.tsx.snap b/frontend/src/js/components/settings/__snapshots__/QuoteRequestForm.test.tsx.snap
index 3dbfe632..b2f6a428 100644
--- a/frontend/src/js/components/settings/__snapshots__/QuoteRequestForm.test.tsx.snap
+++ b/frontend/src/js/components/settings/__snapshots__/QuoteRequestForm.test.tsx.snap
@@ -15,7 +15,6 @@ exports[`QuoteRequestForm component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -30,6 +29,8 @@ exports[`QuoteRequestForm component renders correctly 1`] = `
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
 .emotion-1.Mui-disabled {
@@ -55,7 +56,6 @@ exports[`QuoteRequestForm component renders correctly 1`] = `
   border: 0;
   vertical-align: top;
   width: 100%;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -79,6 +79,8 @@ exports[`QuoteRequestForm component renders correctly 1`] = `
   padding: 4px 0 5px;
   width: 100%;
   position: relative;
+  border-radius: 4px;
+  padding: 16.5px 14px;
 }
 
 .emotion-3.Mui-disabled {
@@ -86,77 +88,30 @@ exports[`QuoteRequestForm component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-3 {
-  margin-top: 16px;
-}
-
-.emotion-3::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-3.Mui-error::before,
-.emotion-3.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-3::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-3:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-3:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-3:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-3.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-3::after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-3:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-3.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-3:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-3:after {
-  border-bottom: 2px solid #337a87;
+.emotion-3.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-4 {
@@ -181,6 +136,8 @@ label+.emotion-3 {
   resize: none;
   padding: 0;
   padding-top: 0;
+  padding: 16.5px 14px;
+  padding: 0;
 }
 
 .emotion-4::-webkit-input-placeholder {
@@ -252,7 +209,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-4:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-6 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-7 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -311,57 +300,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-6::-moz-focus-inner {
+.emotion-8::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-6.Mui-disabled {
+.emotion-8.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-6 {
+  .emotion-8 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-6.Mui-disabled {
+.emotion-8.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-6:hover {
+  .emotion-8:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-6:active {
+.emotion-8:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-6.Mui-focusVisible {
+.emotion-8.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-6.Mui-disabled {
+.emotion-8.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-6:hover {
+  .emotion-8:hover {
     --variant-containedBg: rgb(65, 10, 46);
     --variant-textBg: rgba(93, 15, 67, 0.04);
     --variant-outlinedBorder: #5d0f43;
@@ -369,15 +358,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
   }
 }
 
-.emotion-6.MuiButton-loading {
+.emotion-8.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   colors: #337a87;
 }
 
-.emotion-6.MuiButton-text {
+.emotion-8.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -404,7 +393,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
     style="margin-bottom: 30px; margin-top: 0px;"
   >
     <p
-      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-1"
+      class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-1"
     >
       Your message
     </p>
@@ -412,22 +401,37 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
       class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root emotion-2"
     >
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline emotion-3"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline emotion-3"
       >
         <textarea
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline emotion-4"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline emotion-4"
           id=":r0:"
           placeholder="If you have any notes about your requirements or device fleet size, leave a message and we'll respond as soon as we can"
           style="height: 0px; overflow: hidden;"
         />
         <textarea
           aria-hidden="true"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline emotion-4"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline emotion-4"
           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"
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-6"
+        >
+          <legend
+            class="emotion-7"
+          >
+            <span
+              aria-hidden="true"
+              class="notranslate"
+            >
+              ​
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
@@ -435,7 +439,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
     After we receive your request, we'll be in touch to discuss your needs and provide a quote.
   </p>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary margin-top margin-bottom emotion-6"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary margin-top margin-bottom emotion-8"
     disabled=""
     id=":r1:"
     style="align-self: flex-start;"
diff --git a/frontend/src/js/components/settings/__snapshots__/Settings.test.tsx.snap b/frontend/src/js/components/settings/__snapshots__/Settings.test.tsx.snap
index f6354791..393025d5 100644
--- a/frontend/src/js/components/settings/__snapshots__/Settings.test.tsx.snap
+++ b/frontend/src/js/components/settings/__snapshots__/Settings.test.tsx.snap
@@ -128,22 +128,17 @@ exports[`Settings Component renders correctly 1`] = `
 
 .emotion-26 {
   margin-bottom: -24px;
-  max-width: 600px;
 }
 
 .emotion-26 .copy-button {
-  margin-top: 24px;
+  margin-bottom: -8px;
 }
 
 .emotion-26 .MuiTextField-root {
   width: 400px;
 }
 
-.emotion-27.full-width {
-  max-width: 100%;
-}
-
-.emotion-28 {
+.emotion-27 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -159,7 +154,7 @@ exports[`Settings Component renders correctly 1`] = `
   vertical-align: top;
 }
 
-.emotion-29 {
+.emotion-28 {
   color: rgba(0, 0, 0, 0.6);
   font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 400;
@@ -208,19 +203,19 @@ exports[`Settings Component renders correctly 1`] = `
   transform: translate(14px, -9px) scale(0.75);
 }
 
-.emotion-29.Mui-focused {
+.emotion-28.Mui-focused {
   color: #1976d2;
 }
 
-.emotion-29.Mui-disabled {
+.emotion-28.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-29.Mui-error {
+.emotion-28.Mui-error {
   color: #d32f2f;
 }
 
-.emotion-30 {
+.emotion-29 {
   font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 400;
   font-size: 1rem;
@@ -242,38 +237,38 @@ exports[`Settings Component renders correctly 1`] = `
   border-radius: 4px;
 }
 
-.emotion-30.Mui-disabled {
+.emotion-29.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-.emotion-30:hover .MuiOutlinedInput-notchedOutline {
+.emotion-29:hover .MuiOutlinedInput-notchedOutline {
   border-color: rgba(0, 0, 0, 0.87);
 }
 
 @media (hover: none) {
-  .emotion-30:hover .MuiOutlinedInput-notchedOutline {
+  .emotion-29:hover .MuiOutlinedInput-notchedOutline {
     border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-30.Mui-focused .MuiOutlinedInput-notchedOutline {
+.emotion-29.Mui-focused .MuiOutlinedInput-notchedOutline {
   border-width: 2px;
 }
 
-.emotion-30.Mui-focused .MuiOutlinedInput-notchedOutline {
+.emotion-29.Mui-focused .MuiOutlinedInput-notchedOutline {
   border-color: #1976d2;
 }
 
-.emotion-30.Mui-error .MuiOutlinedInput-notchedOutline {
+.emotion-29.Mui-error .MuiOutlinedInput-notchedOutline {
   border-color: #d32f2f;
 }
 
-.emotion-30.Mui-disabled .MuiOutlinedInput-notchedOutline {
+.emotion-29.Mui-disabled .MuiOutlinedInput-notchedOutline {
   border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-31 {
+.emotion-30 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -294,80 +289,80 @@ exports[`Settings Component renders correctly 1`] = `
   padding: 16.5px 14px;
 }
 
-.emotion-31::-webkit-input-placeholder {
+.emotion-30::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-31::-moz-placeholder {
+.emotion-30::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-31::-ms-input-placeholder {
+.emotion-30::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-31:focus {
+.emotion-30:focus {
   outline: 0;
 }
 
-.emotion-31:invalid {
+.emotion-30:invalid {
   box-shadow: none;
 }
 
-.emotion-31::-webkit-search-decoration {
+.emotion-30::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-31::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-31::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-31::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-30:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-31.Mui-disabled {
+.emotion-30.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-31:-webkit-autofill {
+.emotion-30:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-31:-webkit-autofill {
+.emotion-30:-webkit-autofill {
   border-radius: inherit;
 }
 
-.emotion-32 {
+.emotion-31 {
   text-align: left;
   position: absolute;
   bottom: 0;
@@ -385,7 +380,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   border-color: rgba(0, 0, 0, 0.23);
 }
 
-.emotion-33 {
+.emotion-32 {
   float: unset;
   width: auto;
   overflow: hidden;
@@ -403,7 +398,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
 }
 
-.emotion-33>span {
+.emotion-32>span {
   padding-left: 5px;
   padding-right: 5px;
   display: inline-block;
@@ -411,7 +406,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   visibility: visible;
 }
 
-.emotion-34 {
+.emotion-33 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -468,33 +463,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-34::-moz-focus-inner {
+.emotion-33::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-34.Mui-disabled {
+.emotion-33.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-34 {
+  .emotion-33 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-34:hover {
+.emotion-33:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-34.Mui-disabled {
+.emotion-33.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-34:hover {
+  .emotion-33:hover {
     --variant-containedBg: #1565c0;
     --variant-textBg: rgba(25, 118, 210, 0.04);
     --variant-outlinedBorder: #1976d2;
@@ -502,25 +497,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   }
 }
 
-.emotion-34.MuiButton-loading {
+.emotion-33.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-35 {
+.emotion-34 {
   display: inherit;
   margin-right: 8px;
   margin-left: -4px;
 }
 
-.emotion-35>*:nth-of-type(1) {
+.emotion-34>*:nth-of-type(1) {
   font-size: 20px;
 }
 
-.emotion-37 {
+.emotion-36 {
   height: 15px;
 }
 
-.emotion-38 {
+.emotion-37 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -538,103 +533,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   max-width: 100%;
 }
 
-.emotion-44 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  position: relative;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  margin: 0;
-  border-radius: 0;
-  padding: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: inherit;
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.75;
-  letter-spacing: 0.02857em;
-  text-transform: uppercase;
-  min-width: 64px;
-  padding: 6px 16px;
-  border: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  padding: 6px 8px;
-  color: var(--variant-textColor);
-  background-color: var(--variant-textBg);
-  --variant-textColor: #1976d2;
-  --variant-outlinedColor: #1976d2;
-  --variant-outlinedBorder: rgba(25, 118, 210, 0.5);
-  --variant-containedColor: #fff;
-  --variant-containedBg: #1976d2;
-  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  margin: 30px 0 0 15px;
-}
-
-.emotion-44::-moz-focus-inner {
-  border-style: none;
-}
-
-.emotion-44.Mui-disabled {
-  pointer-events: none;
-  cursor: default;
-}
-
-@media print {
-  .emotion-44 {
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-}
-
-.emotion-44:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-44.Mui-disabled {
-  color: rgba(0, 0, 0, 0.26);
-}
-
-@media (hover: hover) {
-  .emotion-44:hover {
-    --variant-containedBg: #1565c0;
-    --variant-textBg: rgba(25, 118, 210, 0.04);
-    --variant-outlinedBorder: #1976d2;
-    --variant-outlinedBg: rgba(25, 118, 210, 0.04);
-  }
-}
-
-.emotion-44.MuiButton-loading {
-  color: transparent;
-}
-
-.emotion-52 {
+.emotion-51 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -653,13 +552,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
 }
 
 @media print {
-  .emotion-52 {
+  .emotion-51 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-53 {
+.emotion-52 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -703,79 +602,79 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-53::-moz-focus-inner {
+.emotion-52::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-53.Mui-disabled {
+.emotion-52.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-53 {
+  .emotion-52 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-53.Mui-checked {
+.emotion-52.Mui-checked {
   -webkit-transform: translateX(20px);
   -moz-transform: translateX(20px);
   -ms-transform: translateX(20px);
   transform: translateX(20px);
 }
 
-.emotion-53.Mui-disabled {
+.emotion-52.Mui-disabled {
   color: #f5f5f5;
 }
 
-.emotion-53.Mui-checked+.MuiSwitch-track {
+.emotion-52.Mui-checked+.MuiSwitch-track {
   opacity: 0.5;
 }
 
-.emotion-53.Mui-disabled+.MuiSwitch-track {
+.emotion-52.Mui-disabled+.MuiSwitch-track {
   opacity: 0.12;
 }
 
-.emotion-53 .MuiSwitch-input {
+.emotion-52 .MuiSwitch-input {
   left: -100%;
   width: 300%;
 }
 
-.emotion-53:hover {
+.emotion-52:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
 @media (hover: none) {
-  .emotion-53:hover {
+  .emotion-52:hover {
     background-color: transparent;
   }
 }
 
-.emotion-53.Mui-checked {
+.emotion-52.Mui-checked {
   color: #1976d2;
 }
 
-.emotion-53.Mui-checked:hover {
+.emotion-52.Mui-checked:hover {
   background-color: rgba(25, 118, 210, 0.04);
 }
 
 @media (hover: none) {
-  .emotion-53.Mui-checked:hover {
+  .emotion-52.Mui-checked:hover {
     background-color: transparent;
   }
 }
 
-.emotion-53.Mui-checked.Mui-disabled {
+.emotion-52.Mui-checked.Mui-disabled {
   color: rgb(167, 202, 237);
 }
 
-.emotion-53.Mui-checked+.MuiSwitch-track {
+.emotion-52.Mui-checked+.MuiSwitch-track {
   background-color: #1976d2;
 }
 
-.emotion-54 {
+.emotion-53 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -788,7 +687,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   z-index: 1;
 }
 
-.emotion-55 {
+.emotion-54 {
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
   background-color: currentColor;
   width: 20px;
@@ -796,7 +695,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   border-radius: 50%;
 }
 
-.emotion-56 {
+.emotion-55 {
   height: 100%;
   width: 100%;
   border-radius: 7px;
@@ -807,11 +706,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   opacity: 0.38;
 }
 
-.emotion-57 {
+.emotion-56 {
   max-width: 70%;
 }
 
-.emotion-58 {
+.emotion-57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -834,7 +733,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   padding-bottom: 8px;
 }
 
-.emotion-59 {
+.emotion-58 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -843,15 +742,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
   margin-bottom: 4px;
 }
 
-.MuiTypography-root:where(.emotion-59 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-58 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-59 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-58 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-60 {
+.emotion-59 {
   margin: 0;
   font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 400;
@@ -1008,13 +907,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
         My profile
       </h2>
       <div
-        class="flexbox space-between emotion-26 full-width emotion-27"
+        class="flexbox space-between emotion-26 margin-bottom-none"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-28"
+          class="MuiFormControl-root MuiTextField-root emotion-27"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-29"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-28"
             data-shrink="true"
             for=":r0:"
             id=":r0:-label"
@@ -1022,11 +921,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
             User ID
           </label>
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-30"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-29"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-31"
+              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-30"
               disabled=""
               id=":r0:"
               type="text"
@@ -1034,10 +933,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
             />
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline emotion-32"
+              class="MuiOutlinedInput-notchedOutline emotion-31"
             >
               <legend
-                class="emotion-33"
+                class="emotion-32"
               >
                 <span>
                   User ID
@@ -1051,13 +950,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
         >
           <div>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-34"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-33"
               id=":r1:"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-35"
+                class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-34"
               >
                 <svg
                   aria-hidden="true"
@@ -1074,7 +973,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
               Copy to clipboard
             </button>
             <p
-              class="emotion-37"
+              class="emotion-36"
             />
           </div>
         </div>
@@ -1083,10 +982,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
         class="flexbox space-between margin-bottom-small"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-38"
+          class="MuiFormControl-root MuiTextField-root emotion-37"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-29"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-28"
             data-shrink="true"
             for=":r2:"
             id=":r2:-label"
@@ -1094,11 +993,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
             Email
           </label>
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-30"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-29"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-31"
+              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-30"
               disabled=""
               id=":r2:"
               type="text"
@@ -1106,10 +1005,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
             />
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline emotion-32"
+              class="MuiOutlinedInput-notchedOutline emotion-31"
             >
               <legend
-                class="emotion-33"
+                class="emotion-32"
               >
                 <span>
                   Email
@@ -1119,7 +1018,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
           </div>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary inline-block emotion-44"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-33"
           id="change_email"
           tabindex="0"
           type="button"
@@ -1128,13 +1027,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
         </button>
       </div>
       <form
-        class="flexbox space-between"
+        class="flexbox space-between margin-top"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root emotion-38"
+          class="MuiFormControl-root MuiTextField-root emotion-37"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-29"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-28"
             data-shrink="true"
             for=":r4:"
             id=":r4:-label"
@@ -1142,11 +1041,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
             Password
           </label>
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-30"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-29"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-31"
+              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-30"
               disabled=""
               id=":r4:"
               type="password"
@@ -1154,10 +1053,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
             />
             <fieldset
               aria-hidden="true"
-              class="MuiOutlinedInput-notchedOutline emotion-32"
+              class="MuiOutlinedInput-notchedOutline emotion-31"
             >
               <legend
-                class="emotion-33"
+                class="emotion-32"
               >
                 <span>
                   Password
@@ -1167,7 +1066,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
           </div>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-44"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-33"
           id="change_password"
           tabindex="0"
           type="button"
@@ -1184,21 +1083,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
           Enable dark theme
         </p>
         <span
-          class="MuiSwitch-root MuiSwitch-sizeMedium emotion-52"
+          class="MuiSwitch-root MuiSwitch-sizeMedium emotion-51"
         >
           <span
-            class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary emotion-53"
+            class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary emotion-52"
           >
             <input
-              class="PrivateSwitchBase-input MuiSwitch-input emotion-54"
+              class="PrivateSwitchBase-input MuiSwitch-input emotion-53"
               type="checkbox"
             />
             <span
-              class="MuiSwitch-thumb emotion-55"
+              class="MuiSwitch-thumb emotion-54"
             />
           </span>
           <span
-            class="MuiSwitch-track emotion-56"
+            class="MuiSwitch-track emotion-55"
           />
         </span>
       </div>
@@ -1206,7 +1105,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
         class="flexbox space-between margin-top-large"
       >
         <div
-          class="emotion-57"
+          class="emotion-56"
         >
           <div
             class="help-content"
@@ -1217,13 +1116,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
             class=""
           >
             <div
-              class="MuiListItem-root attributes MuiListItem-padding emotion-58"
+              class="MuiListItem-root attributes MuiListItem-padding emotion-57"
             >
               <div
-                class="MuiListItemText-root emotion-59"
+                class="MuiListItemText-root emotion-58"
               >
                 <div
-                  class="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary emotion-60"
+                  class="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary emotion-59"
                   title="eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTNkMGY4Yy1hZWRlLTQwMzAtYjM5MS03ZDUwMjBlYjg3M2UiLCJzdWIiOiJhMzBhNzgwYi1iODQzLTUzNDQtODBlMy0wZmQ5NWE0ZjZmYzMiLCJleHAiOjE2MDY4MTUzNjksImlhdCI6MTYwNjIxMDU2OSwibWVuZGVyLnRlbmFudCI6IjVmODVjMTdiY2U2MmI3ZmE3ZjVmNzA0MCIsIm1lbmRlci51c2VyIjp0cnVlLCJpc3MiOiJNZW5kZXIgVXNlcnMiLCJzY3AiOiJtZW5kZXIuKiIsIm1lbmRlci5wbGFuIjoicHJvZmVzc2lvbmFsIiwibmJmIjoxNjA2MjEwNTY5fQ.qVgYdCzLTf8OdK9uUctqqaY_HWkIiwpekuGvuGQAXCEgOv4bRNDlZRN_ZRSbxQoARG3pquhScbQrjBV9tcF4irTUPlTn3yrsXNO17DpcbTVeKRkb88RDtIKiRw3orVZ_GlIb-ckTQ5dS-Nqlyyf3Fmrhca-gwt6m_xv2UrmJK6eYYTMfggdRRWb-4u7mEkBI_pHPMTQrT8kJ2BeX-vHgazH9AoH0k85LHtFZQXD7pXHlDZRnLxJXukncwMGDmF17374gavYAIyDIzcC8sEBMDnVXgpikeA1sauzirqix6mAVs6XmxdQO7aF0wfXO1_PTYUA3Nk1oQfMYNlEI3U9uLRJRZIq2L8fmrrBryhstKd4y0KlBbGAQrx8NtRkgajjd1ljMfPBUEZrb7uSerVjneiO-aIBO76CuH0zdklphIjpGJeogkBhe8pAYNggp1XsZHgpZfl7IE5faKaDkMGnutaea--Czor6bhqUNCuY4tR0cpQJbNwy6LS9o1CFy4Log"
                 >
                   <span
@@ -1242,13 +1141,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
         >
           <div>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-34"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-33"
               id=":r6:"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-35"
+                class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-34"
               >
                 <svg
                   aria-hidden="true"
@@ -1265,7 +1164,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
               Copy to clipboard
             </button>
             <p
-              class="emotion-37"
+              class="emotion-36"
             />
           </div>
         </div>
@@ -1279,7 +1178,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-31:focus::-ms-input-
           Personal access token management
         </p>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-34"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-33"
           id=":r7:"
           tabindex="0"
           type="button"
diff --git a/frontend/src/js/components/settings/dialogs/CancelRequest.tsx b/frontend/src/js/components/settings/dialogs/CancelRequest.tsx
index 364310cd..044e6793 100644
--- a/frontend/src/js/components/settings/dialogs/CancelRequest.tsx
+++ b/frontend/src/js/components/settings/dialogs/CancelRequest.tsx
@@ -13,7 +13,7 @@
 //    limitations under the License.
 import React, { useEffect, useState } from 'react';
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Input, Radio, RadioGroup } from '@mui/material';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, OutlinedInput, Radio, RadioGroup } from '@mui/material';
 
 const defaultCancelSubscriptionReasons = [
   'Just learning about Mender',
@@ -54,7 +54,7 @@ export const CancelRequestDialog = ({ onCancel, onSubmit }) => {
                 <FormControlLabel value={item} control={<Radio />} label={item} key={index} style={{ marginTop: '0px' }} />
               ))}
             </RadioGroup>
-            <Input
+            <OutlinedInput
               id="reason_other"
               name="reason_other"
               value={cancelSubscriptionReasonOther}
@@ -65,7 +65,7 @@ export const CancelRequestDialog = ({ onCancel, onSubmit }) => {
             />
           </FormControl>
           <p className="margin-top">Which key areas should we improve?</p>
-          <Input
+          <OutlinedInput
             id="suggestions"
             name="suggestions"
             className="margin-bottom"
diff --git a/frontend/src/js/components/settings/dialogs/__snapshots__/CancelRequest.test.tsx.snap b/frontend/src/js/components/settings/dialogs/__snapshots__/CancelRequest.test.tsx.snap
index 564eb9dc..5a033370 100644
--- a/frontend/src/js/components/settings/dialogs/__snapshots__/CancelRequest.test.tsx.snap
+++ b/frontend/src/js/components/settings/dialogs/__snapshots__/CancelRequest.test.tsx.snap
@@ -344,6 +344,7 @@ exports[`CancelRequestDialog Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-64.Mui-disabled {
@@ -351,65 +352,30 @@ exports[`CancelRequestDialog Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-64 {
-  margin-top: 16px;
+.emotion-64:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.87);
 }
 
-.emotion-64::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-64.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-64.Mui-error::before,
-.emotion-64.Mui-error::after {
-  border-bottom-color: #d32f2f;
-}
-
-.emotion-64::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
+@media (hover: none) {
+  .emotion-64:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
 }
 
-.emotion-64:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(0, 0, 0, 0.87);
+.emotion-64.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-@media (hover: none) {
-  .emotion-64:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  }
+.emotion-64.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #1976d2;
 }
 
-.emotion-64.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-64.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #d32f2f;
 }
 
-.emotion-64::after {
-  border-bottom: 2px solid #1976d2;
+.emotion-64.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-65 {
@@ -430,6 +396,7 @@ label+.emotion-64 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-65::-webkit-input-placeholder {
@@ -501,90 +468,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
   animation-name: mui-auto-fill;
 }
 
-.emotion-66 {
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.4375em;
-  letter-spacing: 0.00938em;
-  color: rgba(0, 0, 0, 0.87);
-  box-sizing: border-box;
-  position: relative;
-  cursor: text;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-}
-
-.emotion-66.Mui-disabled {
-  color: rgba(0, 0, 0, 0.38);
-  cursor: default;
+.emotion-65:-webkit-autofill {
+  border-radius: inherit;
 }
 
-.emotion-66::after {
-  left: 0;
-  bottom: 0;
-  content: "";
+.emotion-66 {
+  text-align: left;
   position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-66.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-66.Mui-error::before,
-.emotion-66.Mui-error::after {
-  border-bottom-color: #d32f2f;
-}
-
-.emotion-66::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
   bottom: 0;
-  content: "\\00a0";
-  position: absolute;
   right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
   pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-67 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
 }
 
-.emotion-66:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(0, 0, 0, 0.87);
-}
-
-@media (hover: none) {
-  .emotion-66:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  }
-}
-
-.emotion-66.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-66::after {
-  border-bottom: 2px solid #1976d2;
-}
-
-.emotion-68 {
+.emotion-72 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -603,11 +519,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
   flex: 0 0 auto;
 }
 
-.emotion-68>:not(style)~:not(style) {
+.emotion-72>:not(style)~:not(style) {
   margin-left: 8px;
 }
 
-.emotion-69 {
+.emotion-73 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -664,33 +580,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-69::-moz-focus-inner {
+.emotion-73::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-69.Mui-disabled {
+.emotion-73.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-69 {
+  .emotion-73 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-69:hover {
+.emotion-73:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-69.Mui-disabled {
+.emotion-73.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-69:hover {
+  .emotion-73:hover {
     --variant-containedBg: #1565c0;
     --variant-textBg: rgba(25, 118, 210, 0.04);
     --variant-outlinedBorder: #1976d2;
@@ -698,11 +614,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
   }
 }
 
-.emotion-69.MuiButton-loading {
+.emotion-73.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-70 {
+.emotion-74 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -759,57 +675,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-70::-moz-focus-inner {
+.emotion-74::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-70.Mui-disabled {
+.emotion-74.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-70 {
+  .emotion-74 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-70:hover {
+.emotion-74:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-70.Mui-disabled {
+.emotion-74.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-70:hover {
+.emotion-74:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-70:hover {
+  .emotion-74:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-70:active {
+.emotion-74:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-70.Mui-focusVisible {
+.emotion-74.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-70.Mui-disabled {
+.emotion-74.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-70:hover {
+  .emotion-74:hover {
     --variant-containedBg: #7b1fa2;
     --variant-textBg: rgba(156, 39, 176, 0.04);
     --variant-outlinedBorder: #9c27b0;
@@ -817,7 +733,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
   }
 }
 
-.emotion-70.MuiButton-loading {
+.emotion-74.MuiButton-loading {
   color: transparent;
 }
 
@@ -1242,12 +1158,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
             </label>
           </div>
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-64"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-64"
             style="margin-left: 30px;"
           >
             <input
               aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input Mui-disabled emotion-65"
+              class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-65"
               disabled=""
               id="reason_other"
               name="reason_other"
@@ -1255,6 +1171,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
               type="text"
               value=""
             />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-66"
+            >
+              <legend
+                class="emotion-67"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </fieldset>
         <p
@@ -1263,24 +1194,39 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
           Which key areas should we improve?
         </p>
         <div
-          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary margin-bottom emotion-66"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary margin-bottom emotion-64"
           style="width: 100%;"
         >
           <input
-            class="MuiInputBase-input MuiInput-input emotion-65"
+            class="MuiInputBase-input MuiOutlinedInput-input emotion-65"
             id="suggestions"
             name="suggestions"
             placeholder="Fill in suggestions"
             type="text"
             value=""
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-66"
+          >
+            <legend
+              class="emotion-67"
+            >
+              <span
+                aria-hidden="true"
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
       <div
-        class="MuiDialogActions-root MuiDialogActions-spacing emotion-68"
+        class="MuiDialogActions-root MuiDialogActions-spacing emotion-72"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-69"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-73"
           id=":r2:"
           tabindex="0"
           type="button"
@@ -1291,7 +1237,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-65:focus::-ms-input-
           style="flex-grow: 1;"
         />
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-70"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-74"
           disabled=""
           id=":r3:"
           tabindex="-1"
diff --git a/frontend/src/js/components/settings/organization/Organization.tsx b/frontend/src/js/components/settings/organization/Organization.tsx
index 6bbca70c..41514133 100644
--- a/frontend/src/js/components/settings/organization/Organization.tsx
+++ b/frontend/src/js/components/settings/organization/Organization.tsx
@@ -82,9 +82,15 @@ export const Organization = () => {
   useEffect(() => {
     dispatch(getUserBilling());
     dispatch(getUserOrganization());
-    dispatch(getSsoConfigs());
   }, [dispatch]);
 
+  useEffect(() => {
+    if (!isEnterprise) {
+      return;
+    }
+    dispatch(getSsoConfigs());
+  }, [dispatch, isEnterprise]);
+
   useEffect(() => {
     setHasSingleSignOn(!!ssoConfig);
     setIsConfiguringSSO(!!ssoConfig);
diff --git a/frontend/src/js/components/settings/organization/OrganizationPaymentSettings.tsx b/frontend/src/js/components/settings/organization/OrganizationPaymentSettings.tsx
index 5dfb884d..5b104b5e 100644
--- a/frontend/src/js/components/settings/organization/OrganizationPaymentSettings.tsx
+++ b/frontend/src/js/components/settings/organization/OrganizationPaymentSettings.tsx
@@ -24,13 +24,14 @@ import CardSection from '../CardSection';
 import { CardDetails } from './Billing';
 
 interface OrganizationPaymentSettingsProps {
+  className: string;
   onComplete?: () => void;
   isValid: boolean;
   updatingCard: boolean;
   setUpdatingCard: (updatingCard: boolean) => void;
 }
 export const OrganizationPaymentSettings = (props: OrganizationPaymentSettingsProps) => {
-  const { onComplete, isValid, updatingCard, setUpdatingCard } = props;
+  const { className, onComplete, isValid, updatingCard, setUpdatingCard } = props;
   const card = useSelector(getCard);
   const organization = useSelector(getOrganization);
   const dispatch = useAppDispatch();
@@ -45,29 +46,24 @@ export const OrganizationPaymentSettings = (props: OrganizationPaymentSettingsPr
   };
 
   return (
-    <div className="flexbox margin-top">
-      <div className="margin-top" />
-      <div className="flexbox column">
-        <div className="flexbox">
-          <h5 className="margin-top-small margin-bottom-x-small margin-right-x-small">{updatingCard ? 'Edit payment card' : 'Payment card'}</h5>
-          <Button className="align-self-start" onClick={() => setUpdatingCard(!updatingCard)}>
-            {updatingCard ? 'cancel' : 'edit'}
-          </Button>
-        </div>
-        {updatingCard ? (
-          <CardSection
-            isSignUp={false}
-            organization={organization}
-            onClose={() => setUpdatingCard(false)}
-            onCardConfirmed={onCardConfirm}
-            isValid={isValid}
-            onSubmit={() => dispatch(startCardUpdate()).unwrap()}
-            beforeCardSubmit={() => dispatch(startCardUpdate()).unwrap()}
-          />
-        ) : (
-          <CardDetails card={card} />
-        )}
+    <div className={className}>
+      <div className="flexbox center-aligned margin-top">
+        <h5 className="margin-top-none margin-bottom-none margin-right-small">{updatingCard ? 'Edit payment card' : 'Payment card'}</h5>
+        <Button onClick={() => setUpdatingCard(!updatingCard)}>{updatingCard ? 'cancel' : 'edit'}</Button>
       </div>
+      {updatingCard ? (
+        <CardSection
+          isSignUp={false}
+          organization={organization}
+          onClose={() => setUpdatingCard(false)}
+          onCardConfirmed={onCardConfirm}
+          isValid={isValid}
+          onSubmit={() => dispatch(startCardUpdate()).unwrap()}
+          beforeCardSubmit={() => dispatch(startCardUpdate()).unwrap()}
+        />
+      ) : (
+        <CardDetails card={card} />
+      )}
     </div>
   );
 };
diff --git a/frontend/src/js/components/settings/organization/__snapshots__/OrganizationPaymentSettings.test.tsx.snap b/frontend/src/js/components/settings/organization/__snapshots__/OrganizationPaymentSettings.test.tsx.snap
index ff801a65..3a243806 100644
--- a/frontend/src/js/components/settings/organization/__snapshots__/OrganizationPaymentSettings.test.tsx.snap
+++ b/frontend/src/js/components/settings/organization/__snapshots__/OrganizationPaymentSettings.test.tsx.snap
@@ -107,45 +107,36 @@ exports[`OrganizationPaymentSettings Component renders correctly 1`] = `
   color: rgba(10, 10, 11, 0.78);
 }
 
-<div
-  class="flexbox margin-top"
->
+<div>
   <div
-    class="margin-top"
-  />
-  <div
-    class="flexbox column"
+    class="flexbox center-aligned margin-top"
   >
-    <div
-      class="flexbox"
+    <h5
+      class="margin-top-none margin-bottom-none margin-right-small"
     >
-      <h5
-        class="margin-top-small margin-bottom-x-small margin-right-x-small"
-      >
-        Payment card
-      </h5>
-      <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary align-self-start emotion-0"
-        id=":r0:"
-        tabindex="0"
-        type="button"
-      >
-        edit
-      </button>
-    </div>
-    <div
-      class=""
+      Payment card
+    </h5>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-0"
+      id=":r0:"
+      tabindex="0"
+      type="button"
     >
-      <div>
-        Payment card ending: **** 
-        1234
-      </div>
-      <div>
-        Expires 
-        08
-        /
-        30
-      </div>
+      edit
+    </button>
+  </div>
+  <div
+    class=""
+  >
+    <div>
+      Payment card ending: **** 
+      1234
+    </div>
+    <div>
+      Expires 
+      08
+      /
+      30
     </div>
   </div>
 </div>
diff --git a/frontend/src/js/components/settings/role-management/PermissionsItems.tsx b/frontend/src/js/components/settings/role-management/PermissionsItems.tsx
index 635838c3..7cbc8989 100644
--- a/frontend/src/js/components/settings/role-management/PermissionsItems.tsx
+++ b/frontend/src/js/components/settings/role-management/PermissionsItems.tsx
@@ -16,6 +16,7 @@ import { Controller, FieldValues, UseFormSetValue, useFieldArray, useFormContext
 
 import { InfoOutlined as InfoOutlinedIcon, WarningAmber as WarningIcon } from '@mui/icons-material';
 import { FormControl, InputLabel, MenuItem, Select, TextField, Tooltip } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
 import { PermissionsArea, UiPermission, uiPermissionsByArea } from '@northern.tech/store/constants';
 
@@ -39,7 +40,7 @@ export type ItemScope = {
 export const emptyItemSelection: ItemSelectionType = { item: '', uiPermissions: [], disableEdit: false, notFound: false };
 
 const PermissionsAreaTitle: FunctionComponent<{ className?: string; explanation: string; title: string }> = ({ className = '', explanation, title }) => (
-  <div className={`flexbox center-aligned margin-top ${className}`}>
+  <div className={`flexbox center-aligned ${className}`}>
     {title}
     <Tooltip arrow placement="bottom" title={explanation}>
       <InfoOutlinedIcon className="margin-left-small muted" fontSize="small" />
@@ -51,10 +52,12 @@ interface IPermissionsItem extends PermissionsSelectionBaseProps {
   area: PermissionsArea;
 }
 
+const formWidth = 500;
+
 export const PermissionsItem: FunctionComponent<IPermissionsItem> = ({ area, disabled }) => (
-  <div className="two-columns center-aligned margin-left-small" style={{ maxWidth: 500 }}>
+  <div className="two-columns center-aligned margin-left-small" style={{ maxWidth: formWidth }}>
     <PermissionsAreaTitle title={area.title} explanation={area.explanation} />
-    <PermissionsSelect disabled={disabled} options={area.uiPermissions} permissionsArea={area} />
+    <PermissionsSelect disabled={disabled} options={area.uiPermissions} permissionsArea={area} unscoped />
   </div>
 );
 
@@ -86,17 +89,23 @@ interface IScopedPermissionSelect extends PermissionsSelectionBaseProps {
 const ScopeSelect: FunctionComponent<IScopedPermissionSelect> = ({ disabled, permissionsArea, index, options, itemSelection, name = '', onChange }) => {
   const { control } = useFormContext();
   const { key, placeholder } = permissionsArea;
+  const label = !itemSelection.item ? placeholder : '';
   return disabled ? (
-    // empty label as a shortcut to align the layout with the select path
-    <TextField disabled defaultValue={itemSelection.item} label=" " />
+    <TextField disabled defaultValue={itemSelection.item} />
   ) : (
     <FormControl>
-      <InputLabel id={`${key}-scope-selection-select-label`}>{!itemSelection.item ? placeholder : ''}</InputLabel>
+      <InputLabel id={`${key}-scope-selection-select-label`}>{label}</InputLabel>
       <Controller
         name={name || `${key}.${index}.item`}
         control={control}
         render={({ field }) => (
-          <Select labelId={`${key}-scope-selection-select-label`} disabled={disabled} {...field} onChange={({ target: { value } }) => onChange(value)}>
+          <Select
+            disabled={disabled}
+            label={label}
+            labelId={`${key}-scope-selection-select-label`}
+            {...field}
+            onChange={({ target: { value } }) => onChange(value)}
+          >
             {options.map(option => (
               <MenuItem disabled={option.notFound} key={option.title} value={option.title}>
                 <div title={option.notFound ? 'This item was removed' : ''} className="flexbox center-aligned">
@@ -112,6 +121,14 @@ const ScopeSelect: FunctionComponent<IScopedPermissionSelect> = ({ disabled, per
   );
 };
 
+const useStyles = makeStyles()(theme => ({
+  scopedPermissionItem: {
+    display: 'grid',
+    gridTemplateColumns: 'minmax(500px, max-content) 1fr',
+    gap: theme.spacing(4)
+  }
+}));
+
 const ScopedPermissionsItem: FunctionComponent<Omit<IScopedPermissionSelect, 'name'>> = ({
   permissionsArea,
   disabled: disableEdit,
@@ -124,11 +141,12 @@ const ScopedPermissionsItem: FunctionComponent<Omit<IScopedPermissionSelect, 'na
   const { selector: excessiveAccessSelector, warning: excessiveAccessWarning } = excessiveAccessConfig;
   const { uiPermissions } = uiPermissionsByArea[key];
   const { item } = itemSelection;
+  const { classes } = useStyles();
 
   const disabled = disableEdit || itemSelection.disableEdit;
   return (
-    <div className="flexbox center-aligned margin-left">
-      <div className="two-columns center-aligned" style={{ maxWidth: 500 }}>
+    <div className={`margin-left-small ${classes.scopedPermissionItem}`}>
+      <div className="two-columns center-aligned" style={{ maxWidth: formWidth }}>
         <ScopeSelect
           disabled={disabled}
           permissionsArea={permissionsArea}
@@ -148,11 +166,7 @@ const ScopedPermissionsItem: FunctionComponent<Omit<IScopedPermissionSelect, 'na
           unscoped={item === excessiveAccessSelector}
         />
       </div>
-      {item === excessiveAccessSelector && (
-        <div className="margin-left text-muted" style={{ alignSelf: 'flex-end' }}>
-          {excessiveAccessWarning}
-        </div>
-      )}
+      {item === excessiveAccessSelector && <div className="text-muted">{excessiveAccessWarning}</div>}
     </div>
   );
 };
@@ -185,7 +199,7 @@ export const ItemSelection: FunctionComponent<IItemSelection> = ({ disabled, opt
 
   return (
     <>
-      <PermissionsAreaTitle className="margin-left-small" explanation={explanation} title={title} />
+      <PermissionsAreaTitle className="margin-left-small margin-top-small" explanation={explanation} title={title} />
       {controlledFields.map((field, index) => (
         <ScopedPermissionsItem
           key={field.id}
diff --git a/frontend/src/js/components/settings/role-management/PermissionsSelect.tsx b/frontend/src/js/components/settings/role-management/PermissionsSelect.tsx
index 9cdbb47e..eef54e51 100644
--- a/frontend/src/js/components/settings/role-management/PermissionsSelect.tsx
+++ b/frontend/src/js/components/settings/role-management/PermissionsSelect.tsx
@@ -113,14 +113,16 @@ export const PermissionsSelect: FunctionComponent<IPermissionsSelect> = ({
     [options, permissionsArea, unscoped, selectedUiPermissions]
   );
 
+  const labelValue = label && !selectedUiPermissions.length ? label : '';
   return (
     <FormControl>
-      <InputLabel id="permission-selection-label">{label && !selectedUiPermissions.length ? label : ''}</InputLabel>
+      <InputLabel id="permission-selection-label">{labelValue}</InputLabel>
       <Controller
         name={name || permissionsArea.key}
         control={control}
         render={({ field }) => (
           <Select
+            label={labelValue}
             labelId="permission-selection-label"
             disabled={disabled}
             displayEmpty={!label}
diff --git a/frontend/src/js/components/settings/role-management/RoleDefinition.tsx b/frontend/src/js/components/settings/role-management/RoleDefinition.tsx
index c58d7929..d0cddb4f 100644
--- a/frontend/src/js/components/settings/role-management/RoleDefinition.tsx
+++ b/frontend/src/js/components/settings/role-management/RoleDefinition.tsx
@@ -44,6 +44,7 @@ import { PermissionsSelectionBaseProps } from './PermissionsSelect';
 const useStyles = makeStyles()(theme => ({
   buttons: { '&.flexbox.centered': { justifyContent: 'flex-end' } },
   roleDeletion: { marginRight: theme.spacing(2) },
+  formWrapper: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), paddingTop: theme.spacing(4) },
   permissionSelect: { marginLeft: theme.spacing(-1.5) },
   permissionsTitle: { marginBottom: theme.spacing(-1), minHeight: theme.spacing(3) }
 }));
@@ -214,10 +215,16 @@ export const FormContent: FunctionComponent<RoleDefinitionFormProps> = ({
 
   return (
     <>
-      <div className="flexbox column" style={{ width: 500 }}>
-        <TextInput label="Name" id="name" value={name} disabled={disableEdit || editing} validations="isAlphanumericLocator" required />
-        <TextInput disabled={disableEdit} label="Description" id="description" InputProps={{ multiline: true }} hint="-" />
-      </div>
+      <TextInput
+        className="margin-top-none"
+        disabled={disableEdit || editing}
+        id="name"
+        label="Name"
+        required
+        validations="isAlphanumericLocator"
+        value={name}
+      />
+      <TextInput className="margin-top-none" disabled={disableEdit} label="Description" id="description" InputProps={{ multiline: true }} hint="-" />
       <InputLabel className={`margin-top ${classes.permissionsTitle}`} shrink>
         Permissions
       </InputLabel>
@@ -226,7 +233,7 @@ export const FormContent: FunctionComponent<RoleDefinitionFormProps> = ({
       ) : (
         <DefaultPermissionSelection disabled={disableEdit} groups={stateGroups} releases={stateReleases} setValue={setValue} />
       )}
-      <Divider className="margin-top-large" light />
+      <Divider className="margin-top-large" />
       <div className={`flexbox centered margin-top ${classes.buttons}`}>
         <Button className="margin-right" onClick={onCancel}>
           Cancel
@@ -348,7 +355,14 @@ export const RoleDefinition: FunctionComponent<RoleDefinitionProps> = ({
         }
       />
       <Divider />
-      <Form onSubmit={onSubmitClick} showButtons={false} autocomplete="off" defaultValues={defaultValues} initialValues={values}>
+      <Form
+        className={classes.formWrapper}
+        onSubmit={onSubmitClick}
+        showButtons={false}
+        autocomplete="off"
+        defaultValues={defaultValues}
+        initialValues={values}
+      >
         <FormContent
           editing={editing}
           groups={groups}
diff --git a/frontend/src/js/components/settings/role-management/__snapshots__/RoleDefinition.test.tsx.snap b/frontend/src/js/components/settings/role-management/__snapshots__/RoleDefinition.test.tsx.snap
index 67e63431..0f78e1bf 100644
--- a/frontend/src/js/components/settings/role-management/__snapshots__/RoleDefinition.test.tsx.snap
+++ b/frontend/src/js/components/settings/role-management/__snapshots__/RoleDefinition.test.tsx.snap
@@ -195,6 +195,18 @@ exports[`Roles Component renders correctly 1`] = `
 }
 
 .emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 16px;
+  padding-top: 32px;
+}
+
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -208,11 +220,10 @@ exports[`Roles Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -236,25 +247,32 @@ exports[`Roles Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
-.emotion-8.Mui-focused {
+.emotion-9.Mui-focused {
   color: #337a87;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-8.Mui-error {
+.emotion-9.Mui-error {
   color: #ab1000;
 }
 
-.emotion-8.Mui-focused {
+.emotion-9.Mui-focused {
   color: #337a87;
 }
 
-.emotion-9 {
+.emotion-10 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -272,87 +290,41 @@ exports[`Roles Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-10.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-9 {
-  margin-top: 16px;
-}
-
-.emotion-9::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-9.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-9.Mui-error::before,
-.emotion-9.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-9::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-9:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-10:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-9:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-10:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-9.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-9::after {
-  border-bottom: 2px solid #337a87;
+.emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-9:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-10.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-9:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-10.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-9:after {
-  border-bottom: 2px solid #337a87;
-}
-
-.emotion-10 {
+.emotion-11 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -370,78 +342,124 @@ label+.emotion-9 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-10::-webkit-input-placeholder {
+.emotion-11::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10::-moz-placeholder {
+.emotion-11::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10::-ms-input-placeholder {
+.emotion-11::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10:focus {
+.emotion-11:focus {
   outline: 0;
 }
 
-.emotion-10:invalid {
+.emotion-11:invalid {
   box-shadow: none;
 }
 
-.emotion-10::-webkit-search-decoration {
+.emotion-11::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-10.Mui-disabled {
+.emotion-11.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-10:-webkit-autofill {
+.emotion-11:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-11 {
+.emotion-11:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-12 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-13 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-13>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-14 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -452,17 +470,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-11.Mui-disabled {
+.emotion-14.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-11.Mui-error {
+.emotion-14.Mui-error {
   color: #ab1000;
 }
 
-.emotion-14 {
+.emotion-17 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -481,87 +501,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   align-items: center;
   padding: 4px 0 5px;
   position: relative;
+  border-radius: 4px;
+  padding: 16.5px 14px;
 }
 
-.emotion-14.Mui-disabled {
+.emotion-17.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-14 {
-  margin-top: 16px;
-}
-
-.emotion-14::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-14.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-14.Mui-error::before,
-.emotion-14.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-14::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-14:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-17:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-14:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-17:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-14.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-17.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-14::after {
-  border-bottom: 2px solid #337a87;
+.emotion-17.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-14:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-17.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-14:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-17.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-14:after {
-  border-bottom: 2px solid #337a87;
-}
-
-.emotion-15 {
+.emotion-18 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -583,78 +558,84 @@ label+.emotion-14 {
   resize: none;
   padding: 0;
   padding-top: 0;
+  padding: 16.5px 14px;
+  padding: 0;
 }
 
-.emotion-15::-webkit-input-placeholder {
+.emotion-18::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-15::-moz-placeholder {
+.emotion-18::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-15::-ms-input-placeholder {
+.emotion-18::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-15:focus {
+.emotion-18:focus {
   outline: 0;
 }
 
-.emotion-15:invalid {
+.emotion-18:invalid {
   box-shadow: none;
 }
 
-.emotion-15::-webkit-search-decoration {
+.emotion-18::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-18::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-18::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-18::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-18:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-18:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-18:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-15.Mui-disabled {
+.emotion-18.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-15:-webkit-autofill {
+.emotion-18:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-18 {
+.emotion-18:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-23 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -681,23 +662,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   min-height: 24px;
 }
 
-.emotion-18.Mui-focused {
+.emotion-23.Mui-focused {
   color: #337a87;
 }
 
-.emotion-18.Mui-disabled {
+.emotion-23.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-18.Mui-error {
+.emotion-23.Mui-error {
   color: #ab1000;
 }
 
-.emotion-18.Mui-focused {
+.emotion-23.Mui-focused {
   color: #337a87;
 }
 
-.emotion-19 {
+.emotion-24 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -714,11 +695,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   font-size: 1.1607rem;
 }
 
-.emotion-19 iconButton {
+.emotion-24 iconButton {
   margin-right: 8px;
 }
 
-.emotion-22 {
+.emotion-27 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -737,87 +718,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-15:focus::-ms-input-
   align-items: center;
   width: 100%;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-22.Mui-disabled {
+.emotion-27.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-22 {
-  margin-top: 16px;
-}
-
-.emotion-22::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-22.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-22.Mui-error::before,
-.emotion-22.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-22::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-22:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-27:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-22:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-27:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-22.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-22::after {
-  border-bottom: 2px solid #337a87;
+.emotion-27.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-22:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-27.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-22:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-27.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-22:after {
-  border-bottom: 2px solid #337a87;
+.emotion-27.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-23 {
+.emotion-28 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -826,6 +761,7 @@ label+.emotion-22 {
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -843,31 +779,35 @@ label+.emotion-22 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-23:focus {
+.emotion-28:focus {
   border-radius: 0;
 }
 
-.emotion-23.Mui-disabled {
+.emotion-28.Mui-disabled {
   cursor: default;
 }
 
-.emotion-23[multiple] {
+.emotion-28[multiple] {
   height: auto;
 }
 
-.emotion-23:not([multiple]) option,
-.emotion-23:not([multiple]) optgroup {
+.emotion-28:not([multiple]) option,
+.emotion-28:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-23.emotion-23.emotion-23 {
-  padding-right: 24px;
-  min-width: 16px;
+.emotion-28:focus {
+  border-radius: 4px;
+}
+
+.emotion-28.emotion-28.emotion-28 {
+  padding-right: 32px;
 }
 
-.emotion-23.MuiSelect-select {
+.emotion-28.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -875,76 +815,80 @@ label+.emotion-22 {
   overflow: hidden;
 }
 
-.emotion-23::-webkit-input-placeholder {
+.emotion-28::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-23::-moz-placeholder {
+.emotion-28::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-23::-ms-input-placeholder {
+.emotion-28::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-23:focus {
+.emotion-28:focus {
   outline: 0;
 }
 
-.emotion-23:invalid {
+.emotion-28:invalid {
   box-shadow: none;
 }
 
-.emotion-23::-webkit-search-decoration {
+.emotion-28::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-23.Mui-disabled {
+.emotion-28.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-23:-webkit-autofill {
+.emotion-28:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-24 {
+.emotion-28:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-29 {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -954,7 +898,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   box-sizing: border-box;
 }
 
-.emotion-25 {
+.emotion-30 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -974,17 +918,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
-.emotion-25 iconButton {
+.emotion-30 iconButton {
   margin-right: 8px;
 }
 
-.emotion-25.Mui-disabled {
+.emotion-30.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-36 {
+.emotion-32 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  padding: 0;
+  line-height: 11px;
+  -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.emotion-43 {
+  display: grid;
+  grid-template-columns: minmax(500px, max-content) 1fr;
+  gap: 32px;
+}
+
+.emotion-46 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -1002,106 +963,48 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-23:focus::-ms-input-
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-36.Mui-disabled {
+.emotion-46.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-36 {
-  margin-top: 16px;
-}
-
-.emotion-36::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-36.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-36.Mui-error::before,
-.emotion-36.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-36::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-36:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-46:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-36:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-46:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-36.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-46.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-36::after {
-  border-bottom: 2px solid #337a87;
+.emotion-46.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-36:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-46.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-36:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-46.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-36:after {
-  border-bottom: 2px solid #337a87;
-}
-
-.emotion-59 {
-  margin: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  border-width: 0;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-bottom-width: thin;
-  border-color: rgba(0, 0, 0, 0.08);
-}
-
-.emotion-60.flexbox.centered {
+.emotion-79.flexbox.centered {
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
 }
 
-.emotion-61 {
+.emotion-80 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1161,33 +1064,33 @@ label+.emotion-36 {
   padding: 10px 15px;
 }
 
-.emotion-61::-moz-focus-inner {
+.emotion-80::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-61.Mui-disabled {
+.emotion-80.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-61 {
+  .emotion-80 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-61:hover {
+.emotion-80:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-61.Mui-disabled {
+.emotion-80.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-61:hover {
+  .emotion-80:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -1195,19 +1098,19 @@ label+.emotion-36 {
   }
 }
 
-.emotion-61.MuiButton-loading {
+.emotion-80.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-61:hover {
+.emotion-80:hover {
   colors: #337a87;
 }
 
-.emotion-61.MuiButton-text {
+.emotion-80.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-62 {
+.emotion-81 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1266,57 +1169,57 @@ label+.emotion-36 {
   font-weight: bold;
 }
 
-.emotion-62::-moz-focus-inner {
+.emotion-81::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-62.Mui-disabled {
+.emotion-81.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-62 {
+  .emotion-81 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-62:hover {
+.emotion-81:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-62.Mui-disabled {
+.emotion-81.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-62:hover {
+.emotion-81:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-62:hover {
+  .emotion-81:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-62:active {
+.emotion-81:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-62.Mui-focusVisible {
+.emotion-81.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-62.Mui-disabled {
+.emotion-81.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-62:hover {
+  .emotion-81:hover {
     --variant-containedBg: rgb(65, 10, 46);
     --variant-textBg: rgba(93, 15, 67, 0.04);
     --variant-outlinedBorder: #5d0f43;
@@ -1324,15 +1227,15 @@ label+.emotion-36 {
   }
 }
 
-.emotion-62.MuiButton-loading {
+.emotion-81.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-62:hover {
+.emotion-81:hover {
   colors: #337a87;
 }
 
-.emotion-62.MuiButton-text {
+.emotion-81.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -1398,79 +1301,96 @@ label+.emotion-36 {
     />
     <form
       autocomplete="off"
-      class=""
+      class="emotion-7"
       novalidate=""
     >
       <div
-        class="flexbox column"
-        style="width: 500px;"
+        class="MuiFormControl-root margin-top-none required emotion-8"
+        style="width: 400px;"
       >
+        <label
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
+          data-shrink="false"
+          for="name"
+        >
+          Name
+        </label>
         <div
-          class="MuiFormControl-root required emotion-7"
-          style="width: 400px;"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-10"
         >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
-            data-shrink="false"
-            for="name"
-          >
-            Name
-          </label>
-          <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-9"
-            required=""
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input emotion-10"
-              id="name"
-              name="name"
-              required=""
-              type="text"
-              value=""
-            />
-          </div>
-          <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-11"
+          <input
+            aria-invalid="false"
+            class="MuiInputBase-input MuiOutlinedInput-input emotion-11"
+            id="name"
+            name="name"
+            type="text"
+            value=""
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-12"
+          >
+            <legend
+              class="emotion-13"
+            >
+              <span>
+                Name
+              </span>
+            </legend>
+          </fieldset>
         </div>
+        <p
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-14"
+        />
+      </div>
+      <div
+        class="MuiFormControl-root margin-top-none emotion-8"
+        style="width: 400px;"
+      >
+        <label
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
+          data-shrink="false"
+          for="description"
+        >
+          Description
+        </label>
         <div
-          class="MuiFormControl-root emotion-7"
-          style="width: 400px;"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-multiline emotion-17"
         >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
-            data-shrink="false"
-            for="description"
-          >
-            Description
-          </label>
-          <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-multiline emotion-14"
-          >
-            <textarea
-              aria-invalid="false"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline emotion-15"
-              id="description"
-              name="description"
-              placeholder="-"
-              style="height: 0px; overflow: hidden;"
-            />
-            <textarea
-              aria-hidden="true"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline emotion-15"
-              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"
-            />
-          </div>
-          <p
-            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-11"
+          <textarea
+            aria-invalid="false"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline emotion-18"
+            id="description"
+            name="description"
+            placeholder="-"
+            style="height: 0px; overflow: hidden;"
+          />
+          <textarea
+            aria-hidden="true"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline emotion-18"
+            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"
           />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline emotion-12"
+          >
+            <legend
+              class="emotion-13"
+            >
+              <span>
+                Description
+              </span>
+            </legend>
+          </fieldset>
         </div>
+        <p
+          class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-14"
+        />
       </div>
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink margin-top emotion-18"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink margin-top emotion-23"
         data-shrink="true"
       >
         Permissions
@@ -1480,13 +1400,13 @@ label+.emotion-36 {
         style="max-width: 500px;"
       >
         <div
-          class="flexbox center-aligned margin-top "
+          class="flexbox center-aligned "
         >
           User Management
           <svg
             aria-hidden="true"
             aria-label="User management permissions should be granted carefully, as these allow privilege increases for any users managed by a user with user management permissions"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small muted emotion-19"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small muted emotion-24"
             data-mui-internal-clone-element="true"
             data-testid="InfoOutlinedIcon"
             focusable="false"
@@ -1498,21 +1418,21 @@ label+.emotion-36 {
           </svg>
         </div>
         <div
-          class="MuiFormControl-root emotion-7"
+          class="MuiFormControl-root emotion-8"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
             data-shrink="false"
             id="permission-selection-label"
           />
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiSelect-root emotion-22"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiSelect-root emotion-27"
           >
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
               aria-labelledby="permission-selection-label mui-component-select-userManagement"
-              class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input emotion-23"
+              class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input emotion-28"
               id="mui-component-select-userManagement"
               role="combobox"
               tabindex="0"
@@ -1522,14 +1442,14 @@ label+.emotion-36 {
             <input
               aria-hidden="true"
               aria-invalid="false"
-              class="MuiSelect-nativeInput emotion-24"
+              class="MuiSelect-nativeInput emotion-29"
               name="userManagement"
               tabindex="-1"
               value=""
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-25"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-30"
               data-testid="ArrowDropDownIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1538,6 +1458,21 @@ label+.emotion-36 {
                 d="M7 10l5 5 5-5z"
               />
             </svg>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-12"
+            >
+              <legend
+                class="emotion-32"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
@@ -1546,13 +1481,13 @@ label+.emotion-36 {
         style="max-width: 500px;"
       >
         <div
-          class="flexbox center-aligned margin-top "
+          class="flexbox center-aligned "
         >
           System Audit Log
           <svg
             aria-hidden="true"
             aria-label="Granting access to the audit log will allow tracing changes to devices, releases and user accounts, as well as providing information about deployments."
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small muted emotion-19"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small muted emotion-24"
             data-mui-internal-clone-element="true"
             data-testid="InfoOutlinedIcon"
             focusable="false"
@@ -1564,21 +1499,21 @@ label+.emotion-36 {
           </svg>
         </div>
         <div
-          class="MuiFormControl-root emotion-7"
+          class="MuiFormControl-root emotion-8"
         >
           <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
             data-shrink="false"
             id="permission-selection-label"
           />
           <div
-            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiSelect-root emotion-22"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiSelect-root emotion-27"
           >
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
               aria-labelledby="permission-selection-label mui-component-select-auditlog"
-              class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input emotion-23"
+              class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input emotion-28"
               id="mui-component-select-auditlog"
               role="combobox"
               tabindex="0"
@@ -1588,14 +1523,14 @@ label+.emotion-36 {
             <input
               aria-hidden="true"
               aria-invalid="false"
-              class="MuiSelect-nativeInput emotion-24"
+              class="MuiSelect-nativeInput emotion-29"
               name="auditlog"
               tabindex="-1"
               value=""
             />
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-25"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-30"
               data-testid="ArrowDropDownIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -1604,17 +1539,32 @@ label+.emotion-36 {
                 d="M7 10l5 5 5-5z"
               />
             </svg>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-12"
+            >
+              <legend
+                class="emotion-32"
+              >
+                <span
+                  aria-hidden="true"
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
           </div>
         </div>
       </div>
       <div
-        class="flexbox center-aligned margin-top margin-left-small"
+        class="flexbox center-aligned margin-left-small margin-top-small"
       >
         Release Management
         <svg
           aria-hidden="true"
           aria-label="Release permissions can be granted to allow artifact & release modifications, as well as the creation of new releases."
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small muted emotion-19"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small muted emotion-24"
           data-mui-internal-clone-element="true"
           data-testid="InfoOutlinedIcon"
           focusable="false"
@@ -1626,30 +1576,30 @@ label+.emotion-36 {
         </svg>
       </div>
       <div
-        class="flexbox center-aligned margin-left"
+        class="margin-left-small emotion-43"
       >
         <div
           class="two-columns center-aligned"
           style="max-width: 500px;"
         >
           <div
-            class="MuiFormControl-root emotion-7"
+            class="MuiFormControl-root emotion-8"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
               data-shrink="false"
               id="releases-scope-selection-select-label"
             >
               Search release tags
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root emotion-36"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root emotion-46"
             >
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-labelledby="releases-scope-selection-select-label mui-component-select-releases.0.item"
-                class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-23"
+                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-28"
                 id="mui-component-select-releases.0.item"
                 role="combobox"
                 tabindex="0"
@@ -1664,14 +1614,14 @@ label+.emotion-36 {
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput emotion-24"
+                class="MuiSelect-nativeInput emotion-29"
                 name="releases.0.item"
                 tabindex="-1"
                 value=""
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-25"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-30"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1680,26 +1630,38 @@ label+.emotion-36 {
                   d="M7 10l5 5 5-5z"
                 />
               </svg>
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-12"
+              >
+                <legend
+                  class="emotion-13"
+                >
+                  <span>
+                    Search release tags
+                  </span>
+                </legend>
+              </fieldset>
             </div>
           </div>
           <div
-            class="MuiFormControl-root emotion-7"
+            class="MuiFormControl-root emotion-8"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
               data-shrink="false"
               id="permission-selection-label"
             >
               Select
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiSelect-root emotion-22"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiSelect-root emotion-27"
             >
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-labelledby="permission-selection-label mui-component-select-releases.0.uiPermissions"
-                class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input emotion-23"
+                class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input emotion-28"
                 id="mui-component-select-releases.0.uiPermissions"
                 role="combobox"
                 tabindex="0"
@@ -1714,14 +1676,14 @@ label+.emotion-36 {
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput emotion-24"
+                class="MuiSelect-nativeInput emotion-29"
                 name="releases.0.uiPermissions"
                 tabindex="-1"
                 value=""
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-25"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-30"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1730,18 +1692,30 @@ label+.emotion-36 {
                   d="M7 10l5 5 5-5z"
                 />
               </svg>
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-12"
+              >
+                <legend
+                  class="emotion-13"
+                >
+                  <span>
+                    Select
+                  </span>
+                </legend>
+              </fieldset>
             </div>
           </div>
         </div>
       </div>
       <div
-        class="flexbox center-aligned margin-top margin-left-small"
+        class="flexbox center-aligned margin-left-small margin-top-small"
       >
         Group Management
         <svg
           aria-hidden="true"
           aria-label="Device group management permissions control the degree to which devices in a group can be accessed and moved to other groups."
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small muted emotion-19"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small muted emotion-24"
           data-mui-internal-clone-element="true"
           data-testid="InfoOutlinedIcon"
           focusable="false"
@@ -1753,30 +1727,30 @@ label+.emotion-36 {
         </svg>
       </div>
       <div
-        class="flexbox center-aligned margin-left"
+        class="margin-left-small emotion-43"
       >
         <div
           class="two-columns center-aligned"
           style="max-width: 500px;"
         >
           <div
-            class="MuiFormControl-root emotion-7"
+            class="MuiFormControl-root emotion-8"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
               data-shrink="false"
               id="groups-scope-selection-select-label"
             >
               Search groups
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root emotion-36"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiSelect-root emotion-46"
             >
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-labelledby="groups-scope-selection-select-label mui-component-select-groups.0.item"
-                class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input emotion-23"
+                class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input emotion-28"
                 id="mui-component-select-groups.0.item"
                 role="combobox"
                 tabindex="0"
@@ -1791,14 +1765,14 @@ label+.emotion-36 {
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput emotion-24"
+                class="MuiSelect-nativeInput emotion-29"
                 name="groups.0.item"
                 tabindex="-1"
                 value=""
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-25"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-30"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1807,26 +1781,38 @@ label+.emotion-36 {
                   d="M7 10l5 5 5-5z"
                 />
               </svg>
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-12"
+              >
+                <legend
+                  class="emotion-13"
+                >
+                  <span>
+                    Search groups
+                  </span>
+                </legend>
+              </fieldset>
             </div>
           </div>
           <div
-            class="MuiFormControl-root emotion-7"
+            class="MuiFormControl-root emotion-8"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
               data-shrink="false"
               id="permission-selection-label"
             >
               Select
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiSelect-root emotion-22"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiSelect-root emotion-27"
             >
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-labelledby="permission-selection-label mui-component-select-groups.0.uiPermissions"
-                class="MuiSelect-select MuiSelect-standard MuiSelect-multiple MuiInputBase-input MuiInput-input emotion-23"
+                class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input emotion-28"
                 id="mui-component-select-groups.0.uiPermissions"
                 role="combobox"
                 tabindex="0"
@@ -1841,14 +1827,14 @@ label+.emotion-36 {
               <input
                 aria-hidden="true"
                 aria-invalid="false"
-                class="MuiSelect-nativeInput emotion-24"
+                class="MuiSelect-nativeInput emotion-29"
                 name="groups.0.uiPermissions"
                 tabindex="-1"
                 value=""
               />
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard emotion-25"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined emotion-30"
                 data-testid="ArrowDropDownIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -1857,18 +1843,30 @@ label+.emotion-36 {
                   d="M7 10l5 5 5-5z"
                 />
               </svg>
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-12"
+              >
+                <legend
+                  class="emotion-13"
+                >
+                  <span>
+                    Select
+                  </span>
+                </legend>
+              </fieldset>
             </div>
           </div>
         </div>
       </div>
       <hr
-        class="MuiDivider-root MuiDivider-fullWidth MuiDivider-light margin-top-large emotion-59"
+        class="MuiDivider-root MuiDivider-fullWidth margin-top-large emotion-6"
       />
       <div
-        class="flexbox centered margin-top emotion-60"
+        class="flexbox centered margin-top emotion-79"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary margin-right emotion-61"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary margin-right emotion-80"
           id=":r7:"
           tabindex="0"
           type="button"
@@ -1876,7 +1874,7 @@ label+.emotion-36 {
           Cancel
         </button>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-62"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-81"
           disabled=""
           id=":r8:"
           tabindex="-1"
diff --git a/frontend/src/js/components/settings/user-management/SelfUserManagement.tsx b/frontend/src/js/components/settings/user-management/SelfUserManagement.tsx
index 31629b74..5350ef9d 100644
--- a/frontend/src/js/components/settings/user-management/SelfUserManagement.tsx
+++ b/frontend/src/js/components/settings/user-management/SelfUserManagement.tsx
@@ -37,11 +37,9 @@ const { setSnackbar } = storeActions;
 
 const useStyles = makeStyles()(() => ({
   formField: { width: 400, maxWidth: '100%' },
-  changeButton: { margin: '30px 0 0 15px' },
   infoText: { margin: 0, width: '75%' },
   jwt: { maxWidth: '70%' },
   oauthIcon: { fontSize: '36px', marginRight: 10 },
-  userId: { '&.full-width': { maxWidth: '100%' } },
   widthLimit: { maxWidth: 750 }
 }));
 
@@ -87,37 +85,55 @@ export const SelfUserManagement = () => {
   return (
     <div className={`margin-top-small ${classes.widthLimit}`}>
       <h2 className="margin-top-small">My profile</h2>
-      <UserId className={`full-width ${classes.userId}`} userId={userId} />
+      <UserId className="margin-bottom-none" userId={userId} />
       {!editEmail && email ? (
         <div className="flexbox space-between margin-bottom-small">
-          <TextField className={classes.formField} label="Email" key={email} InputLabelProps={{ shrink: !!email }} disabled defaultValue={email} />
+          <TextField className={classes.formField} label="Email" key={email} disabled defaultValue={email} />
           {!isOAuth2 && (
-            <Button className={`inline-block ${classes.changeButton}`} color="primary" id="change_email" onClick={handleEmail}>
+            <Button color="primary" id="change_email" onClick={handleEmail}>
               Change email
             </Button>
           )}
         </div>
       ) : (
         <Form defaultValues={{ email }} onSubmit={editSubmit} handleCancel={handleEmail} submitLabel="Save" showButtons={editEmail} buttonColor="secondary">
-          <TextInput disabled={false} hint="Email" id="email" InputLabelProps={{ shrink: !!email }} label="Email" validations="isLength:1,isEmail,trim" />
-          <PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required={true} />
+          <TextInput hint="Email" id="email" label="Email" validations="isLength:1,isEmail,trim" />
+          <PasswordInput
+            className="margin-top-x-small"
+            id="current_password"
+            label="Current password *"
+            validations={`isLength:8,isNot:${email}`}
+            required={true}
+          />
         </Form>
       )}
       {!isOAuth2 &&
         (!editPass ? (
-          <form className="flexbox space-between">
+          <form className="flexbox space-between margin-top">
             <TextField className={classes.formField} label="Password" key="password-placeholder" disabled defaultValue="********" type="password" />
-            <Button className={classes.changeButton} color="primary" id="change_password" onClick={handlePass}>
+            <Button color="primary" id="change_password" onClick={handlePass}>
               Change password
             </Button>
           </form>
         ) : (
           <>
-            <h3 className="margin-top margin-bottom-none">Change password</h3>
+            <h3 className="margin-top">Change password</h3>
             <Form onSubmit={editSubmit} handleCancel={handlePass} submitLabel="Save" buttonColor="secondary" showButtons={editPass}>
-              <PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required />
-              <PasswordInput className="edit-pass" id="password" label="Password *" validations={`isLength:8,isNot:${email}`} create generate required />
-              <PasswordInput id="password_confirmation" label="Confirm password *" validations={`isLength:8,isNot:${email}`} required />
+              <PasswordInput
+                className="margin-bottom-x-small"
+                id="current_password"
+                label="Current password *"
+                validations={`isLength:8,isNot:${email}`}
+                required
+              />
+              <PasswordInput id="password" label="Password *" validations={`isLength:8,isNot:${email}`} create generate required />
+              <PasswordInput
+                className="margin-top-x-small"
+                id="password_confirmation"
+                label="Confirm password *"
+                validations={`isLength:8,isNot:${email}`}
+                required
+              />
             </Form>
           </>
         ))}
diff --git a/frontend/src/js/components/settings/user-management/UserDefinition.tsx b/frontend/src/js/components/settings/user-management/UserDefinition.tsx
index 83518335..649f86e8 100644
--- a/frontend/src/js/components/settings/user-management/UserDefinition.tsx
+++ b/frontend/src/js/components/settings/user-management/UserDefinition.tsx
@@ -33,15 +33,13 @@ const useStyles = makeStyles()(theme => ({
   divider: { marginTop: theme.spacing(4) },
   leftButton: { marginRight: theme.spacing(2) },
   oauthIcon: { fontSize: 36, marginRight: 10 },
-  userId: { marginTop: theme.spacing(3) },
   userIdWrapper: {
     // the following 2 lines are required to align the CopyTextToClipboard with the tenant token without sacrificing consistent behaviour
     marginBottom: theme.spacing(-3),
-    '.copy-button': { marginTop: theme.spacing(3) },
-    [`.${textFieldClasses.root}`]: { width: 400 },
-    maxWidth: 600
+    '.copy-button': { marginBottom: theme.spacing(-1) },
+    [`.${textFieldClasses.root}`]: { width: 400 }
   },
-  widthLimit: { maxWidth: 400 }
+  widthLimit: { marginTop: theme.spacing(3), maxWidth: 620, [`.${textFieldClasses.root}`]: { width: 400 } }
 }));
 
 export const getUserSSOState = user => {
@@ -65,7 +63,7 @@ export const UserId = ({ className = '', userId }) => {
   const { classes } = useStyles();
   return (
     <div className={`flexbox space-between ${classes.userIdWrapper} ${className}`}>
-      <TextField label="User ID" key={userId} InputLabelProps={{ shrink: !!userId }} disabled defaultValue={userId} />
+      <TextField label="User ID" key={userId} disabled defaultValue={userId} />
       <div className="flexbox center-aligned copy-button">
         <CopyTextToClipboard token={userId} />
       </div>
@@ -159,8 +157,8 @@ export const UserDefinition = ({ currentUser, isEnterprise, onCancel, onSubmit,
         }
       />
       <Divider />
-      <UserId className={classes.userId} userId={id} />
-      <FormControl className={`${classes.widthLimit} margin-top-none`}>
+      <UserId className={classes.widthLimit} userId={id} />
+      <FormControl className={classes.widthLimit}>
         <TextField label="Email" id="email" value={currentEmail} disabled={isOAuth2 || currentUser.id === id} error={nameError} onChange={validateNameChange} />
         {nameError && <FormHelperText className="warning">Please enter a valid email address</FormHelperText>}
       </FormControl>
diff --git a/frontend/src/js/components/settings/user-management/UserForm.tsx b/frontend/src/js/components/settings/user-management/UserForm.tsx
index d88e1126..83f6dfa9 100644
--- a/frontend/src/js/components/settings/user-management/UserForm.tsx
+++ b/frontend/src/js/components/settings/user-management/UserForm.tsx
@@ -30,6 +30,7 @@ import {
   Select,
   Tooltip
 } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 
 import EnterpriseNotification from '@northern.tech/common-ui/EnterpriseNotification';
 import Form from '@northern.tech/common-ui/forms/Form';
@@ -40,6 +41,10 @@ import { BENEFITS, rolesById, rolesByName, uiPermissionsById } from '@northern.t
 import pluralize from 'pluralize';
 import { isUUID } from 'validator';
 
+const useStyles = makeStyles()(theme => ({
+  formWrapper: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), paddingTop: theme.spacing(4) }
+}));
+
 export const UserRolesSelect = ({ currentUser, disabled, onSelect, roles, user }) => {
   const relevantRolesById = useMemo(
     () => roles.reduce((accu, role) => ({ ...accu, [role.value ?? role.name]: { ...role, value: role.value ?? role.name } }), {}),
@@ -89,10 +94,11 @@ export const UserRolesSelect = ({ currentUser, disabled, onSelect, roles, user }
   }, [JSON.stringify(relevantRolesById), selectedRoleIds]);
 
   return (
-    <div className="flexbox" style={{ alignItems: 'flex-end' }}>
+    <div className="flexbox margin-top-small" style={{ alignItems: 'flex-end' }}>
       <FormControl id="roles-form" style={{ maxWidth: 400 }}>
         <InputLabel id="roles-selection-label">Roles</InputLabel>
         <Select
+          label="Roles"
           labelId="roles-selection-label"
           id={`roles-selector-${selectedRoleIds.length}`}
           disabled={disabled}
@@ -153,6 +159,7 @@ export const UserForm = ({ closeDialog, currentUser, canManageUsers, isEnterpris
   const [hadRoleChanges, setHadRoleChanges] = useState(false);
   const [selectedRoles, setSelectedRoles] = useState();
   const [isAddingExistingUser, setIsAddingExistingUser] = useState(false);
+  const { classes } = useStyles();
 
   const onSelect = (newlySelectedRoles, hadRoleChanges) => {
     setSelectedRoles(newlySelectedRoles);
@@ -174,6 +181,7 @@ export const UserForm = ({ closeDialog, currentUser, canManageUsers, isEnterpris
       <DialogTitle>Add new user</DialogTitle>
       <DialogContent style={{ overflowY: 'initial' }}>
         <Form
+          className={classes.formWrapper}
           onSubmit={onSubmit}
           handleCancel={closeDialog}
           submitLabel={`${isAddingExistingUser ? 'Add' : 'Create'} user`}
@@ -184,7 +192,6 @@ export const UserForm = ({ closeDialog, currentUser, canManageUsers, isEnterpris
           <Collapse in={!isAddingExistingUser}>
             <PasswordInput
               id="password"
-              className="edit-pass"
               autocomplete="off"
               create
               edit={false}
diff --git a/frontend/src/js/components/settings/user-management/UserManagement.test.tsx b/frontend/src/js/components/settings/user-management/UserManagement.test.tsx
index f3490f5f..90167269 100644
--- a/frontend/src/js/components/settings/user-management/UserManagement.test.tsx
+++ b/frontend/src/js/components/settings/user-management/UserManagement.test.tsx
@@ -64,7 +64,7 @@ describe('UserManagement Component', () => {
     expect(screen.queryByText(/enter a valid email address/i)).not.toBeInTheDocument();
     await user.click(screen.getByRole('checkbox', { name: /reset the password/i }));
     await user.click(screen.getByRole('checkbox', { name: /reset the password/i }));
-    const selectButton = screen.getByText(/roles/i).parentNode.querySelector('[role=combobox]');
+    const selectButton = screen.getByLabelText(/roles/i).parentNode.querySelector('[role=combobox]');
     await user.click(selectButton);
     let listbox = document.body.querySelector(dropDownSelector);
     const adminItem = within(listbox).getByText(/admin/i);
@@ -121,7 +121,7 @@ describe('UserManagement Component', () => {
     render(<UserManagement />, { preloadedState });
     const list = screen.getAllByText(/view details/i);
     await user.click(list[list.length - 1]);
-    const selectButton = screen.getByText(/roles/i).parentNode.querySelector('[role=combobox]');
+    const selectButton = screen.getByLabelText(/roles/i).parentNode.querySelector('[role=combobox]');
     await user.click(selectButton);
     let listbox = document.body.querySelector(dropDownSelector);
     const adminItem = within(listbox).getByText(/admin/i);
diff --git a/frontend/src/js/components/settings/user-management/__snapshots__/SelfUserManagement.test.tsx.snap b/frontend/src/js/components/settings/user-management/__snapshots__/SelfUserManagement.test.tsx.snap
index 307a88f1..bb3033cb 100644
--- a/frontend/src/js/components/settings/user-management/__snapshots__/SelfUserManagement.test.tsx.snap
+++ b/frontend/src/js/components/settings/user-management/__snapshots__/SelfUserManagement.test.tsx.snap
@@ -7,22 +7,17 @@ exports[`SelfUserManagement Component renders correctly 1`] = `
 
 .emotion-1 {
   margin-bottom: -24px;
-  max-width: 600px;
 }
 
 .emotion-1 .copy-button {
-  margin-top: 24px;
+  margin-bottom: -8px;
 }
 
 .emotion-1 .MuiTextField-root {
   width: 400px;
 }
 
-.emotion-2.full-width {
-  max-width: 100%;
-}
-
-.emotion-3 {
+.emotion-2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -36,11 +31,10 @@ exports[`SelfUserManagement Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-4 {
+.emotion-3 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -70,25 +64,42 @@ exports[`SelfUserManagement Component renders correctly 1`] = `
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
-.emotion-4.Mui-focused {
+.emotion-3.Mui-focused {
   color: #337a87;
 }
 
-.emotion-4.Mui-disabled {
+.emotion-3.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-4.Mui-error {
+.emotion-3.Mui-error {
   color: #ab1000;
 }
 
-.emotion-4.Mui-focused {
+.emotion-3.Mui-focused {
   color: #337a87;
 }
 
-.emotion-5 {
+.emotion-4 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -106,87 +117,41 @@ exports[`SelfUserManagement Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-5.Mui-disabled {
+.emotion-4.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-5 {
-  margin-top: 16px;
-}
-
-.emotion-5::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-5.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-5.Mui-error::before,
-.emotion-5.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-5::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-5:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-4:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-5:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-4:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-5.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-5::after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-5:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-4.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-5:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-4.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-5:after {
-  border-bottom: 2px solid #337a87;
+.emotion-4.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-6 {
+.emotion-5 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -204,78 +169,127 @@ label+.emotion-5 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-6::-webkit-input-placeholder {
+.emotion-5::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-6::-moz-placeholder {
+.emotion-5::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-6::-ms-input-placeholder {
+.emotion-5::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-6:focus {
+.emotion-5:focus {
   outline: 0;
 }
 
-.emotion-6:invalid {
+.emotion-5:invalid {
   box-shadow: none;
 }
 
-.emotion-6::-webkit-search-decoration {
+.emotion-5::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-6::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-5::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-6::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-5::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-6::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-5::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-5:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-6.Mui-disabled {
+.emotion-5.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-6:-webkit-autofill {
+.emotion-5:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
+.emotion-5:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-6 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
 .emotion-7 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-7>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -335,33 +349,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-7::-moz-focus-inner {
+.emotion-8::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-8.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-7 {
+  .emotion-8 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-7:hover {
+.emotion-8:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-8.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-7:hover {
+  .emotion-8:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -369,29 +383,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   }
 }
 
-.emotion-7.MuiButton-loading {
+.emotion-8.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-7:hover {
+.emotion-8:hover {
   colors: #337a87;
 }
 
-.emotion-7.MuiButton-text {
+.emotion-8.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-8 {
+.emotion-9 {
   display: inherit;
   margin-right: 8px;
   margin-left: -4px;
 }
 
-.emotion-8>*:nth-of-type(1) {
+.emotion-9>*:nth-of-type(1) {
   font-size: 20px;
 }
 
-.emotion-9 {
+.emotion-10 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -408,15 +422,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-9 iconButton {
+.emotion-10 iconButton {
   margin-right: 8px;
 }
 
-.emotion-10 {
+.emotion-11 {
   height: 15px;
 }
 
-.emotion-11 {
+.emotion-12 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -430,13 +444,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
   width: 400px;
   max-width: 100%;
 }
 
-.emotion-15 {
+.emotion-18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -455,13 +468,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
 }
 
 @media print {
-  .emotion-15 {
+  .emotion-18 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-16 {
+.emotion-19 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -505,79 +518,79 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-16::-moz-focus-inner {
+.emotion-19::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-16.Mui-disabled {
+.emotion-19.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-16 {
+  .emotion-19 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-16.Mui-checked {
+.emotion-19.Mui-checked {
   -webkit-transform: translateX(20px);
   -moz-transform: translateX(20px);
   -ms-transform: translateX(20px);
   transform: translateX(20px);
 }
 
-.emotion-16.Mui-disabled {
+.emotion-19.Mui-disabled {
   color: #d8ebe9;
 }
 
-.emotion-16.Mui-checked+.MuiSwitch-track {
+.emotion-19.Mui-checked+.MuiSwitch-track {
   opacity: 0.5;
 }
 
-.emotion-16.Mui-disabled+.MuiSwitch-track {
+.emotion-19.Mui-disabled+.MuiSwitch-track {
   opacity: 0.12;
 }
 
-.emotion-16 .MuiSwitch-input {
+.emotion-19 .MuiSwitch-input {
   left: -100%;
   width: 300%;
 }
 
-.emotion-16:hover {
+.emotion-19:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
 @media (hover: none) {
-  .emotion-16:hover {
+  .emotion-19:hover {
     background-color: transparent;
   }
 }
 
-.emotion-16.Mui-checked {
+.emotion-19.Mui-checked {
   color: #337a87;
 }
 
-.emotion-16.Mui-checked:hover {
+.emotion-19.Mui-checked:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
 @media (hover: none) {
-  .emotion-16.Mui-checked:hover {
+  .emotion-19.Mui-checked:hover {
     background-color: transparent;
   }
 }
 
-.emotion-16.Mui-checked.Mui-disabled {
+.emotion-19.Mui-checked.Mui-disabled {
   color: rgb(177, 204, 209);
 }
 
-.emotion-16.Mui-checked+.MuiSwitch-track {
+.emotion-19.Mui-checked+.MuiSwitch-track {
   background-color: #337a87;
 }
 
-.emotion-17 {
+.emotion-20 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -590,7 +603,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   z-index: 1;
 }
 
-.emotion-18 {
+.emotion-21 {
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
   background-color: currentColor;
   width: 20px;
@@ -598,7 +611,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-19 {
+.emotion-22 {
   height: 100%;
   width: 100%;
   border-radius: 7px;
@@ -609,12 +622,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   opacity: 0.38;
 }
 
-.emotion-20 {
+.emotion-23 {
   font-size: 36px;
   margin-right: 10px;
 }
 
-.emotion-21 {
+.emotion-24 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -631,15 +644,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   font-size: inherit;
 }
 
-.emotion-21 iconButton {
+.emotion-24 iconButton {
   margin-right: 8px;
 }
 
-.emotion-22 {
+.emotion-25 {
   max-width: 70%;
 }
 
-.emotion-23 {
+.emotion-26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -664,25 +677,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   padding-bottom: 11px;
 }
 
-.emotion-23.undefined {
+.emotion-26.undefined {
   opacity: 1;
 }
 
-.emotion-23.active {
+.emotion-26.active {
   background-color: #fff;
 }
 
-.emotion-23.leftNav.active {
+.emotion-26.leftNav.active {
   border-top: 1px solid #d4e9e7;
   border-bottom: 1px solid #d4e9e7;
 }
 
-.emotion-23.navLink,
-.emotion-23.navLink .MuiListItemText-root {
+.emotion-26.navLink,
+.emotion-26.navLink .MuiListItemText-root {
   color: #969696;
 }
 
-.emotion-24 {
+.emotion-27 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -694,15 +707,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
   color: rgba(10, 10, 11, 0.78);
 }
 
-.MuiTypography-root:where(.emotion-24 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-27 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-24 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-27 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-25 {
+.emotion-28 {
   margin: 0;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -720,13 +733,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
     My profile
   </h2>
   <div
-    class="flexbox space-between emotion-1 full-width emotion-2"
+    class="flexbox space-between emotion-1 margin-bottom-none"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root emotion-3"
+      class="MuiFormControl-root MuiTextField-root emotion-2"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-4"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
         data-shrink="true"
         for=":r0:"
         id=":r0:-label"
@@ -734,16 +747,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
         User ID
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-5"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-4"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input Mui-disabled emotion-6"
+          class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-5"
           disabled=""
           id=":r0:"
           type="text"
           value="a1"
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-6"
+        >
+          <legend
+            class="emotion-7"
+          >
+            <span>
+              User ID
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
     <div
@@ -751,17 +776,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
     >
       <div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-7"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-8"
           id=":r1:"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-8"
+            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-9"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-10"
               data-testid="FileCopyIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -774,7 +799,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
           Copy to clipboard
         </button>
         <p
-          class="emotion-10"
+          class="emotion-11"
         />
       </div>
     </div>
@@ -783,10 +808,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
     class="flexbox space-between margin-bottom-small"
   >
     <div
-      class="MuiFormControl-root MuiTextField-root emotion-11"
+      class="MuiFormControl-root MuiTextField-root emotion-12"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-4"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-disabled MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-3"
         data-shrink="true"
         for=":r2:"
         id=":r2:-label"
@@ -794,16 +819,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
         Email
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-5"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl emotion-4"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input Mui-disabled emotion-6"
+          class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-5"
           disabled=""
           id=":r2:"
           type="text"
           value="a@b.com"
         />
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline emotion-6"
+        >
+          <legend
+            class="emotion-7"
+          >
+            <span>
+              Email
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
@@ -816,21 +853,21 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
       Enable dark theme
     </p>
     <span
-      class="MuiSwitch-root MuiSwitch-sizeMedium emotion-15"
+      class="MuiSwitch-root MuiSwitch-sizeMedium emotion-18"
     >
       <span
-        class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary emotion-16"
+        class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary emotion-19"
       >
         <input
-          class="PrivateSwitchBase-input MuiSwitch-input emotion-17"
+          class="PrivateSwitchBase-input MuiSwitch-input emotion-20"
           type="checkbox"
         />
         <span
-          class="MuiSwitch-thumb emotion-18"
+          class="MuiSwitch-thumb emotion-21"
         />
       </span>
       <span
-        class="MuiSwitch-track emotion-19"
+        class="MuiSwitch-track emotion-22"
       />
     </span>
   </div>
@@ -838,11 +875,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
     class="flexbox margin-top"
   >
     <div
-      class="emotion-20"
+      class="emotion-23"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-21"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit emotion-24"
         focusable="false"
         viewBox="0 0 24 24"
       >
@@ -869,7 +906,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
     class="flexbox space-between margin-top-large"
   >
     <div
-      class="emotion-22"
+      class="emotion-25"
     >
       <div
         class="help-content"
@@ -880,13 +917,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
         class=""
       >
         <div
-          class="MuiListItem-root attributes MuiListItem-padding emotion-23"
+          class="MuiListItem-root attributes MuiListItem-padding emotion-26"
         >
           <div
-            class="MuiListItemText-root emotion-24"
+            class="MuiListItemText-root emotion-27"
           >
             <div
-              class="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary emotion-25"
+              class="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary emotion-28"
               title="eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTNkMGY4Yy1hZWRlLTQwMzAtYjM5MS03ZDUwMjBlYjg3M2UiLCJzdWIiOiJhMzBhNzgwYi1iODQzLTUzNDQtODBlMy0wZmQ5NWE0ZjZmYzMiLCJleHAiOjE2MDY4MTUzNjksImlhdCI6MTYwNjIxMDU2OSwibWVuZGVyLnRlbmFudCI6IjVmODVjMTdiY2U2MmI3ZmE3ZjVmNzA0MCIsIm1lbmRlci51c2VyIjp0cnVlLCJpc3MiOiJNZW5kZXIgVXNlcnMiLCJzY3AiOiJtZW5kZXIuKiIsIm1lbmRlci5wbGFuIjoicHJvZmVzc2lvbmFsIiwibmJmIjoxNjA2MjEwNTY5fQ.qVgYdCzLTf8OdK9uUctqqaY_HWkIiwpekuGvuGQAXCEgOv4bRNDlZRN_ZRSbxQoARG3pquhScbQrjBV9tcF4irTUPlTn3yrsXNO17DpcbTVeKRkb88RDtIKiRw3orVZ_GlIb-ckTQ5dS-Nqlyyf3Fmrhca-gwt6m_xv2UrmJK6eYYTMfggdRRWb-4u7mEkBI_pHPMTQrT8kJ2BeX-vHgazH9AoH0k85LHtFZQXD7pXHlDZRnLxJXukncwMGDmF17374gavYAIyDIzcC8sEBMDnVXgpikeA1sauzirqix6mAVs6XmxdQO7aF0wfXO1_PTYUA3Nk1oQfMYNlEI3U9uLRJRZIq2L8fmrrBryhstKd4y0KlBbGAQrx8NtRkgajjd1ljMfPBUEZrb7uSerVjneiO-aIBO76CuH0zdklphIjpGJeogkBhe8pAYNggp1XsZHgpZfl7IE5faKaDkMGnutaea--Czor6bhqUNCuY4tR0cpQJbNwy6LS9o1CFy4Log"
             >
               <span
@@ -905,17 +942,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
     >
       <div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-7"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-8"
           id=":r3:"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-8"
+            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium emotion-9"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-9"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-10"
               data-testid="FileCopyIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -928,7 +965,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
           Copy to clipboard
         </button>
         <p
-          class="emotion-10"
+          class="emotion-11"
         />
       </div>
     </div>
@@ -942,7 +979,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-6:focus::-ms-input-p
       Personal access token management
     </p>
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-7"
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-8"
       id=":r4:"
       tabindex="0"
       type="button"
diff --git a/frontend/src/js/components/settings/user-management/__snapshots__/UserForm.test.tsx.snap b/frontend/src/js/components/settings/user-management/__snapshots__/UserForm.test.tsx.snap
index a2213d9d..416a6f54 100644
--- a/frontend/src/js/components/settings/user-management/__snapshots__/UserForm.test.tsx.snap
+++ b/frontend/src/js/components/settings/user-management/__snapshots__/UserForm.test.tsx.snap
@@ -124,6 +124,18 @@ exports[`UserForm Component renders correctly 1`] = `
 }
 
 .emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 16px;
+  padding-top: 32px;
+}
+
+.emotion-7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -137,11 +149,10 @@ exports[`UserForm Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-7 {
+.emotion-8 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -165,25 +176,32 @@ exports[`UserForm Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
-.emotion-7.Mui-focused {
+.emotion-8.Mui-focused {
   color: #337a87;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-8.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-7.Mui-error {
+.emotion-8.Mui-error {
   color: #ab1000;
 }
 
-.emotion-7.Mui-focused {
+.emotion-8.Mui-focused {
   color: #337a87;
 }
 
-.emotion-8 {
+.emotion-9 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -201,87 +219,41 @@ exports[`UserForm Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-8 {
-  margin-top: 16px;
-}
-
-.emotion-8::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-8.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-8.Mui-error::before,
-.emotion-8.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-8::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-8:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-9:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-8:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-9:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-8.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-9.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-8::after {
-  border-bottom: 2px solid #337a87;
+.emotion-9.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-8:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-9.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-8:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-9.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-8:after {
-  border-bottom: 2px solid #337a87;
-}
-
-.emotion-9 {
+.emotion-10 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -299,78 +271,124 @@ label+.emotion-8 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-9::-webkit-input-placeholder {
+.emotion-10::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-9::-moz-placeholder {
+.emotion-10::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-9::-ms-input-placeholder {
+.emotion-10::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-9:focus {
+.emotion-10:focus {
   outline: 0;
 }
 
-.emotion-9:invalid {
+.emotion-10:invalid {
   box-shadow: none;
 }
 
-.emotion-9::-webkit-search-decoration {
+.emotion-10::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-10.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-9:-webkit-autofill {
+.emotion-10:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-10 {
+.emotion-10:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-11 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-12 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-12>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-13 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -381,17 +399,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-10.Mui-disabled {
+.emotion-13.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-10.Mui-error {
+.emotion-13.Mui-error {
   color: #ab1000;
 }
 
-.emotion-11 {
+.emotion-14 {
   height: 0;
   overflow: hidden;
   -webkit-transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -400,7 +420,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   overflow: visible;
 }
 
-.emotion-12 {
+.emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -408,11 +428,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   width: 100%;
 }
 
-.emotion-13 {
+.emotion-16 {
   width: 100%;
 }
 
-.emotion-15 {
+.emotion-18 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -442,25 +462,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
-.emotion-15.Mui-focused {
+.emotion-18.Mui-focused {
   color: #337a87;
 }
 
-.emotion-15.Mui-disabled {
+.emotion-18.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-15.Mui-error {
+.emotion-18.Mui-error {
   color: #ab1000;
 }
 
-.emotion-15.Mui-focused {
+.emotion-18.Mui-focused {
   color: #337a87;
 }
 
-.emotion-16 {
+.emotion-19 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -477,11 +514,159 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   font-size: 1.1607rem;
 }
 
-.emotion-16 iconButton {
+.emotion-19 iconButton {
   margin-right: 8px;
 }
 
-.emotion-19 {
+.emotion-20 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
+}
+
+.emotion-20.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-20:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-20:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-20.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-20.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-20.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-20.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-21 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
+}
+
+.emotion-21::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-21::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-21::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-21:focus {
+  outline: 0;
+}
+
+.emotion-21:invalid {
+  box-shadow: none;
+}
+
+.emotion-21::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-21::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-21::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-21::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-21:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-21:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-21:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-21.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-21:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-21:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -496,7 +681,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   margin-left: 8px;
 }
 
-.emotion-20 {
+.emotion-23 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -546,42 +731,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.54);
 }
 
-.emotion-20::-moz-focus-inner {
+.emotion-23::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-20.Mui-disabled {
+.emotion-23.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-20 {
+  .emotion-23 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-20:hover {
+.emotion-23:hover {
   background-color: var(--IconButton-hoverBg);
 }
 
 @media (hover: none) {
-  .emotion-20:hover {
+  .emotion-23:hover {
     background-color: transparent;
   }
 }
 
-.emotion-20.Mui-disabled {
+.emotion-23.Mui-disabled {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-20.MuiIconButton-loading {
+.emotion-23.MuiIconButton-loading {
   color: transparent;
 }
 
-.emotion-21 {
+.emotion-24 {
   display: none;
   position: absolute;
   visibility: visible;
@@ -594,7 +779,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-22 {
+.emotion-25 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -611,11 +796,37 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   font-size: 1.3929rem;
 }
 
-.emotion-22 iconButton {
+.emotion-25 iconButton {
   margin-right: 8px;
 }
 
-.emotion-24 {
+.emotion-27 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-27>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-30 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -675,33 +886,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-24::-moz-focus-inner {
+.emotion-30::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-24.Mui-disabled {
+.emotion-30.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-24 {
+  .emotion-30 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-24:hover {
+.emotion-30:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-24.Mui-disabled {
+.emotion-30.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-24:hover {
+  .emotion-30:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -709,19 +920,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   }
 }
 
-.emotion-24.MuiButton-loading {
+.emotion-30.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-24:hover {
+.emotion-30:hover {
   colors: #337a87;
 }
 
-.emotion-24.MuiButton-text {
+.emotion-30.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-25 {
+.emotion-31 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -738,15 +949,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   margin-top: 18px;
 }
 
-.emotion-25.Mui-disabled {
+.emotion-31.Mui-disabled {
   cursor: default;
 }
 
-.emotion-25 .MuiFormControlLabel-label.Mui-disabled {
+.emotion-31 .MuiFormControlLabel-label.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-26 {
+.emotion-32 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -785,42 +996,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-26::-moz-focus-inner {
+.emotion-32::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-26.Mui-disabled {
+.emotion-32.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-26 {
+  .emotion-32 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-26:hover {
+.emotion-32:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-26.Mui-checked,
-.emotion-26.MuiCheckbox-indeterminate {
+.emotion-32.Mui-checked,
+.emotion-32.MuiCheckbox-indeterminate {
   color: #337a87;
 }
 
-.emotion-26.Mui-disabled {
+.emotion-32.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: none) {
-  .emotion-26:hover {
+  .emotion-32:hover {
     background-color: transparent;
   }
 }
 
-.emotion-27 {
+.emotion-33 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -833,7 +1044,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   z-index: 1;
 }
 
-.emotion-29 {
+.emotion-35 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -841,7 +1052,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   font-size: 0.9286rem;
 }
 
-.emotion-32 {
+.emotion-38 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -859,87 +1070,41 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-p
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-32.Mui-disabled {
+.emotion-38.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-32 {
-  margin-top: 16px;
-}
-
-.emotion-32::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-32.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-32.Mui-error::before,
-.emotion-32.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-32::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-32:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-38:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-32:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-38:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-32.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-38.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-32::after {
-  border-bottom: 2px solid #337a87;
+.emotion-38.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-32:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-38.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-32:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-38.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-32:after {
-  border-bottom: 2px solid #337a87;
-}
-
-.emotion-33 {
+.emotion-39 {
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-user-select: none;
@@ -948,6 +1113,7 @@ label+.emotion-32 {
   user-select: none;
   border-radius: 0;
   cursor: pointer;
+  border-radius: 4px;
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -965,31 +1131,35 @@ label+.emotion-32 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-33:focus {
+.emotion-39:focus {
   border-radius: 0;
 }
 
-.emotion-33.Mui-disabled {
+.emotion-39.Mui-disabled {
   cursor: default;
 }
 
-.emotion-33[multiple] {
+.emotion-39[multiple] {
   height: auto;
 }
 
-.emotion-33:not([multiple]) option,
-.emotion-33:not([multiple]) optgroup {
+.emotion-39:not([multiple]) option,
+.emotion-39:not([multiple]) optgroup {
   background-color: #fff;
 }
 
-.emotion-33.emotion-33.emotion-33 {
-  padding-right: 24px;
-  min-width: 16px;
+.emotion-39:focus {
+  border-radius: 4px;
+}
+
+.emotion-39.emotion-39.emotion-39 {
+  padding-right: 32px;
 }
 
-.emotion-33.MuiSelect-select {
+.emotion-39.MuiSelect-select {
   height: auto;
   min-height: 1.4375em;
   text-overflow: ellipsis;
@@ -997,76 +1167,80 @@ label+.emotion-32 {
   overflow: hidden;
 }
 
-.emotion-33::-webkit-input-placeholder {
+.emotion-39::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-33::-moz-placeholder {
+.emotion-39::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-33::-ms-input-placeholder {
+.emotion-39::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-33:focus {
+.emotion-39:focus {
   outline: 0;
 }
 
-.emotion-33:invalid {
+.emotion-39:invalid {
   box-shadow: none;
 }
 
-.emotion-33::-webkit-search-decoration {
+.emotion-39::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-33::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-39::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-33::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-39::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-33::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-39::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-39:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-39:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-39:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-33.Mui-disabled {
+.emotion-39.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-33:-webkit-autofill {
+.emotion-39:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-34 {
+.emotion-39:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-40 {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -1076,7 +1250,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   box-sizing: border-box;
 }
 
-.emotion-35 {
+.emotion-41 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1096,17 +1270,18 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   top: calc(50% - .5em);
   pointer-events: none;
   color: rgba(0, 0, 0, 0.54);
+  right: 7px;
 }
 
-.emotion-35 iconButton {
+.emotion-41 iconButton {
   margin-right: 8px;
 }
 
-.emotion-35.Mui-disabled {
+.emotion-41.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-36 {
+.emotion-44 {
   max-width: 100%;
   font-family: Lato,sans-serif;
   font-size: 0.7545rem;
@@ -1145,12 +1320,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   text-transform: uppercase;
 }
 
-.emotion-36.Mui-disabled {
+.emotion-44.Mui-disabled {
   opacity: 0.38;
   pointer-events: none;
 }
 
-.emotion-36 .MuiChip-avatar {
+.emotion-44 .MuiChip-avatar {
   margin-left: 5px;
   margin-right: -6px;
   width: 24px;
@@ -1159,17 +1334,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   font-size: 0.6964rem;
 }
 
-.emotion-36 .MuiChip-avatarColorPrimary {
+.emotion-44 .MuiChip-avatarColorPrimary {
   color: #fff;
   background-color: rgb(35, 85, 94);
 }
 
-.emotion-36 .MuiChip-avatarColorSecondary {
+.emotion-44 .MuiChip-avatarColorSecondary {
   color: #fff;
   background-color: rgb(65, 10, 46);
 }
 
-.emotion-36 .MuiChip-avatarSmall {
+.emotion-44 .MuiChip-avatarSmall {
   margin-left: 4px;
   margin-right: -4px;
   width: 18px;
@@ -1177,12 +1352,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   font-size: 0.5804rem;
 }
 
-.emotion-36 .MuiChip-icon {
+.emotion-44 .MuiChip-icon {
   margin-left: 5px;
   margin-right: -6px;
 }
 
-.emotion-36 .MuiChip-deleteIcon {
+.emotion-44 .MuiChip-deleteIcon {
   -webkit-tap-highlight-color: transparent;
   color: rgba(10, 10, 11, 0.26);
   font-size: 22px;
@@ -1190,23 +1365,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   margin: 0 5px 0 -6px;
 }
 
-.emotion-36 .MuiChip-deleteIcon:hover {
+.emotion-44 .MuiChip-deleteIcon:hover {
   color: rgba(10, 10, 11, 0.4);
 }
 
-.emotion-36 .MuiChip-icon {
+.emotion-44 .MuiChip-icon {
   color: #bcbcbc;
 }
 
-.emotion-36:hover {
+.emotion-44:hover {
   font-weight: bold;
 }
 
-.emotion-36:hover {
+.emotion-44:hover {
   font-weight: bold;
 }
 
-.emotion-37 {
+.emotion-45 {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 12px;
@@ -1214,7 +1389,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   white-space: nowrap;
 }
 
-.emotion-38 {
+.emotion-46 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1229,7 +1404,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   margin-top: 32px;
 }
 
-.emotion-39 {
+.emotion-47 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1288,57 +1463,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   font-weight: bold;
 }
 
-.emotion-39::-moz-focus-inner {
+.emotion-47::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-39.Mui-disabled {
+.emotion-47.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-39 {
+  .emotion-47 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-39:hover {
+.emotion-47:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-39.Mui-disabled {
+.emotion-47.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-39:hover {
+.emotion-47:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-39:hover {
+  .emotion-47:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-39:active {
+.emotion-47:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-39.Mui-focusVisible {
+.emotion-47.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-39.Mui-disabled {
+.emotion-47.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-39:hover {
+  .emotion-47:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -1346,19 +1521,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   }
 }
 
-.emotion-39.MuiButton-loading {
+.emotion-47.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-39:hover {
+.emotion-47:hover {
   colors: #337a87;
 }
 
-.emotion-39.MuiButton-text {
+.emotion-47.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-40 {
+.emotion-48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1377,7 +1552,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
   flex: 0 0 auto;
 }
 
-.emotion-40>:not(style)~:not(style) {
+.emotion-48>:not(style)~:not(style) {
   margin-left: 8px;
 }
 
@@ -1419,62 +1594,70 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
       >
         <form
           autocomplete="off"
-          class=""
+          class="emotion-6"
           novalidate=""
         >
           <div
-            class="MuiFormControl-root required emotion-6"
+            class="MuiFormControl-root required emotion-7"
             style="width: 400px;"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-7"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-8"
               data-shrink="false"
               for="email"
             >
               Email or User ID
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-8"
-              required=""
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-9"
             >
               <input
                 aria-invalid="false"
                 autocomplete="off"
-                class="MuiInputBase-input MuiInput-input emotion-9"
+                class="MuiInputBase-input MuiOutlinedInput-input emotion-10"
                 id="email"
                 name="email"
                 placeholder="Email"
-                required=""
                 type="text"
                 value=""
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-11"
+              >
+                <legend
+                  class="emotion-12"
+                >
+                  <span>
+                    Email or User ID
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <p
-              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-10"
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-13"
             />
           </div>
           <div
-            class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered emotion-11"
+            class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered emotion-14"
             style="min-height: 0px;"
           >
             <div
-              class="MuiCollapse-wrapper MuiCollapse-vertical emotion-12"
+              class="MuiCollapse-wrapper MuiCollapse-vertical emotion-15"
             >
               <div
-                class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-13"
+                class="MuiCollapse-wrapperInner MuiCollapse-vertical emotion-16"
               >
-                <div
-                  class="edit-pass"
-                >
+                <div>
                   <div
                     class="password-wrapper"
                   >
                     <div
-                      class="MuiFormControl-root emotion-6"
+                      class="MuiFormControl-root emotion-7"
                       style="width: 400px;"
                     >
                       <label
-                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-15"
+                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-18"
                         data-shrink="true"
                         for="password"
                       >
@@ -1484,7 +1667,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                           Optional
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small emotion-16"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small emotion-19"
                             data-mui-internal-clone-element="true"
                             data-testid="InfoOutlinedIcon"
                             focusable="false"
@@ -1497,12 +1680,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                         </div>
                       </label>
                       <div
-                        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-8"
+                        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-20"
                       >
                         <input
                           aria-invalid="false"
                           autocomplete="off"
-                          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-9"
+                          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-21"
                           id="password"
                           name="password"
                           placeholder="Password"
@@ -1510,20 +1693,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                           value=""
                         />
                         <div
-                          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-19"
+                          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-22"
                         >
                           <button
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-20"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-23"
                             id=":r2:"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="MuiIconButton-loadingIndicator emotion-21"
+                              class="MuiIconButton-loadingIndicator emotion-24"
                             />
                             <svg
                               aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-22"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-25"
                               data-testid="VisibilityOffIcon"
                               focusable="false"
                               viewBox="0 0 24 24"
@@ -1534,17 +1717,45 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                             </svg>
                           </button>
                         </div>
+                        <fieldset
+                          aria-hidden="true"
+                          class="MuiOutlinedInput-notchedOutline emotion-11"
+                        >
+                          <legend
+                            class="emotion-27"
+                          >
+                            <span>
+                              <div
+                                class="flexbox center-aligned"
+                              >
+                                Optional
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small emotion-19"
+                                  data-mui-internal-clone-element="true"
+                                  data-testid="InfoOutlinedIcon"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
+                                  />
+                                </svg>
+                              </div>
+                            </span>
+                          </legend>
+                        </fieldset>
                       </div>
                       <p
-                        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-10"
+                        class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-13"
                       />
                     </div>
                     <div
                       class="pass-buttons"
                     >
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-24"
-                        id=":r3:"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-30"
+                        id=":r4:"
                         tabindex="0"
                         type="button"
                       >
@@ -1568,20 +1779,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                   </div>
                 </div>
                 <label
-                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-25"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-31"
                 >
                   <span
-                    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-26"
+                    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-32"
                   >
                     <input
-                      class="PrivateSwitchBase-input emotion-27"
+                      class="PrivateSwitchBase-input emotion-33"
                       data-indeterminate="false"
                       name="shouldResetPassword"
                       type="checkbox"
                     />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-22"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-25"
                       data-testid="CheckBoxOutlineBlankIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -1592,29 +1803,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                     </svg>
                   </span>
                   <span
-                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-29"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-35"
                   >
                     Send an email to the user containing a link to reset the password
                   </span>
                 </label>
                 <div
-                  class="flexbox"
+                  class="flexbox margin-top-small"
                   style="align-items: flex-end;"
                 >
                   <div
-                    class="MuiFormControl-root emotion-6"
+                    class="MuiFormControl-root emotion-7"
                     id="roles-form"
                     style="max-width: 400px;"
                   >
                     <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-7"
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-8"
                       data-shrink="false"
                       id="roles-selection-label"
                     >
                       Roles
                     </label>
                     <div
-                      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiSelect-root emotion-32"
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl MuiSelect-root emotion-38"
                       required=""
                     >
                       <div
@@ -1623,7 +1834,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                         aria-haspopup="listbox"
                         aria-labelledby="roles-selection-label roles-selector-0"
                         aria-required="true"
-                        class="MuiSelect-select MuiSelect-standard Mui-disabled MuiSelect-multiple MuiInputBase-input MuiInput-input Mui-disabled emotion-33"
+                        class="MuiSelect-select MuiSelect-outlined Mui-disabled MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input Mui-disabled emotion-39"
                         id="roles-selector-0"
                         role="combobox"
                       >
@@ -1637,7 +1848,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                       <input
                         aria-hidden="true"
                         aria-invalid="false"
-                        class="MuiSelect-nativeInput emotion-34"
+                        class="MuiSelect-nativeInput emotion-40"
                         disabled=""
                         required=""
                         tabindex="-1"
@@ -1645,7 +1856,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                       />
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconStandard Mui-disabled emotion-35"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined Mui-disabled emotion-41"
                         data-testid="ArrowDropDownIcon"
                         focusable="false"
                         viewBox="0 0 24 24"
@@ -1654,6 +1865,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                           d="M7 10l5 5 5-5z"
                         />
                       </svg>
+                      <fieldset
+                        aria-hidden="true"
+                        class="MuiOutlinedInput-notchedOutline emotion-11"
+                      >
+                        <legend
+                          class="emotion-12"
+                        >
+                          <span>
+                            Roles
+                             
+                            *
+                          </span>
+                        </legend>
+                      </fieldset>
                     </div>
                   </div>
                   <div
@@ -1661,10 +1886,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
                     data-mui-internal-clone-element="true"
                   >
                     <div
-                      class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault margin-left-small emotion-36"
+                      class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault margin-left-small emotion-44"
                     >
                       <span
-                        class="MuiChip-label MuiChip-labelMedium emotion-37"
+                        class="MuiChip-label MuiChip-labelMedium emotion-45"
                       >
                         Enterprise
                       </span>
@@ -1675,12 +1900,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
             </div>
           </div>
           <div
-            class="button-wrapper emotion-38 "
+            class="button-wrapper emotion-46 "
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-39"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-47"
               disabled=""
-              id=":r6:"
+              id=":r7:"
               tabindex="-1"
               type="submit"
             >
@@ -1690,7 +1915,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-33:focus::-ms-input-
         </form>
       </div>
       <div
-        class="MuiDialogActions-root MuiDialogActions-spacing emotion-40"
+        class="MuiDialogActions-root MuiDialogActions-spacing emotion-48"
       />
     </div>
   </div>
diff --git a/frontend/src/js/components/settings/user-management/twofactorauth-steps/AuthSetup.tsx b/frontend/src/js/components/settings/user-management/twofactorauth-steps/AuthSetup.tsx
index 4d1440eb..a4f6f4aa 100644
--- a/frontend/src/js/components/settings/user-management/twofactorauth-steps/AuthSetup.tsx
+++ b/frontend/src/js/components/settings/user-management/twofactorauth-steps/AuthSetup.tsx
@@ -86,7 +86,7 @@ export const AuthSetup = ({ currentUser, handle2FAState, has2FA, onClose, qrImag
                 </div>
               ) : (
                 <>
-                  <Form showButtons={!validating2fa} buttonColor="primary" onSubmit={validate2faSetup} submitLabel="Verify">
+                  <Form className="margin-text-small" showButtons={!validating2fa} buttonColor="primary" onSubmit={validate2faSetup} submitLabel="Verify">
                     <TextInput hint="Verification code" label="Verification code" id="token2fa" validations="isLength:6,isNumeric" required={true} />
                   </Form>
                   {validating2fa && (
diff --git a/frontend/src/js/components/settings/user-management/twofactorauth-steps/__snapshots__/AuthSetup.test.tsx.snap b/frontend/src/js/components/settings/user-management/twofactorauth-steps/__snapshots__/AuthSetup.test.tsx.snap
index 5fcb9f92..213a13af 100644
--- a/frontend/src/js/components/settings/user-management/twofactorauth-steps/__snapshots__/AuthSetup.test.tsx.snap
+++ b/frontend/src/js/components/settings/user-management/twofactorauth-steps/__snapshots__/AuthSetup.test.tsx.snap
@@ -15,7 +15,6 @@ exports[`AuthSetup Component renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
@@ -43,6 +42,13 @@ exports[`AuthSetup Component renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
 .emotion-1.Mui-focused {
@@ -79,6 +85,7 @@ exports[`AuthSetup Component renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
 .emotion-2.Mui-disabled {
@@ -86,77 +93,30 @@ exports[`AuthSetup Component renders correctly 1`] = `
   cursor: default;
 }
 
-label+.emotion-2 {
-  margin-top: 16px;
-}
-
-.emotion-2::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-2.Mui-error::before,
-.emotion-2.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-2::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-2:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-2:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-2:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-2.Mui-disabled:before {
-  border-bottom-style: dotted;
+.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-2::after {
-  border-bottom: 2px solid #337a87;
+.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-2:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-2.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-2:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
-}
-
-.emotion-2:after {
-  border-bottom: 2px solid #337a87;
+.emotion-2.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
 .emotion-3 {
@@ -177,6 +137,7 @@ label+.emotion-2 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
 .emotion-3::-webkit-input-placeholder {
@@ -248,7 +209,52 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   animation-name: mui-auto-fill;
 }
 
+.emotion-3:-webkit-autofill {
+  border-radius: inherit;
+}
+
 .emotion-4 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-5 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-5>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-6 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -259,17 +265,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-4.Mui-disabled {
+.emotion-6.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-4.Mui-error {
+.emotion-6.Mui-error {
   color: #ab1000;
 }
 
-.emotion-5 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -284,7 +292,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   margin-top: 32px;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -343,57 +351,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-6::-moz-focus-inner {
+.emotion-8::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-6.Mui-disabled {
+.emotion-8.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-6 {
+  .emotion-8 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-6.Mui-disabled {
+.emotion-8.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-6:hover {
+  .emotion-8:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-6:active {
+.emotion-8:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-6.Mui-focusVisible {
+.emotion-8.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-6.Mui-disabled {
+.emotion-8.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-6:hover {
+  .emotion-8:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -401,19 +409,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   }
 }
 
-.emotion-6.MuiButton-loading {
+.emotion-8.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   colors: #337a87;
 }
 
-.emotion-6.MuiButton-text {
+.emotion-8.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-7 {
+.emotion-9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -473,33 +481,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   padding: 10px 15px;
 }
 
-.emotion-7::-moz-focus-inner {
+.emotion-9::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-7 {
+  .emotion-9 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-7.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-7:hover {
+  .emotion-9:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -507,19 +515,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   }
 }
 
-.emotion-7.MuiButton-loading {
+.emotion-9.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-7:hover {
+.emotion-9:hover {
   colors: #337a87;
 }
 
-.emotion-7.MuiButton-text {
+.emotion-9.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-8 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -578,57 +586,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   font-weight: bold;
 }
 
-.emotion-8::-moz-focus-inner {
+.emotion-10::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-10.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-8 {
+  .emotion-10 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-8:hover {
+.emotion-10:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-10.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-8:hover {
+.emotion-10:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-8:hover {
+  .emotion-10:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-8:active {
+.emotion-10:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-8.Mui-focusVisible {
+.emotion-10.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-8.Mui-disabled {
+.emotion-10.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-8:hover {
+  .emotion-10:hover {
     --variant-containedBg: rgb(65, 10, 46);
     --variant-textBg: rgba(93, 15, 67, 0.04);
     --variant-outlinedBorder: #5d0f43;
@@ -636,15 +644,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
   }
 }
 
-.emotion-8.MuiButton-loading {
+.emotion-10.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-8:hover {
+.emotion-10:hover {
   colors: #337a87;
 }
 
-.emotion-8.MuiButton-text {
+.emotion-10.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -691,7 +699,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
           <div>
             Type in the generated code in the input field below and click Verify.
             <form
-              class=""
+              class="margin-text-small"
               novalidate=""
             >
               <div
@@ -699,36 +707,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
                 style="width: 400px;"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-1"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-1"
                   data-shrink="false"
                   for="token2fa"
                 >
                   Verification code
                 </label>
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-2"
-                  required=""
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-2"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input emotion-3"
+                    class="MuiInputBase-input MuiOutlinedInput-input emotion-3"
                     id="token2fa"
                     name="token2fa"
                     placeholder="Verification code"
-                    required=""
                     type="text"
                     value=""
                   />
+                  <fieldset
+                    aria-hidden="true"
+                    class="MuiOutlinedInput-notchedOutline emotion-4"
+                  >
+                    <legend
+                      class="emotion-5"
+                    >
+                      <span>
+                        Verification code
+                      </span>
+                    </legend>
+                  </fieldset>
                 </div>
                 <p
-                  class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-4"
+                  class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-6"
                 />
               </div>
               <div
-                class="button-wrapper emotion-5 "
+                class="button-wrapper emotion-7 "
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-6"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-8"
                   disabled=""
                   id=":r0:"
                   tabindex="-1"
@@ -754,7 +772,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
       style="justify-content: flex-end;"
     >
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-7"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-9"
         id=":r1:"
         style="margin-right: 10px;"
         tabindex="0"
@@ -763,7 +781,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
         Cancel
       </button>
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-8"
+        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-10"
         disabled=""
         id=":r2:"
         tabindex="-1"
diff --git a/frontend/src/js/components/settings/webhooks/Configuration.tsx b/frontend/src/js/components/settings/webhooks/Configuration.tsx
index 89cfbfe6..f45b2e99 100644
--- a/frontend/src/js/components/settings/webhooks/Configuration.tsx
+++ b/frontend/src/js/components/settings/webhooks/Configuration.tsx
@@ -30,11 +30,12 @@ import { HELPTOOLTIPS, MenderHelpTooltip } from '@northern.tech/helptips/HelpToo
 import { BENEFITS, EXTERNAL_PROVIDER, canAccess } from '@northern.tech/store/constants';
 import { getTenantCapabilities } from '@northern.tech/store/selectors';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   buttonWrapper: {
     '&.button-wrapper': { justifyContent: 'initial' },
     [`.${buttonClasses.root}`]: { lineHeight: 'initial' }
-  }
+  },
+  formWrapper: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), paddingTop: theme.spacing(4) }
 }));
 
 export const availableScopes = {
@@ -60,7 +61,7 @@ const UrlInput = props => {
 const WebhookEventsSelector = ({ canSelectEvents }: { canSelectEvents: boolean }) => (
   <>
     <div className="flexbox center-aligned margin-top">
-      <h4 className="margin-right-small">Webhook Events</h4>
+      <h4 className="margin-none margin-right-small">Webhook Events</h4>
       <InfoHintContainer>
         <EnterpriseNotification id={BENEFITS.webhookEvents.id} />
         <MenderHelpTooltip id={HELPTOOLTIPS.webhookEvents.id} />
@@ -123,10 +124,10 @@ const WebhookConfiguration = ({ onCancel, onSubmit }: { onCancel: () => void; on
 
   return (
     <Drawer anchor="right" open PaperProps={{ style: { minWidth: 600, width: '50vw' } }}>
-      <DrawerTitle title="Webhook details" postTitle={<MenderHelpTooltip id={HELPTOOLTIPS.webhooks.id} />} onClose={onCancel} />
+      <DrawerTitle title="Webhook details" postTitle={<MenderHelpTooltip className="margin-left-small" id={HELPTOOLTIPS.webhooks.id} />} onClose={onCancel} />
       <Divider />
       <Form
-        className="flexbox column"
+        className={classes.formWrapper}
         classes={classes}
         defaultValues={defaultValues}
         handleCancel={onCancel}
@@ -141,7 +142,7 @@ const WebhookConfiguration = ({ onCancel, onSubmit }: { onCancel: () => void; on
         <WebhookEventsSelector canSelectEvents={canSelectEvents} />
         <div className="flexbox">
           <TextInput label="Secret (optional)" id="secret" validations="isHexadecimal" />
-          <InfoHintContainer style={{ alignItems: 'end' }}>
+          <InfoHintContainer style={{ alignItems: 'center' }}>
             <MenderHelpTooltip id={HELPTOOLTIPS.webhookSecret.id} />
             <DocsTooltip id={DOCSTIPS.webhookSecret.id} />
           </InfoHintContainer>
diff --git a/frontend/src/js/components/tenants/TenantCreateForm.tsx b/frontend/src/js/components/tenants/TenantCreateForm.tsx
index f23c8f03..c571403e 100644
--- a/frontend/src/js/components/tenants/TenantCreateForm.tsx
+++ b/frontend/src/js/components/tenants/TenantCreateForm.tsx
@@ -16,7 +16,7 @@ import { useFormContext } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { Divider, Drawer } from '@mui/material';
+import { Divider, Drawer, formControlLabelClasses } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 
 import { DrawerTitle } from '@northern.tech/common-ui/DrawerTitle';
@@ -45,12 +45,15 @@ const useStyles = makeStyles()(theme => ({
       justifyContent: 'start'
     }
   },
-  userInputContainer: { maxWidth: 500 },
-  devLimitInput: { marginTop: 10, maxWidth: 150, minWidth: 130 },
-  helpTooltip: {
-    marginLeft: theme.spacing(9),
-    alignSelf: 'flex-end'
-  }
+  formWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    paddingTop: theme.spacing(4),
+    [`.${formControlLabelClasses.root}`]: { marginTop: 0 },
+    '.required .relative': { marginLeft: theme.spacing(10) }
+  },
+  devLimitInput: { marginTop: 10, maxWidth: 150, minWidth: 130 }
 }));
 
 interface UserInputsProps {
@@ -64,7 +67,6 @@ const newUserInfo = 'This will create a new user as admin of the new tenant.';
 
 const UserInputs = (props: UserInputsProps) => {
   const { setAdminExists, adminExists } = props;
-  const { classes } = useStyles();
   const [emailInfoText, setEmailInfoText] = useState<string>('');
   const checkEmailExists = async (email: string) => {
     const response = await Api.get(`${useradmApiUrlv1}/users/exists?email=${email}`);
@@ -98,31 +100,28 @@ const UserInputs = (props: UserInputsProps) => {
   }, [enteredEmail, setAdminExists]);
 
   return (
-    <div className={classes.userInputContainer}>
-      <div className="flexbox margin-bottom-small">
+    <>
+      <div className="flexbox center-aligned">
         <TextInput validations="isEmail,trim" required id="email" label="Admin user" />
-        <div className={classes.helpTooltip}>
-          <MenderHelpTooltip id={HELPTOOLTIPS.tenantAdmin.id} />
-        </div>
+        <MenderHelpTooltip className="required" id={HELPTOOLTIPS.tenantAdmin.id} />
       </div>
       {!adminExists && (
         <>
           <PasswordInput
+            className="margin-bottom-small"
             label={<PasswordLabel />}
             id="password"
-            validations={`isLength:8,isNot:${enteredEmail}`}
             InputLabelProps={{ shrink: true }}
-            edit={false}
+            validations={`isLength:8,isNot:${enteredEmail}`}
             placeholder="Password"
             create
             generate
-            className="margin-bottom-small"
           />
-          <FormCheckbox className="margin-top-none" id="send_reset_password" label="Send an email to the user containing a link to reset the password" />
+          <FormCheckbox id="send_reset_password" label="Send an email to the user containing a link to reset the password" />
         </>
       )}
       {emailInfoText ? <InfoHint content={emailInfoText} /> : <div />}
-    </div>
+    </>
   );
 };
 
@@ -158,6 +157,7 @@ export const TenantCreateForm = (props: TenantCreateFormProps) => {
       <Form
         initialValues={tenantAdminDefaults}
         classes={classes}
+        className={classes.formWrapper}
         handleCancel={() => onCloseClick()}
         showButtons
         buttonColor="secondary"
@@ -165,39 +165,30 @@ export const TenantCreateForm = (props: TenantCreateFormProps) => {
         submitLabel="Create tenant"
         autocomplete="off"
       >
-        <div className="flexbox column">
-          <TextInput required validations="isLength:3,trim" id="name" hint="Name" label="Name" className="margin-bottom-large margin-top-large" />
-          <UserInputs adminExists={adminExists} setAdminExists={setAdminExists} />
-          <div className="flexbox margin-top-large margin-bottom-large">
-            <TextInput
-              required
-              id="device_limit"
-              hint="1000"
-              type="number"
-              label="Set device limit"
-              className={classes.devLimitInput}
-              numericValidations={numericValidation}
-            />
-            <div className={classes.helpTooltip}>
-              <MenderHelpTooltip id={HELPTOOLTIPS.subTenantDeviceLimit.id} />
-            </div>
-          </div>
-          <div className="flexbox">
-            <FormCheckbox id="binary_delta" label="Enable Delta Artifact generation" />
-            <div className={classes.helpTooltip}>
-              <MenderHelpTooltip id={HELPTOOLTIPS.subTenantDeltaArtifactGeneration.id} />
-            </div>
-          </div>
-          <div className="flexbox">
-            <FormCheckbox id="sso" label="Restrict to Service Provider’s Single Sign-On settings" />
-            <div className={classes.helpTooltip}>
-              <MenderHelpTooltip id={HELPTOOLTIPS.subTenantSSO.id} />
-            </div>
-          </div>
-
-          <div className="margin-top-x-small margin-bottom">
-            <Link to="/settings/organization-and-billing">View Single Sign-On settings</Link>
-          </div>
+        <TextInput required validations="isLength:3,trim" id="name" hint="Name" label="Name" />
+        <UserInputs adminExists={adminExists} setAdminExists={setAdminExists} />
+        <div className="flexbox center-aligned">
+          <TextInput
+            required
+            id="device_limit"
+            hint="1000"
+            type="number"
+            label="Set device limit"
+            className={classes.devLimitInput}
+            numericValidations={numericValidation}
+          />
+          <MenderHelpTooltip className="required" id={HELPTOOLTIPS.subTenantDeviceLimit.id} />
+        </div>
+        <div className="flexbox center-aligned">
+          <FormCheckbox id="binary_delta" label="Enable Delta Artifact generation" />
+          <MenderHelpTooltip id={HELPTOOLTIPS.subTenantDeltaArtifactGeneration.id} />
+        </div>
+        <div className="flexbox center-aligned">
+          <FormCheckbox id="sso" label="Restrict to Service Provider’s Single Sign-On settings" />
+          <MenderHelpTooltip className="flexbox center-aligned" id={HELPTOOLTIPS.subTenantSSO.id} />
+        </div>
+        <div className="margin-top-x-small margin-bottom">
+          <Link to="/settings/organization-and-billing">View Single Sign-On settings</Link>
         </div>
       </Form>
     </Drawer>
diff --git a/frontend/src/js/components/tenants/__snapshots__/TenantsForm.test.tsx.snap b/frontend/src/js/components/tenants/__snapshots__/TenantsForm.test.tsx.snap
index 81ec1b93..c43b7136 100644
--- a/frontend/src/js/components/tenants/__snapshots__/TenantsForm.test.tsx.snap
+++ b/frontend/src/js/components/tenants/__snapshots__/TenantsForm.test.tsx.snap
@@ -195,6 +195,26 @@ exports[`TenantsForm renders correctly 1`] = `
 }
 
 .emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 16px;
+  padding-top: 32px;
+}
+
+.emotion-7 .MuiFormControlLabel-root {
+  margin-top: 0;
+}
+
+.emotion-7 .required .relative {
+  margin-left: 80px;
+}
+
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -208,11 +228,10 @@ exports[`TenantsForm renders correctly 1`] = `
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -236,25 +255,32 @@ exports[`TenantsForm renders correctly 1`] = `
   transform: translate(0, 20px) scale(1);
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
 }
 
-.emotion-8.Mui-focused {
+.emotion-9.Mui-focused {
   color: #337a87;
 }
 
-.emotion-8.Mui-disabled {
+.emotion-9.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-8.Mui-error {
+.emotion-9.Mui-error {
   color: #ab1000;
 }
 
-.emotion-8.Mui-focused {
+.emotion-9.Mui-focused {
   color: #337a87;
 }
 
-.emotion-9 {
+.emotion-10 {
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -272,87 +298,41 @@ exports[`TenantsForm renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   position: relative;
+  border-radius: 4px;
 }
 
-.emotion-9.Mui-disabled {
+.emotion-10.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-label+.emotion-9 {
-  margin-top: 16px;
-}
-
-.emotion-9::after {
-  left: 0;
-  bottom: 0;
-  content: "";
-  position: absolute;
-  right: 0;
-  -webkit-transform: scaleX(0);
-  -moz-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-9.Mui-focused:after {
-  -webkit-transform: scaleX(1) translateX(0);
-  -moz-transform: scaleX(1) translateX(0);
-  -ms-transform: scaleX(1) translateX(0);
-  transform: scaleX(1) translateX(0);
-}
-
-.emotion-9.Mui-error::before,
-.emotion-9.Mui-error::after {
-  border-bottom-color: #ab1000;
-}
-
-.emotion-9::before {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
-  left: 0;
-  bottom: 0;
-  content: "\\00a0";
-  position: absolute;
-  right: 0;
-  -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-}
-
-.emotion-9:hover:not(.Mui-disabled, .Mui-error):before {
-  border-bottom: 2px solid rgba(10, 10, 11, 0.78);
+.emotion-10:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
 }
 
 @media (hover: none) {
-  .emotion-9:hover:not(.Mui-disabled, .Mui-error):before {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  .emotion-10:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-9.Mui-disabled:before {
-  border-bottom-style: dotted;
-}
-
-.emotion-9::after {
-  border-bottom: 2px solid #337a87;
+.emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
 }
 
-.emotion-9:before {
-  border-bottom: 1px solid rgb(224, 224, 224);
+.emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
 }
 
-.emotion-9:hover:not($disabled):before {
-  border-bottom: 2px solid #337a87!important;
+.emotion-10.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
 }
 
-.emotion-9:after {
-  border-bottom: 2px solid #337a87;
+.emotion-10.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-10 {
+.emotion-11 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -370,78 +350,124 @@ label+.emotion-9 {
   animation-name: mui-auto-fill-cancel;
   -webkit-animation-duration: 10ms;
   animation-duration: 10ms;
+  padding: 16.5px 14px;
 }
 
-.emotion-10::-webkit-input-placeholder {
+.emotion-11::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10::-moz-placeholder {
+.emotion-11::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10::-ms-input-placeholder {
+.emotion-11::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-10:focus {
+.emotion-11:focus {
   outline: 0;
 }
 
-.emotion-10:invalid {
+.emotion-11:invalid {
   box-shadow: none;
 }
 
-.emotion-10::-webkit-search-decoration {
+.emotion-11::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-10.Mui-disabled {
+.emotion-11.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-10:-webkit-autofill {
+.emotion-11:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-11 {
+.emotion-11:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-12 {
+  text-align: left;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: -5px;
+  left: 0;
+  margin: 0;
+  padding: 0 8px;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.emotion-13 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+}
+
+.emotion-13>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-14 {
   color: rgba(0, 0, 0, 0.54);
   font-family: Lato,sans-serif;
   font-weight: 400;
@@ -452,28 +478,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
+  margin-left: 14px;
+  margin-right: 14px;
 }
 
-.emotion-11.Mui-disabled {
+.emotion-14.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-11.Mui-error {
+.emotion-14.Mui-error {
   color: #ab1000;
 }
 
-.emotion-12 {
-  max-width: 500px;
-}
-
-.emotion-18 {
-  margin-left: 72px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-}
-
-.emotion-19 {
+.emotion-22 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -491,15 +508,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   color: #337a87;
 }
 
-.emotion-19 iconButton {
+.emotion-22 iconButton {
   margin-right: 8px;
 }
 
-.emotion-19.read {
+.emotion-22.read {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-20 {
+.emotion-23 {
   position: absolute;
   top: -5px;
   bottom: 0;
@@ -509,11 +526,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   border-radius: 50%;
 }
 
-.emotion-20.read {
+.emotion-23.read {
   border-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-22 {
+.emotion-25 {
   color: rgba(0, 0, 0, 0.54);
   line-height: 1.4375em;
   font-family: Lato,sans-serif;
@@ -543,25 +560,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   max-width: 133%;
   -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
   transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  z-index: 1;
+  pointer-events: none;
+  -webkit-transform: translate(14px, 16px) scale(1);
+  -moz-transform: translate(14px, 16px) scale(1);
+  -ms-transform: translate(14px, 16px) scale(1);
+  transform: translate(14px, 16px) scale(1);
+  max-width: calc(100% - 24px);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: auto;
+  max-width: calc(133% - 32px);
+  -webkit-transform: translate(14px, -9px) scale(0.75);
+  -moz-transform: translate(14px, -9px) scale(0.75);
+  -ms-transform: translate(14px, -9px) scale(0.75);
+  transform: translate(14px, -9px) scale(0.75);
 }
 
-.emotion-22.Mui-focused {
+.emotion-25.Mui-focused {
   color: #337a87;
 }
 
-.emotion-22.Mui-disabled {
+.emotion-25.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-22.Mui-error {
+.emotion-25.Mui-error {
   color: #ab1000;
 }
 
-.emotion-22.Mui-focused {
+.emotion-25.Mui-focused {
   color: #337a87;
 }
 
-.emotion-23 {
+.emotion-26 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -578,11 +612,159 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   font-size: 1.1607rem;
 }
 
-.emotion-23 iconButton {
+.emotion-26 iconButton {
   margin-right: 8px;
 }
 
-.emotion-26 {
+.emotion-27 {
+  line-height: 1.4375em;
+  font-family: Lato,sans-serif;
+  font-weight: 400;
+  font-size: 0.9286rem;
+  color: rgba(10, 10, 11, 0.78);
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 4px;
+  padding-right: 14px;
+}
+
+.emotion-27.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+  cursor: default;
+}
+
+.emotion-27:hover .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(10, 10, 11, 0.78);
+}
+
+@media (hover: none) {
+  .emotion-27:hover .MuiOutlinedInput-notchedOutline {
+    border-color: rgba(0, 0, 0, 0.23);
+  }
+}
+
+.emotion-27.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-width: 2px;
+}
+
+.emotion-27.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #337a87;
+}
+
+.emotion-27.Mui-error .MuiOutlinedInput-notchedOutline {
+  border-color: #ab1000;
+}
+
+.emotion-27.Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: rgba(0, 0, 0, 0.26);
+}
+
+.emotion-28 {
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0;
+  width: 100%;
+  -webkit-animation-name: mui-auto-fill-cancel;
+  animation-name: mui-auto-fill-cancel;
+  -webkit-animation-duration: 10ms;
+  animation-duration: 10ms;
+  padding: 16.5px 14px;
+  padding-right: 0;
+}
+
+.emotion-28::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-28::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-28::-ms-input-placeholder {
+  color: currentColor;
+  opacity: 0.42;
+  -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-28:focus {
+  outline: 0;
+}
+
+.emotion-28:invalid {
+  box-shadow: none;
+}
+
+.emotion-28::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-webkit-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-moz-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28::-ms-input-placeholder {
+  opacity: 0!important;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-webkit-input-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-moz-placeholder {
+  opacity: 0.42;
+}
+
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-28:focus::-ms-input-placeholder {
+  opacity: 0.42;
+}
+
+.emotion-28.Mui-disabled {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
+}
+
+.emotion-28:-webkit-autofill {
+  -webkit-animation-duration: 5000s;
+  animation-duration: 5000s;
+  -webkit-animation-name: mui-auto-fill;
+  animation-name: mui-auto-fill;
+}
+
+.emotion-28:-webkit-autofill {
+  border-radius: inherit;
+}
+
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -597,7 +779,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin-left: 8px;
 }
 
-.emotion-31 {
+.emotion-34 {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  -webkit-transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  transition: max-width 50ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+  white-space: nowrap;
+  max-width: 100%;
+  -webkit-transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+  transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+}
+
+.emotion-34>span {
+  padding-left: 5px;
+  padding-right: 5px;
+  display: inline-block;
+  opacity: 0;
+  visibility: visible;
+}
+
+.emotion-37 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -657,33 +865,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   padding: 10px 15px;
 }
 
-.emotion-31::-moz-focus-inner {
+.emotion-37::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-31.Mui-disabled {
+.emotion-37.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-31 {
+  .emotion-37 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-31:hover {
+.emotion-37:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-31.Mui-disabled {
+.emotion-37.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-31:hover {
+  .emotion-37:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -691,19 +899,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   }
 }
 
-.emotion-31.MuiButton-loading {
+.emotion-37.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-31:hover {
+.emotion-37:hover {
   colors: #337a87;
 }
 
-.emotion-31.MuiButton-text {
+.emotion-37.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-32 {
+.emotion-38 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -720,15 +928,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin-top: 18px;
 }
 
-.emotion-32.Mui-disabled {
+.emotion-38.Mui-disabled {
   cursor: default;
 }
 
-.emotion-32 .MuiFormControlLabel-label.Mui-disabled {
+.emotion-38 .MuiFormControlLabel-label.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-33 {
+.emotion-39 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -767,42 +975,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-33::-moz-focus-inner {
+.emotion-39::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-33.Mui-disabled {
+.emotion-39.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-33 {
+  .emotion-39 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-33:hover {
+.emotion-39:hover {
   background-color: rgba(51, 122, 135, 0.04);
 }
 
-.emotion-33.Mui-checked,
-.emotion-33.MuiCheckbox-indeterminate {
+.emotion-39.Mui-checked,
+.emotion-39.MuiCheckbox-indeterminate {
   color: #337a87;
 }
 
-.emotion-33.Mui-disabled {
+.emotion-39.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: none) {
-  .emotion-33:hover {
+  .emotion-39:hover {
     background-color: transparent;
   }
 }
 
-.emotion-34 {
+.emotion-40 {
   cursor: inherit;
   position: absolute;
   opacity: 0;
@@ -815,7 +1023,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   z-index: 1;
 }
 
-.emotion-36 {
+.emotion-42 {
   margin: 0;
   line-height: 1.5;
   font-family: Lato,sans-serif;
@@ -823,7 +1031,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   font-size: 0.9286rem;
 }
 
-.emotion-37 {
+.emotion-43 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -837,14 +1045,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin: 0;
   border: 0;
   vertical-align: top;
-  margin-top: 18px;
   min-width: 240px;
   margin-top: 10px;
   max-width: 150px;
   min-width: 130px;
 }
 
-.emotion-61 {
+.emotion-66 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -859,14 +1066,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin-top: 32px;
 }
 
-.emotion-62.button-wrapper {
+.emotion-67.button-wrapper {
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: start;
   justify-content: start;
 }
 
-.emotion-63 {
+.emotion-68 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -927,33 +1134,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   margin-right: 8px;
 }
 
-.emotion-63::-moz-focus-inner {
+.emotion-68::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-63.Mui-disabled {
+.emotion-68.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-63 {
+  .emotion-68 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-63:hover {
+.emotion-68:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-63.Mui-disabled {
+.emotion-68.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
 @media (hover: hover) {
-  .emotion-63:hover {
+  .emotion-68:hover {
     --variant-containedBg: rgb(35, 85, 94);
     --variant-textBg: rgba(51, 122, 135, 0.04);
     --variant-outlinedBorder: #337a87;
@@ -961,19 +1168,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   }
 }
 
-.emotion-63.MuiButton-loading {
+.emotion-68.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-63:hover {
+.emotion-68:hover {
   colors: #337a87;
 }
 
-.emotion-63.MuiButton-text {
+.emotion-68.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
-.emotion-64 {
+.emotion-69 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1032,57 +1239,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   font-weight: bold;
 }
 
-.emotion-64::-moz-focus-inner {
+.emotion-69::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-64.Mui-disabled {
+.emotion-69.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-64 {
+  .emotion-69 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-64:hover {
+.emotion-69:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-64.Mui-disabled {
+.emotion-69.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-64:hover {
+.emotion-69:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-64:hover {
+  .emotion-69:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-64:active {
+.emotion-69:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-64.Mui-focusVisible {
+.emotion-69.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-64.Mui-disabled {
+.emotion-69.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-64:hover {
+  .emotion-69:hover {
     --variant-containedBg: rgb(65, 10, 46);
     --variant-textBg: rgba(93, 15, 67, 0.04);
     --variant-outlinedBorder: #5d0f43;
@@ -1090,15 +1297,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
   }
 }
 
-.emotion-64.MuiButton-loading {
+.emotion-69.MuiButton-loading {
   color: transparent;
 }
 
-.emotion-64:hover {
+.emotion-69:hover {
   colors: #337a87;
 }
 
-.emotion-64.MuiButton-text {
+.emotion-69.MuiButton-text {
   color: rgba(10, 10, 11, 0.78);
 }
 
@@ -1170,449 +1377,483 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-10:focus::-ms-input-
       />
       <form
         autocomplete="off"
-        class=""
+        class="emotion-7"
         novalidate=""
       >
         <div
-          class="flexbox column"
+          class="MuiFormControl-root required emotion-8"
+          style="width: 400px;"
         >
+          <label
+            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
+            data-shrink="false"
+            for="name"
+          >
+            Name
+          </label>
           <div
-            class="MuiFormControl-root margin-bottom-large margin-top-large required emotion-7"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-10"
+          >
+            <input
+              aria-invalid="false"
+              class="MuiInputBase-input MuiOutlinedInput-input emotion-11"
+              id="name"
+              name="name"
+              placeholder="Name"
+              type="text"
+              value=""
+            />
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline emotion-12"
+            >
+              <legend
+                class="emotion-13"
+              >
+                <span>
+                  Name
+                </span>
+              </legend>
+            </fieldset>
+          </div>
+          <p
+            class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-14"
+          />
+        </div>
+        <div
+          class="flexbox center-aligned"
+        >
+          <div
+            class="MuiFormControl-root required emotion-8"
             style="width: 400px;"
           >
             <label
-              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-9"
               data-shrink="false"
-              for="name"
+              for="email"
             >
-              Name
+              Admin user
             </label>
             <div
-              class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-9"
-              required=""
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-10"
             >
               <input
                 aria-invalid="false"
-                class="MuiInputBase-input MuiInput-input emotion-10"
-                id="name"
-                name="name"
-                placeholder="Name"
-                required=""
+                class="MuiInputBase-input MuiOutlinedInput-input emotion-11"
+                id="email"
+                name="email"
                 type="text"
                 value=""
               />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-12"
+              >
+                <legend
+                  class="emotion-13"
+                >
+                  <span>
+                    Admin user
+                  </span>
+                </legend>
+              </fieldset>
             </div>
             <p
-              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-11"
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-14"
             />
           </div>
           <div
-            class="emotion-12"
+            class="required"
+            data-mui-internal-clone-element="true"
           >
             <div
-              class="flexbox margin-bottom-small"
+              class="relative"
             >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-22"
+                data-testid="HelpIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
+                />
+              </svg>
               <div
-                class="MuiFormControl-root required emotion-7"
-                style="width: 400px;"
+                class="emotion-23 "
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="margin-bottom-small"
+        >
+          <div
+            class="password-wrapper"
+          >
+            <div
+              class="MuiFormControl-root emotion-8"
+              style="width: 400px;"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-25"
+                data-shrink="true"
+                for="password"
               >
-                <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-8"
-                  data-shrink="false"
-                  for="email"
-                >
-                  Admin user
-                </label>
                 <div
-                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-9"
-                  required=""
+                  class="flexbox center-aligned"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input MuiInput-input emotion-10"
-                    id="email"
-                    name="email"
-                    required=""
-                    type="text"
-                    value=""
-                  />
+                  Optional
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small emotion-26"
+                    data-mui-internal-clone-element="true"
+                    data-testid="InfoOutlinedIcon"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
+                    />
+                  </svg>
                 </div>
-                <p
-                  class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-11"
-                />
-              </div>
+              </label>
               <div
-                class="emotion-18"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-27"
               >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd emotion-28"
+                  id="password"
+                  name="password"
+                  placeholder="Password"
+                  type="password"
+                  value=""
+                />
                 <div
-                  class=""
-                  data-mui-internal-clone-element="true"
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium emotion-29"
                 >
-                  <div
-                    class="relative"
+                  <button
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-3"
+                    id=":r3:"
+                    tabindex="0"
+                    type="button"
                   >
+                    <span
+                      class="MuiIconButton-loadingIndicator emotion-4"
+                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-19"
-                      data-testid="HelpIcon"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
+                      data-testid="VisibilityOffIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
+                        d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z"
                       />
                     </svg>
-                    <div
-                      class="emotion-20 "
-                    />
-                  </div>
+                  </button>
                 </div>
-              </div>
-            </div>
-            <div
-              class="margin-bottom-small"
-            >
-              <div
-                class="password-wrapper"
-              >
-                <div
-                  class="MuiFormControl-root emotion-7"
-                  style="width: 400px;"
+                <fieldset
+                  aria-hidden="true"
+                  class="MuiOutlinedInput-notchedOutline emotion-12"
                 >
-                  <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-22"
-                    data-shrink="true"
-                    for="password"
+                  <legend
+                    class="emotion-34"
                   >
-                    <div
-                      class="flexbox center-aligned"
-                    >
-                      Optional
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small emotion-23"
-                        data-mui-internal-clone-element="true"
-                        data-testid="InfoOutlinedIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
-                        />
-                      </svg>
-                    </div>
-                  </label>
-                  <div
-                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd emotion-9"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd emotion-10"
-                      id="password"
-                      name="password"
-                      placeholder="Password"
-                      type="password"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium emotion-26"
-                    >
-                      <button
-                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-3"
-                        id=":r3:"
-                        tabindex="0"
-                        type="button"
+                    <span>
+                      <div
+                        class="flexbox center-aligned"
                       >
-                        <span
-                          class="MuiIconButton-loadingIndicator emotion-4"
-                        />
+                        Optional
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
-                          data-testid="VisibilityOffIcon"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small emotion-26"
+                          data-mui-internal-clone-element="true"
+                          data-testid="InfoOutlinedIcon"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
                           <path
-                            d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z"
+                            d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
                           />
                         </svg>
-                      </button>
-                    </div>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root MuiFormHelperText-sizeMedium emotion-11"
-                  />
-                </div>
-                <div
-                  class="pass-buttons"
-                >
-                  <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-31"
-                    id=":r4:"
-                    tabindex="0"
-                    type="button"
-                  >
-                    Generate
-                  </button>
-                </div>
-              </div>
-              <div
-                class="help-text"
-                id="pass-strength"
-              >
-                Strength: 
-                <meter
-                  high="3.9"
-                  low="2.5"
-                  max="4"
-                  min="0"
-                  optimum="4"
-                  value="0"
-                />
+                      </div>
+                    </span>
+                  </legend>
+                </fieldset>
               </div>
+              <p
+                class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained emotion-14"
+              />
             </div>
-            <label
-              class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd margin-top-none emotion-32"
+            <div
+              class="pass-buttons"
             >
-              <span
-                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-33"
-              >
-                <input
-                  class="PrivateSwitchBase-input emotion-34"
-                  data-indeterminate="false"
-                  name="send_reset_password"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
-                  data-testid="CheckBoxOutlineBlankIcon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-36"
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary emotion-37"
+                id=":r5:"
+                tabindex="0"
+                type="button"
               >
-                Send an email to the user containing a link to reset the password
-              </span>
-            </label>
-            <div />
+                Generate
+              </button>
+            </div>
           </div>
           <div
-            class="flexbox margin-top-large margin-bottom-large"
+            class="help-text"
+            id="pass-strength"
           >
-            <div
-              class="MuiFormControl-root required emotion-37"
-              style="width: 400px;"
+            Strength: 
+            <meter
+              high="3.9"
+              low="2.5"
+              max="4"
+              min="0"
+              optimum="4"
+              value="0"
+            />
+          </div>
+        </div>
+        <label
+          class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-38"
+        >
+          <span
+            class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-39"
+          >
+            <input
+              class="PrivateSwitchBase-input emotion-40"
+              data-indeterminate="false"
+              name="send_reset_password"
+              type="checkbox"
+            />
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
+              data-testid="CheckBoxOutlineBlankIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
             >
-              <label
-                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-standard emotion-22"
-                data-shrink="true"
-                for="device_limit"
-              >
-                Set device limit
-              </label>
-              <div
-                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl emotion-9"
-                required=""
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input MuiInput-input emotion-10"
-                  id="device_limit"
-                  name="device_limit"
-                  placeholder="1000"
-                  required=""
-                  type="number"
-                  value="0"
-                />
-              </div>
-              <p
-                class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-filled emotion-11"
+              <path
+                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
               />
-            </div>
+            </svg>
+          </span>
+          <span
+            class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-42"
+          >
+            Send an email to the user containing a link to reset the password
+          </span>
+        </label>
+        <div />
+        <div
+          class="flexbox center-aligned"
+        >
+          <div
+            class="MuiFormControl-root required emotion-43"
+            style="width: 400px;"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined emotion-25"
+              data-shrink="true"
+              for="device_limit"
+            >
+              Set device limit
+            </label>
             <div
-              class="emotion-18"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl emotion-10"
             >
-              <div
-                class=""
-                data-mui-internal-clone-element="true"
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiOutlinedInput-input emotion-11"
+                id="device_limit"
+                name="device_limit"
+                placeholder="1000"
+                type="number"
+                value="0"
+              />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline emotion-12"
               >
-                <div
-                  class="relative"
+                <legend
+                  class="emotion-34"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-19"
-                    data-testid="HelpIcon"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
-                    />
-                  </svg>
-                  <div
-                    class="emotion-20 "
-                  />
-                </div>
-              </div>
+                  <span>
+                    Set device limit
+                  </span>
+                </legend>
+              </fieldset>
             </div>
+            <p
+              class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled emotion-14"
+            />
           </div>
           <div
-            class="flexbox"
+            class="required"
+            data-mui-internal-clone-element="true"
           >
-            <label
-              class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-32"
+            <div
+              class="relative"
             >
-              <span
-                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-33"
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-22"
+                data-testid="HelpIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
               >
-                <input
-                  class="PrivateSwitchBase-input emotion-34"
-                  data-indeterminate="false"
-                  name="binary_delta"
-                  type="checkbox"
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
                 />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
-                  data-testid="CheckBoxOutlineBlankIcon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-36"
-              >
-                Enable Delta Artifact generation
-              </span>
-            </label>
-            <div
-              class="emotion-18"
-            >
+              </svg>
               <div
-                class=""
-                data-mui-internal-clone-element="true"
-              >
-                <div
-                  class="relative"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-19"
-                    data-testid="HelpIcon"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
-                    />
-                  </svg>
-                  <div
-                    class="emotion-20 "
-                  />
-                </div>
-              </div>
+                class="emotion-23 "
+              />
             </div>
           </div>
-          <div
-            class="flexbox"
+        </div>
+        <div
+          class="flexbox center-aligned"
+        >
+          <label
+            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-38"
           >
-            <label
-              class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-32"
+            <span
+              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-39"
             >
-              <span
-                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-33"
+              <input
+                class="PrivateSwitchBase-input emotion-40"
+                data-indeterminate="false"
+                name="binary_delta"
+                type="checkbox"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
+                data-testid="CheckBoxOutlineBlankIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
               >
-                <input
-                  class="PrivateSwitchBase-input emotion-34"
-                  data-indeterminate="false"
-                  name="sso"
-                  type="checkbox"
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                 />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
-                  data-testid="CheckBoxOutlineBlankIcon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                  />
-                </svg>
-              </span>
-              <span
-                class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-36"
-              >
-                Restrict to Service Provider’s Single Sign-On settings
-              </span>
-            </label>
+              </svg>
+            </span>
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-42"
+            >
+              Enable Delta Artifact generation
+            </span>
+          </label>
+          <div
+            class=""
+            data-mui-internal-clone-element="true"
+          >
             <div
-              class="emotion-18"
+              class="relative"
             >
-              <div
-                class=""
-                data-mui-internal-clone-element="true"
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-22"
+                data-testid="HelpIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
               >
-                <div
-                  class="relative"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-19"
-                    data-testid="HelpIcon"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
-                    />
-                  </svg>
-                  <div
-                    class="emotion-20 "
-                  />
-                </div>
-              </div>
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
+                />
+              </svg>
+              <div
+                class="emotion-23 "
+              />
             </div>
           </div>
+        </div>
+        <div
+          class="flexbox center-aligned"
+        >
+          <label
+            class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-38"
+          >
+            <span
+              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium emotion-39"
+            >
+              <input
+                class="PrivateSwitchBase-input emotion-40"
+                data-indeterminate="false"
+                name="sso"
+                type="checkbox"
+              />
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-5"
+                data-testid="CheckBoxOutlineBlankIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-42"
+            >
+              Restrict to Service Provider’s Single Sign-On settings
+            </span>
+          </label>
           <div
-            class="margin-top-x-small margin-bottom"
+            class="flexbox center-aligned"
+            data-mui-internal-clone-element="true"
           >
-            <a
-              data-discover="true"
-              href="/settings/organization-and-billing"
+            <div
+              class="relative"
             >
-              View Single Sign-On settings
-            </a>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-22"
+                data-testid="HelpIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
+                />
+              </svg>
+              <div
+                class="emotion-23 "
+              />
+            </div>
           </div>
         </div>
         <div
-          class="button-wrapper emotion-61 emotion-62"
+          class="margin-top-x-small margin-bottom"
+        >
+          <a
+            data-discover="true"
+            href="/settings/organization-and-billing"
+          >
+            View Single Sign-On settings
+          </a>
+        </div>
+        <div
+          class="button-wrapper emotion-66 emotion-67"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary undefined emotion-63"
-            id=":r8:"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary undefined emotion-68"
+            id=":r9:"
             tabindex="0"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-64"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary emotion-69"
             disabled=""
-            id=":r9:"
+            id=":ra:"
             tabindex="-1"
             type="submit"
           >
diff --git a/frontend/src/js/store/organizationSlice/types.ts b/frontend/src/js/store/organizationSlice/types.ts
index 462cd659..76dde144 100644
--- a/frontend/src/js/store/organizationSlice/types.ts
+++ b/frontend/src/js/store/organizationSlice/types.ts
@@ -13,6 +13,9 @@
 //    limitations under the License.
 import { AvailableAddon, AvailablePlans } from '@northern.tech/store/appSlice/constants';
 
+import { Address } from '../api/types/Address';
+import { ApiLimits } from '../api/types/ApiLimits';
+
 //TODO: improve types
 export interface Card {
   last4: string;
@@ -77,33 +80,12 @@ export interface OrganizationState {
   ssoConfigs: any[];
   webhooks: Webhook;
 }
-interface ApiQuota {
-  max_calls: number;
-  interval_sec: number;
-}
-
-interface ApiLimits {
-  management: {
-    bursts: any[];
-    quota: ApiQuota;
-  };
-  devices: {
-    bursts: any[];
-    quota: ApiQuota;
-  };
-}
 
 export interface Addon {
   name: AvailableAddon;
   enabled: boolean;
 }
-export interface Address {
-  country: string;
-  state: string;
-  city: string;
-  line1: string;
-  postal_code: string;
-}
+
 export interface BillingProfile {
   email: string;
   name: string;
diff --git a/frontend/src/js/themes/Mender/common.ts b/frontend/src/js/themes/Mender/common.ts
index 7c67a0ad..ff01ccf4 100644
--- a/frontend/src/js/themes/Mender/common.ts
+++ b/frontend/src/js/themes/Mender/common.ts
@@ -94,18 +94,23 @@ export const typography = {
 const componentProps = {
   MuiFormControl: {
     defaultProps: {
-      variant: 'standard'
+      variant: 'outlined'
+    }
+  },
+  MuiInput: {
+    defaultProps: {
+      variant: 'outlined'
     }
   },
   MuiTextField: {
     defaultProps: {
-      variant: 'standard'
+      variant: 'outlined'
     }
   },
   MuiSelect: {
     defaultProps: {
       autoWidth: true,
-      variant: 'standard'
+      variant: 'outlined'
     }
   }
 };
@@ -170,6 +175,7 @@ export const overrides = {
     }
   },
   MuiInput: {
+    ...componentProps.MuiInput,
     styleOverrides: {
       underline: {
         '&:before': {
@@ -188,7 +194,6 @@ export const overrides = {
     ...componentProps.MuiFormControl,
     styleOverrides: {
       root: {
-        marginTop: '18px',
         minWidth: '240px'
       }
     }
diff --git a/frontend/src/less/main.less b/frontend/src/less/main.less
index 7ae865ba..a07b2d16 100644
--- a/frontend/src/less/main.less
+++ b/frontend/src/less/main.less
@@ -748,11 +748,13 @@ input[required]:-moz-ui-invalid {
 form .required::after {
   content: '* required';
   position: absolute;
-  top: 50%;
   left: 102%;
   font-size: 12px;
   color: @linkgreen;
   width: 100px;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 form .required.file {
@@ -807,9 +809,9 @@ div:focus {
 
 .key-value-container {
   display: grid;
-  grid-template-columns: max-content max-content 65px;
+  grid-template-columns: min-content min-content 65px;
   column-gap: @defaultGutterWidth;
-  align-items: center;
+  align-items: baseline;
   justify-items: baseline;
   > div {
     margin-top: 10px;
@@ -912,8 +914,9 @@ div:focus {
 }
 
 .StripeElement {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
-  padding-bottom: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.26);
+  padding: 16.5px 14px;
+  border-radius: 4px;
 }
 
 /* tables */