From 8c4d8a07cdb9ed66f25f7b400fdf60a13f97f8e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 16 Apr 2024 14:57:44 +0200
Subject: [PATCH] Change: Update create and edit dialog to new UI layout

Adjust create and edit dialogs for new UI components and layout.
---
 src/web/pages/audits/dialog.jsx               | 256 +++---
 src/web/pages/credentials/dialog.jsx          | 141 ++-
 src/web/pages/filters/dialog.jsx              |  23 +-
 src/web/pages/groups/dialog.jsx               |  25 +-
 src/web/pages/hosts/dialog.jsx                |  18 +-
 src/web/pages/ldap/dialog.jsx                 |  51 +-
 src/web/pages/notes/dialog.jsx                |  75 +-
 src/web/pages/overrides/dialog.jsx            | 226 +++--
 src/web/pages/permissions/dialog.jsx          | 142 +--
 src/web/pages/permissions/multipledialog.jsx  | 335 ++++---
 src/web/pages/policies/dialog.jsx             |  25 +-
 src/web/pages/portlists/dialog.jsx            | 130 ++-
 src/web/pages/portlists/importdialog.jsx      |  15 +-
 src/web/pages/portlists/portrangedialog.jsx   |  26 +-
 src/web/pages/portlists/portrangestable.jsx   |   5 +-
 src/web/pages/radius/dialog.jsx               |  32 +-
 src/web/pages/reportconfigs/dialog.jsx        |  71 +-
 src/web/pages/reportformats/dialog.jsx        | 262 +++++-
 .../pages/reports/downloadreportdialog.jsx    |  79 +-
 src/web/pages/reports/importdialog.jsx        |  59 +-
 src/web/pages/reports/triggeralertdialog.jsx  |  59 +-
 src/web/pages/roles/dialog.jsx                |  34 +-
 src/web/pages/scanconfigs/dialog.jsx          | 104 ++-
 .../scanconfigs/editconfigfamilydialog.jsx    |  41 +-
 src/web/pages/scanconfigs/editdialog.jsx      |  14 +-
 .../scanconfigs/editnvtdetailsdialog.jsx      |   4 +-
 src/web/pages/scanconfigs/importdialog.jsx    |  19 +-
 src/web/pages/scanconfigs/nvtfamilies.jsx     |   6 +-
 src/web/pages/scanconfigs/nvtpreferences.jsx  |  86 +-
 .../pages/scanconfigs/scannerpreferences.jsx  |   8 +-
 src/web/pages/scanners/dialog.jsx             |  94 +-
 src/web/pages/schedules/dayselect.jsx         |  75 +-
 src/web/pages/schedules/dialog.jsx            | 820 ++++++++----------
 src/web/pages/schedules/monthdaysselect.jsx   | 180 ++--
 src/web/pages/schedules/timeunitselect.jsx    |  23 +-
 src/web/pages/schedules/weekdayselect.jsx     | 171 ++--
 src/web/pages/tags/dialog.jsx                 |  12 +-
 src/web/pages/targets/dialog.jsx              | 510 +++++------
 .../pages/tasks/addresultstoassetsgroup.jsx   |   5 +-
 .../pages/tasks/autodeletereportsgroup.jsx    |  64 +-
 src/web/pages/tasks/containerdialog.jsx       |  17 +-
 src/web/pages/tasks/dialog.jsx                | 287 +++---
 src/web/pages/tickets/createdialog.jsx        |  32 +-
 src/web/pages/tickets/editdialog.jsx          |  49 +-
 src/web/pages/users/confirmdeletedialog.jsx   |  10 +-
 src/web/pages/users/dialog.jsx                | 643 +++++++-------
 46 files changed, 2622 insertions(+), 2741 deletions(-)

diff --git a/src/web/pages/audits/dialog.jsx b/src/web/pages/audits/dialog.jsx
index 4c09cad37b..6dd82bd07e 100644
--- a/src/web/pages/audits/dialog.jsx
+++ b/src/web/pages/audits/dialog.jsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
+import styled from 'styled-components';
 
 import {isDefined} from 'gmp/utils/identity';
 import {selectSaveId} from 'gmp/utils/id';
@@ -39,7 +39,6 @@ import {
 } from 'gmp/models/scanner';
 
 import PropTypes from 'web/utils/proptypes';
-import withCapabilities from 'web/utils/withCapabilities';
 import {renderSelectItems, UNSET_VALUE} from 'web/utils/render';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -54,12 +53,16 @@ import TextField from 'web/components/form/textfield';
 
 import NewIcon from 'web/components/icon/newicon';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import AddResultsToAssetsGroup from 'web/pages/tasks/addresultstoassetsgroup';
 import AutoDeleteReportsGroup from 'web/pages/tasks/autodeletereportsgroup';
 
+import useTranslation from 'web/hooks/useTranslation';
+import useCapabilities from 'web/utils/useCapabilities';
+
+const Title = styled.div`
+  flex-grow: 1;
+`;
+
 const getScanner = (scanners, scanner_id) => {
   if (!isDefined(scanners)) {
     return undefined;
@@ -70,9 +73,14 @@ const getScanner = (scanners, scanner_id) => {
   });
 };
 
-const ScannerSelect = props => {
-  const {changeAudit, isLoading, scannerId, scanners, onChange} = props;
-
+const ScannerSelect = ({
+  changeAudit,
+  isLoading,
+  scannerId,
+  scanners,
+  onChange,
+}) => {
+  const [_] = useTranslation();
   return (
     <FormGroup title={_('Scanner')}>
       <Select
@@ -104,7 +112,6 @@ const AuditDialog = ({
   alterable = NO_VALUE,
   auto_delete = AUTO_DELETE_NO,
   auto_delete_data = AUTO_DELETE_KEEP_DEFAULT_VALUE,
-  capabilities,
   comment = '',
   fromPolicy = false,
   hostsOrdering = HOSTS_ORDERING_SEQUENTIAL,
@@ -112,7 +119,7 @@ const AuditDialog = ({
   isLoadingScanners = false,
   maxChecks = DEFAULT_MAX_CHECKS,
   maxHosts = DEFAULT_MAX_HOSTS,
-  name = _('Unnamed'),
+  name,
   policies = [],
   policyId,
   scannerId = OPENVAS_DEFAULT_SCANNER_ID,
@@ -128,7 +135,7 @@ const AuditDialog = ({
   targetId,
   targets,
   audit,
-  title = _('New Audit'),
+  title,
   onClose,
   onNewAlertClick,
   onNewScheduleClick,
@@ -138,6 +145,12 @@ const AuditDialog = ({
   onChange,
   ...data
 }) => {
+  const [_] = useTranslation();
+  const capabilities = useCapabilities();
+
+  title = title || _('New Audit');
+  name = name || _('Unnamed');
+
   const targetItems = renderSelectItems(targets);
 
   const scheduleItems = renderSelectItems(schedules, UNSET_VALUE);
@@ -191,12 +204,10 @@ const AuditDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
-                grow="1"
-                size="30"
                 value={state.name}
                 onChange={onValueChange}
               />
@@ -205,76 +216,62 @@ const AuditDialog = ({
             <FormGroup title={_('Comment')}>
               <TextField
                 name="comment"
-                grow="1"
-                size="30"
                 value={state.comment}
                 onChange={onValueChange}
               />
             </FormGroup>
 
-            <FormGroup title={_('Scan Targets')}>
-              <Divider>
-                <Select
-                  name="targetId"
-                  disabled={!changeAudit}
-                  items={targetItems}
-                  value={state.targetId}
-                  onChange={onChange}
+            <FormGroup title={_('Scan Targets')} direction="row">
+              <Select
+                name="targetId"
+                disabled={!changeAudit}
+                items={targetItems}
+                value={state.targetId}
+                onChange={onChange}
+              />
+              {changeAudit && (
+                <NewIcon
+                  title={_('Create a new target')}
+                  onClick={onNewTargetClick}
                 />
-                {changeAudit && (
-                  <Layout>
-                    <NewIcon
-                      title={_('Create a new target')}
-                      onClick={onNewTargetClick}
-                    />
-                  </Layout>
-                )}
-              </Divider>
+              )}
             </FormGroup>
 
             {capabilities.mayOp('get_alerts') && (
-              <FormGroup title={_('Alerts')}>
-                <Divider>
-                  <MultiSelect
-                    name="alertIds"
-                    items={alertItems}
-                    value={state.alertIds}
-                    onChange={onChange}
-                  />
-                  <Layout>
-                    <NewIcon
-                      title={_('Create a new alert')}
-                      onClick={onNewAlertClick}
-                    />
-                  </Layout>
-                </Divider>
+              <FormGroup title={_('Alerts')} direction="row">
+                <MultiSelect
+                  name="alertIds"
+                  items={alertItems}
+                  value={state.alertIds}
+                  onChange={onChange}
+                />
+                <NewIcon
+                  title={_('Create a new alert')}
+                  onClick={onNewAlertClick}
+                />
               </FormGroup>
             )}
 
             {capabilities.mayOp('get_schedules') && (
-              <FormGroup title={_('Schedule')}>
-                <Divider>
-                  <Select
-                    name="scheduleId"
-                    value={state.scheduleId}
-                    items={scheduleItems}
-                    onChange={onChange}
-                  />
-                  <Checkbox
-                    name="schedulePeriods"
-                    checked={state.schedulePeriods === YES_VALUE}
-                    checkedValue={YES_VALUE}
-                    unCheckedValue={NO_VALUE}
-                    title={_('Once')}
-                    onChange={onValueChange}
-                  />
-                  <Layout>
-                    <NewIcon
-                      title={_('Create a new schedule')}
-                      onClick={onNewScheduleClick}
-                    />
-                  </Layout>
-                </Divider>
+              <FormGroup title={_('Schedule')} direction="row">
+                <Select
+                  name="scheduleId"
+                  value={state.scheduleId}
+                  items={scheduleItems}
+                  onChange={onChange}
+                />
+                <Checkbox
+                  name="schedulePeriods"
+                  checked={state.schedulePeriods === YES_VALUE}
+                  checkedValue={YES_VALUE}
+                  unCheckedValue={NO_VALUE}
+                  title={_('Once')}
+                  onChange={onValueChange}
+                />
+                <NewIcon
+                  title={_('Create a new schedule')}
+                  onClick={onNewScheduleClick}
+                />
               </FormGroup>
             )}
 
@@ -300,7 +297,7 @@ const AuditDialog = ({
               onChange={onValueChange}
             />
 
-            <div
+            <Title
               title={
                 changeAudit
                   ? null
@@ -316,68 +313,58 @@ const AuditDialog = ({
                 isLoading={isLoadingScanners}
                 onChange={onScannerChange}
               />
-            </div>
+            </Title>
+
+            <FormGroup title={_('Policy')}>
+              <Select
+                name="policyId"
+                disabled={!changeAudit || hasAudit || fromPolicy}
+                items={policyItems}
+                value={policyId}
+                onChange={onChange}
+              />
+            </FormGroup>
 
-            <Layout flex="column" grow="1">
-              <FormGroup titleSize="2" title={_('Policy')}>
-                <Select
-                  name="policyId"
-                  disabled={!changeAudit || hasAudit || fromPolicy}
-                  items={policyItems}
-                  value={policyId}
-                  onChange={onChange}
-                />
-              </FormGroup>
-              <FormGroup titleSize="4" title={_('Order for target hosts')}>
-                <Select
-                  name="hostsOrdering"
-                  items={[
-                    {
-                      value: 'sequential',
-                      label: _('Sequential'),
-                    },
-                    {
-                      value: 'random',
-                      label: _('Random'),
-                    },
-                    {
-                      value: 'reverse',
-                      label: _('Reverse'),
-                    },
-                  ]}
-                  value={state.hostsOrdering}
-                  onChange={onValueChange}
-                />
-              </FormGroup>
-              <FormGroup
-                titleSize="4"
-                title={_('Maximum concurrently executed NVTs per host')}
-              >
-                <Spinner
-                  name="maxChecks"
-                  size="10"
-                  min="0"
-                  maxLength="10"
-                  value={state.maxChecks}
-                  onChange={onValueChange}
-                />
-              </FormGroup>
-              <FormGroup
-                titleSize="4"
-                title={_('Maximum concurrently scanned hosts')}
-              >
-                <Spinner
-                  name="maxHosts"
-                  type="int"
-                  min="0"
-                  size="10"
-                  maxLength="10"
-                  value={state.maxHosts}
-                  onChange={onValueChange}
-                />
-              </FormGroup>
-            </Layout>
-          </Layout>
+            <FormGroup titleSize="4" title={_('Order for target hosts')}>
+              <Select
+                name="hostsOrdering"
+                items={[
+                  {
+                    value: 'sequential',
+                    label: _('Sequential'),
+                  },
+                  {
+                    value: 'random',
+                    label: _('Random'),
+                  },
+                  {
+                    value: 'reverse',
+                    label: _('Reverse'),
+                  },
+                ]}
+                value={state.hostsOrdering}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+            <FormGroup title={_('Maximum concurrently executed NVTs per host')}>
+              <Spinner
+                name="maxChecks"
+                type="int"
+                min="0"
+                value={state.maxChecks}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+            <FormGroup title={_('Maximum concurrently scanned hosts')}>
+              <Spinner
+                name="maxHosts"
+                type="int"
+                min="0"
+                value={state.maxHosts}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+          </>
         );
       }}
     </SaveDialog>
@@ -391,7 +378,6 @@ AuditDialog.propTypes = {
   audit: PropTypes.model,
   auto_delete: PropTypes.oneOf(['keep', 'no']),
   auto_delete_data: PropTypes.number,
-  capabilities: PropTypes.capabilities.isRequired,
   comment: PropTypes.string,
   fromPolicy: PropTypes.bool,
   hostsOrdering: PropTypes.oneOf(['sequential', 'random', 'reverse']),
@@ -419,6 +405,6 @@ AuditDialog.propTypes = {
   onScannerChange: PropTypes.func.isRequired,
 };
 
-export default withCapabilities(AuditDialog);
+export default AuditDialog;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/credentials/dialog.jsx b/src/web/pages/credentials/dialog.jsx
index 7c0325c5df..11fd7360ee 100644
--- a/src/web/pages/credentials/dialog.jsx
+++ b/src/web/pages/credentials/dialog.jsx
@@ -42,9 +42,6 @@ import {
   getCredentialTypeName,
 } from 'gmp/models/credential';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 import withCapabilities from 'web/utils/withCapabilities';
 
@@ -145,12 +142,12 @@ class CredentialsDialog extends React.Component {
       credential,
       title = _('New Credential'),
       types = [],
-      allow_insecure = NO_VALUE,
+      allow_insecure,
       auth_algorithm = SNMP_AUTH_ALGORITHM_SHA1,
-      change_community = NO_VALUE,
-      change_passphrase = NO_VALUE,
-      change_password = NO_VALUE,
-      change_privacy_password = NO_VALUE,
+      change_community,
+      change_passphrase,
+      change_password,
+      change_privacy_password,
       comment = '',
       community = '',
       credential_login = '',
@@ -215,12 +212,10 @@ class CredentialsDialog extends React.Component {
       >
         {({values: state, onValueChange}) => {
           return (
-            <Layout flex="column">
+            <>
               <FormGroup title={_('Name')}>
                 <TextField
                   name="name"
-                  grow="1"
-                  size="30"
                   value={state.name}
                   onChange={onValueChange}
                 />
@@ -229,8 +224,6 @@ class CredentialsDialog extends React.Component {
               <FormGroup title={_('Comment')}>
                 <TextField
                   name="comment"
-                  grow="1"
-                  size="30"
                   value={state.comment}
                   onChange={onValueChange}
                 />
@@ -273,7 +266,7 @@ class CredentialsDialog extends React.Component {
                 )}
 
               {state.credential_type === SNMP_CREDENTIAL_TYPE && (
-                <FormGroup title={_('SNMP Community')}>
+                <FormGroup title={_('SNMP Community')} direction="row">
                   {is_edit && (
                     <Checkbox
                       name="change_community"
@@ -285,7 +278,9 @@ class CredentialsDialog extends React.Component {
                     />
                   )}
                   <PasswordField
+                    grow="1"
                     name="community"
+                    disabled={state.change_community === NO_VALUE}
                     value={state.community}
                     onChange={onValueChange}
                   />
@@ -295,7 +290,7 @@ class CredentialsDialog extends React.Component {
               {(state.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE ||
                 state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE ||
                 state.credential_type === SNMP_CREDENTIAL_TYPE) && (
-                <FormGroup title={_('Username')} flex>
+                <FormGroup title={_('Username')}>
                   <TextField
                     name="credential_login"
                     value={state.credential_login}
@@ -308,73 +303,77 @@ class CredentialsDialog extends React.Component {
                 state.credential_type === SNMP_CREDENTIAL_TYPE ||
                 state.credential_type === VFIRE_CREDENTIAL_TYPES ||
                 state.credential_type === PASSWORD_ONLY_CREDENTIAL_TYPE) && (
-                <FormGroup title={_('Password')}>
-                  <Divider>
-                    {is_edit && (
-                      <Checkbox
-                        name="change_password"
-                        checked={state.change_password === YES_VALUE}
-                        checkedValue={YES_VALUE}
-                        unCheckedValue={NO_VALUE}
-                        title={_('Replace existing password with')}
-                        onChange={onValueChange}
-                      />
-                    )}
-                    <PasswordField
-                      name="password"
-                      autoComplete="new-password"
-                      disabled={state.autogenerate === YES_VALUE}
-                      value={state.password}
+                <FormGroup title={_('Password')} direction="row">
+                  {is_edit && (
+                    <Checkbox
+                      name="change_password"
+                      checked={state.change_password === YES_VALUE}
+                      checkedValue={YES_VALUE}
+                      unCheckedValue={NO_VALUE}
+                      title={_('Replace existing password with')}
                       onChange={onValueChange}
                     />
-                  </Divider>
+                  )}
+                  <PasswordField
+                    grow="1"
+                    name="password"
+                    autoComplete="new-password"
+                    disabled={
+                      state.autogenerate === YES_VALUE ||
+                      state.change_password === NO_VALUE
+                    }
+                    value={state.password}
+                    onChange={onValueChange}
+                  />
                 </FormGroup>
               )}
 
               {state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE && (
-                <FormGroup title={_('Passphrase')}>
-                  <Divider>
-                    {is_edit && (
-                      <Checkbox
-                        name="change_passphrase"
-                        checked={state.change_passphrase === YES_VALUE}
-                        checkedValue={YES_VALUE}
-                        unCheckedValue={NO_VALUE}
-                        title={_('Replace existing passphrase with')}
-                        onChange={onValueChange}
-                      />
-                    )}
-                    <PasswordField
-                      name="passphrase"
-                      autoComplete="new-password"
-                      disabled={state.autogenerate === YES_VALUE}
-                      value={state.passphrase}
+                <FormGroup title={_('Passphrase')} direction="row">
+                  {is_edit && (
+                    <Checkbox
+                      name="change_passphrase"
+                      checked={state.change_passphrase === YES_VALUE}
+                      checkedValue={YES_VALUE}
+                      unCheckedValue={NO_VALUE}
+                      title={_('Replace existing passphrase with')}
                       onChange={onValueChange}
                     />
-                  </Divider>
+                  )}
+                  <PasswordField
+                    grow="1"
+                    name="passphrase"
+                    autoComplete="new-password"
+                    disabled={
+                      state.autogenerate === YES_VALUE ||
+                      state.change_passphrase === NO_VALUE
+                    }
+                    value={state.passphrase}
+                    onChange={onValueChange}
+                  />
                 </FormGroup>
               )}
 
               {state.credential_type === SNMP_CREDENTIAL_TYPE && (
-                <FormGroup title={_('Privacy Password')}>
-                  <Divider>
-                    {is_edit && (
-                      <Checkbox
-                        name="change_privacy_password"
-                        checked={state.change_privacy_password === YES_VALUE}
-                        checkedValue={YES_VALUE}
-                        unCheckedValue={NO_VALUE}
-                        title={_('Replace existing privacy password with')}
-                        onChange={onValueChange}
-                      />
-                    )}
-                    <PasswordField
-                      name="privacy_password"
-                      autoComplete="new-password"
-                      value={state.privacy_password}
+                <FormGroup title={_('Privacy Password')} direction="row">
+                  {is_edit && (
+                    <Checkbox
+                      name="change_privacy_password"
+                      checked={state.change_privacy_password === YES_VALUE}
+                      checkedValue={YES_VALUE}
+                      unCheckedValue={NO_VALUE}
+                      title={_('Replace existing privacy password with')}
                       onChange={onValueChange}
                     />
-                  </Divider>
+                  )}
+                  <PasswordField
+                    grow="1"
+                    name="privacy_password"
+                    autoComplete="new-password"
+                    disabled={state.change_privacy_password === NO_VALUE}
+                    value={state.privacy_password}
+                    onChange={onValueChange}
+                  />
                 </FormGroup>
               )}
 
@@ -385,7 +384,7 @@ class CredentialsDialog extends React.Component {
               )}
 
               {state.credential_type === SNMP_CREDENTIAL_TYPE && (
-                <FormGroup title={_('Auth Algorithm')}>
+                <FormGroup title={_('Auth Algorithm')} direction="row">
                   <Radio
                     title="MD5"
                     checked={state.auth_algorithm === SNMP_AUTH_ALGORITHM_MD5}
@@ -404,7 +403,7 @@ class CredentialsDialog extends React.Component {
               )}
 
               {state.credential_type === SNMP_CREDENTIAL_TYPE && (
-                <FormGroup title={_('Privacy Algorithm')}>
+                <FormGroup title={_('Privacy Algorithm')} direction="row">
                   <Radio
                     title="AES"
                     checked={
@@ -449,7 +448,7 @@ class CredentialsDialog extends React.Component {
                   <FileField name="certificate" onChange={onValueChange} />
                 </FormGroup>
               )}
-            </Layout>
+            </>
           );
         }}
       </SaveDialog>
diff --git a/src/web/pages/filters/dialog.jsx b/src/web/pages/filters/dialog.jsx
index f5e2cf2307..55b6ab063e 100644
--- a/src/web/pages/filters/dialog.jsx
+++ b/src/web/pages/filters/dialog.jsx
@@ -17,10 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -29,22 +25,28 @@ import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 import Select from 'web/components/form/select';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const FilterDialog = ({
   comment = '',
   id,
-  name = _('Unnamed'),
+  name,
   term = '',
-  title = _('New Filter'),
+  title,
   type,
   types,
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const filterOptions = types.map(option => ({
     value: option[0],
-    label: option[1],
+    label: '' + option[1], // convert to string because the new select component does not accept lazy translations
   }));
 
+  name = name || _('Unnamed');
+  title = title || _('New Filter');
+
   return (
     <SaveDialog
       title={title}
@@ -60,13 +62,12 @@ const FilterDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
                 grow="1"
                 value={state.name}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -76,7 +77,6 @@ const FilterDialog = ({
                 name="comment"
                 grow="1"
                 value={state.comment}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -86,7 +86,6 @@ const FilterDialog = ({
                 name="term"
                 grow="1"
                 value={state.term}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -99,7 +98,7 @@ const FilterDialog = ({
                 value={state.type}
               />
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/groups/dialog.jsx b/src/web/pages/groups/dialog.jsx
index 4db84a5cab..78094fc277 100644
--- a/src/web/pages/groups/dialog.jsx
+++ b/src/web/pages/groups/dialog.jsx
@@ -18,13 +18,9 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 import {map} from 'gmp/utils/array';
 
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -34,16 +30,14 @@ import FormGroup from 'web/components/form/formgroup';
 import MultiSelect from 'web/components/form/multiselect';
 import TextField from 'web/components/form/textfield';
 
-const Dialog = ({
-  allUsers,
-  grant_full,
-  group,
-  title = _('New Group'),
-  onClose,
-  onSave,
-}) => {
+import useTranslation from 'web/hooks/useTranslation';
+
+const Dialog = ({allUsers, grant_full, group, title, onClose, onSave}) => {
+  const [_] = useTranslation();
   const is_edit = isDefined(group);
 
+  title = title || _('New Group');
+
   const userOptions = map(allUsers, user => ({
     value: user.name,
     label: user.name,
@@ -63,13 +57,11 @@ const Dialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
-                grow="1"
                 value={state.name}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -78,7 +70,6 @@ const Dialog = ({
               <TextField
                 name="comment"
                 value={state.comment}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -107,7 +98,7 @@ const Dialog = ({
                 />
               </FormGroup>
             )}
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/hosts/dialog.jsx b/src/web/pages/hosts/dialog.jsx
index 5926676d5e..e130856cd0 100644
--- a/src/web/pages/hosts/dialog.jsx
+++ b/src/web/pages/hosts/dialog.jsx
@@ -17,12 +17,8 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
-import Layout from 'web/components/layout/layout';
-
 import SaveDialog from 'web/components/dialog/savedialog';
 
 import PropTypes from 'web/utils/proptypes';
@@ -30,9 +26,13 @@ import PropTypes from 'web/utils/proptypes';
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const DEFAULTS = {name: '127.0.0.1', comment: ''};
 
-const HostsDialog = ({host, title = _('New Host'), onClose, onSave}) => {
+const HostsDialog = ({host, title, onClose, onSave}) => {
+  const [_] = useTranslation();
+  title = title || _('New Host');
   return (
     <SaveDialog
       title={title}
@@ -42,13 +42,11 @@ const HostsDialog = ({host, title = _('New Host'), onClose, onSave}) => {
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('IP Address')}>
               <TextField
                 name="name"
-                grow="1"
                 value={state.name}
-                size="30"
                 disabled={isDefined(host)}
                 onChange={onValueChange}
               />
@@ -58,12 +56,10 @@ const HostsDialog = ({host, title = _('New Host'), onClose, onSave}) => {
               <TextField
                 name="comment"
                 value={state.comment}
-                grow="1"
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/ldap/dialog.jsx b/src/web/pages/ldap/dialog.jsx
index 4c883c891d..e13b001350 100644
--- a/src/web/pages/ldap/dialog.jsx
+++ b/src/web/pages/ldap/dialog.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -29,7 +27,7 @@ import FileField from 'web/components/form/filefield';
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
 
 const LdapDialog = ({
   authdn = '',
@@ -39,6 +37,7 @@ const LdapDialog = ({
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const uncontrolledValues = {
     authdn,
     enable,
@@ -54,17 +53,16 @@ const LdapDialog = ({
       onSave={onSave}
     >
       {({values, onValueChange}) => (
-        <Layout flex="column">
-          <FormGroup title={_('Enable')}>
-            <CheckBox
-              data-testid="enable-checkbox"
-              name="enable"
-              checked={values.enable}
-              checkedValue={true}
-              unCheckedValue={false}
-              onChange={onValueChange}
-            />
-          </FormGroup>
+        <>
+          <CheckBox
+            title={_('Enable')}
+            data-testid="enable-checkbox"
+            name="enable"
+            checked={values.enable}
+            checkedValue={true}
+            unCheckedValue={false}
+            onChange={onValueChange}
+          />
           <FormGroup title={_('LDAP Host')}>
             <TextField
               data-testid="ldaphost-textfield"
@@ -84,21 +82,18 @@ const LdapDialog = ({
             />
           </FormGroup>
           <FormGroup title={_('CA Certificate')}>
-            <Layout flex="column">
-              <FileField name="certificate" onChange={onValueChange} />
-            </Layout>
-          </FormGroup>
-          <FormGroup title={_('Use LDAPS only')}>
-            <CheckBox
-              data-testid="ldapsOnly-checkbox"
-              name="ldapsOnly"
-              checked={values.ldapsOnly}
-              checkedValue={true}
-              unCheckedValue={false}
-              onChange={onValueChange}
-            />
+            <FileField name="certificate" onChange={onValueChange} />
           </FormGroup>
-        </Layout>
+          <CheckBox
+            title={_('Use LDAPS only')}
+            data-testid="ldapsOnly-checkbox"
+            name="ldapsOnly"
+            checked={values.ldapsOnly}
+            checkedValue={true}
+            unCheckedValue={false}
+            onChange={onValueChange}
+          />
+        </>
       )}
     </SaveDialog>
   );
diff --git a/src/web/pages/notes/dialog.jsx b/src/web/pages/notes/dialog.jsx
index 4c3045cb2b..684eeb6fbe 100644
--- a/src/web/pages/notes/dialog.jsx
+++ b/src/web/pages/notes/dialog.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 import {isEmpty} from 'gmp/utils/string';
 
@@ -43,8 +41,7 @@ import DateTime from 'web/components/date/datetime';
 
 import SaveDialog from 'web/components/dialog/savedialog';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+import Row from 'web/components/layout/row';
 
 import PropTypes from 'web/utils/proptypes';
 import {
@@ -64,6 +61,8 @@ import Radio from 'web/components/form/radio';
 import Select from 'web/components/form/select';
 import Spinner from 'web/components/form/spinner';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const NoteDialog = ({
   active = ACTIVE_YES_ALWAYS_VALUE,
   days = DEFAULT_DAYS,
@@ -85,11 +84,14 @@ const NoteDialog = ({
   tasks,
   task_uuid,
   text = '',
-  title = _('New Note'),
+  title,
   onClose,
   onSave,
 }) => {
-  const is_edit = isDefined(note);
+  const [_] = useTranslation();
+  const isEdit = isDefined(note);
+
+  title = title || _('New Note');
 
   const data = {
     severity,
@@ -121,7 +123,7 @@ const NoteDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             {state.fixed && isDefined(oid) && (
               <FormGroup title={_('NVT')} flex="column">
                 <span>{renderNvtName(oid, nvt_name)}</span>
@@ -132,8 +134,8 @@ const NoteDialog = ({
                 <span>{renderNvtName(state.oid, nvt_name)}</span>
               </FormGroup>
             )}
-            {is_edit && !state.fixed && (
-              <FormGroup title={_('NVT')} flex="column">
+            {isEdit && !state.fixed && (
+              <FormGroup title={_('NVT')} direction="column">
                 <Radio
                   title={renderNvtName(oid, nvt_name)}
                   name="oid"
@@ -141,7 +143,7 @@ const NoteDialog = ({
                   value={oid}
                   onChange={onValueChange}
                 />
-                <Divider>
+                <Row>
                   <Radio
                     name="oid"
                     checked={state.oid !== oid}
@@ -154,10 +156,10 @@ const NoteDialog = ({
                     value={state.oid === oid ? DEFAULT_OID_VALUE : state.oid}
                     onChange={onValueChange}
                   />
-                </Divider>
+                </Row>
               </FormGroup>
             )}
-            {!is_edit && !state.fixed && (
+            {!isEdit && !state.fixed && (
               <FormGroup title={_('NVT OID')}>
                 <TextField
                   name="oid"
@@ -166,8 +168,8 @@ const NoteDialog = ({
                 />
               </FormGroup>
             )}
-            <FormGroup title={_('Active')} flex="column">
-              <Divider flex="column">
+            <FormGroup title={_('Active')}>
+              <Row>
                 <Radio
                   name="active"
                   title={_('yes, always')}
@@ -175,8 +177,8 @@ const NoteDialog = ({
                   value={ACTIVE_YES_ALWAYS_VALUE}
                   onChange={onValueChange}
                 />
-                {is_edit && note.isActive() && isDefined(note.endTime) && (
-                  <Divider>
+                {isEdit && note.isActive() && isDefined(note.endTime) && (
+                  <Row>
                     <Radio
                       name="active"
                       title={_('yes, until')}
@@ -185,10 +187,10 @@ const NoteDialog = ({
                       onChange={onValueChange}
                     />
                     <DateTime date={note.endTime} />
-                  </Divider>
+                  </Row>
                 )}
-              </Divider>
-              <Divider>
+              </Row>
+              <Row>
                 <Radio
                   name="active"
                   checked={state.active === ACTIVE_YES_FOR_NEXT_VALUE}
@@ -198,7 +200,6 @@ const NoteDialog = ({
                 />
                 <Spinner
                   name="days"
-                  size="4"
                   type="int"
                   min="1"
                   disabled={state.active !== ACTIVE_YES_FOR_NEXT_VALUE}
@@ -206,7 +207,7 @@ const NoteDialog = ({
                   onChange={onValueChange}
                 />
                 <span>{_('days')}</span>
-              </Divider>
+              </Row>
               <Radio
                 name="active"
                 title={_('no')}
@@ -224,7 +225,7 @@ const NoteDialog = ({
                 value={ANY}
                 onChange={onValueChange}
               />
-              <Divider>
+              <Row>
                 <Radio
                   name="hosts"
                   checked={state.hosts === MANUAL}
@@ -237,7 +238,7 @@ const NoteDialog = ({
                   value={state.hosts_manual}
                   onChange={onValueChange}
                 />
-              </Divider>
+              </Row>
             </FormGroup>
 
             <FormGroup title={_('Location')}>
@@ -248,7 +249,7 @@ const NoteDialog = ({
                 value={ANY}
                 onChange={onValueChange}
               />
-              <Divider>
+              <Row>
                 <Radio
                   name="port"
                   checked={state.port === MANUAL}
@@ -261,7 +262,7 @@ const NoteDialog = ({
                   value={state.port_manual}
                   onChange={onValueChange}
                 />
-              </Divider>
+              </Row>
             </FormGroup>
 
             <FormGroup title={_('Severity')}>
@@ -273,7 +274,7 @@ const NoteDialog = ({
                 onChange={onValueChange}
               />
               {isDefined(severity) && (
-                <Layout>
+                <>
                   {severity > LOG_VALUE ? (
                     <Radio
                       name="severity"
@@ -293,10 +294,10 @@ const NoteDialog = ({
                       onChange={onValueChange}
                     />
                   )}
-                </Layout>
+                </>
               )}
               {!isDefined(severity) && (
-                <Layout>
+                <Row>
                   <Radio
                     name="severity"
                     title={_('> 0.0')}
@@ -313,7 +314,7 @@ const NoteDialog = ({
                     convert={parseFloat}
                     onChange={onValueChange}
                   />
-                </Layout>
+                </Row>
               )}
             </FormGroup>
 
@@ -325,7 +326,7 @@ const NoteDialog = ({
                 value=""
                 onChange={onValueChange}
               />
-              <Divider>
+              <Row>
                 <Radio
                   name="task_id"
                   checked={state.task_id === '0'}
@@ -339,7 +340,7 @@ const NoteDialog = ({
                   disabled={state.task_id !== '0'}
                   onChange={onValueChange}
                 />
-              </Divider>
+              </Row>
             </FormGroup>
 
             <FormGroup title={_('Result')}>
@@ -350,7 +351,7 @@ const NoteDialog = ({
                 value={RESULT_ANY}
                 onChange={onValueChange}
               />
-              <Divider>
+              <Row>
                 <Radio
                   name="result_id"
                   title={
@@ -367,26 +368,24 @@ const NoteDialog = ({
                 {!fixed && (
                   <TextField
                     name="result_uuid"
-                    size="34"
                     disabled={state.result_id !== RESULT_UUID}
                     value={state.result_uuid}
                     onChange={onValueChange}
                   />
                 )}
-              </Divider>
+              </Row>
             </FormGroup>
 
             <FormGroup title={_('Text')}>
               <TextArea
                 name="text"
-                grow="1"
-                rows="10"
-                cols="60"
+                minRows="4"
+                autosize={true}
                 value={state.text}
                 onChange={onValueChange}
               />
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/overrides/dialog.jsx b/src/web/pages/overrides/dialog.jsx
index 7395dbab23..672a52b174 100644
--- a/src/web/pages/overrides/dialog.jsx
+++ b/src/web/pages/overrides/dialog.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
 import {parseFloat, parseYesNo, YES_VALUE, NO_VALUE} from 'gmp/parser';
@@ -41,9 +39,6 @@ import {
 
 import DateTime from 'web/components/date/datetime';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 import {
   renderNvtName,
@@ -73,6 +68,10 @@ import TextArea from 'web/components/form/textarea';
 import TextField from 'web/components/form/textfield';
 import Select from 'web/components/form/select';
 
+import Row from 'web/components/layout/row';
+
+import useTranslation from 'web/hooks/useTranslation';
+
 const OverrideDialog = ({
   active = ACTIVE_YES_ALWAYS_VALUE,
   custom_severity = NO_VALUE,
@@ -97,12 +96,15 @@ const OverrideDialog = ({
   tasks,
   task_uuid,
   text = '',
-  title = _('New Override'),
+  title,
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const is_edit = isDefined(override);
 
+  title = title || _('New Override');
+
   const data = {
     active,
     custom_severity,
@@ -167,7 +169,7 @@ const OverrideDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             {fixed && isDefined(oid) && (
               <FormGroup title={_('NVT')} flex="column">
                 <span>{renderNvtName(oid, nvt_name)}</span>
@@ -179,7 +181,7 @@ const OverrideDialog = ({
               </FormGroup>
             )}
             {is_edit && !fixed && (
-              <FormGroup title={_('NVT')} flex="column">
+              <FormGroup title={_('NVT')}>
                 <Radio
                   name="oid"
                   title={renderNvtName(oid, nvt_name)}
@@ -187,7 +189,7 @@ const OverrideDialog = ({
                   value={oid}
                   onChange={onValueChange}
                 />
-                <Divider>
+                <Row>
                   <Radio
                     name="oid"
                     checked={state.oid !== oid}
@@ -200,12 +202,13 @@ const OverrideDialog = ({
                     value={state.oid === oid ? DEFAULT_OID_VALUE : state.oid}
                     onChange={onValueChange}
                   />
-                </Divider>
+                </Row>
               </FormGroup>
             )}
             {!is_edit && !fixed && (
               <FormGroup title={_('NVT OID')}>
                 <TextField
+                  grow="1"
                   name="oid"
                   value={state.oid}
                   onChange={onValueChange}
@@ -213,7 +216,7 @@ const OverrideDialog = ({
               </FormGroup>
             )}
 
-            <FormGroup title={_('Active')} flex="column">
+            <FormGroup title={_('Active')}>
               <Radio
                 name="active"
                 value={ACTIVE_YES_ALWAYS_VALUE}
@@ -221,9 +224,10 @@ const OverrideDialog = ({
                 title={_('yes, always')}
                 onChange={onValueChange}
               />
-              {is_edit && override.isActive() && isDefined(override.endTime) && (
-                <Layout>
-                  <Divider>
+              {is_edit &&
+                override.isActive() &&
+                isDefined(override.endTime) && (
+                  <Row>
                     <Radio
                       name="active"
                       value={ACTIVE_YES_UNTIL_VALUE}
@@ -232,10 +236,9 @@ const OverrideDialog = ({
                       onChange={onValueChange}
                     />
                     <DateTime date={override.endTime} />
-                  </Divider>
-                </Layout>
-              )}
-              <Divider>
+                  </Row>
+                )}
+              <Row>
                 <Radio
                   name="active"
                   checked={state.active === ACTIVE_YES_FOR_NEXT_VALUE}
@@ -245,7 +248,6 @@ const OverrideDialog = ({
                 />
                 <Spinner
                   name="days"
-                  size="4"
                   disabled={state.active !== ACTIVE_YES_FOR_NEXT_VALUE}
                   type="int"
                   min="1"
@@ -253,7 +255,7 @@ const OverrideDialog = ({
                   onChange={onValueChange}
                 />
                 <span>{_('days')}</span>
-              </Divider>
+              </Row>
               <Radio
                 name="active"
                 checked={state.active === ACTIVE_NO_VALUE}
@@ -263,7 +265,7 @@ const OverrideDialog = ({
               />
             </FormGroup>
 
-            <FormGroup title={_('Hosts')}>
+            <FormGroup title={_('Hosts')} direction="row">
               <Radio
                 name="hosts"
                 title={_('Any')}
@@ -271,23 +273,22 @@ const OverrideDialog = ({
                 value={ANY}
                 onChange={onValueChange}
               />
-              <Divider>
-                <Radio
-                  name="hosts"
-                  checked={state.hosts === MANUAL}
-                  value={MANUAL}
-                  onChange={onValueChange}
-                />
-                <TextField
-                  name="hosts_manual"
-                  value={state.hosts_manual}
-                  disabled={state.hosts !== MANUAL}
-                  onChange={onValueChange}
-                />
-              </Divider>
+              <Radio
+                name="hosts"
+                checked={state.hosts === MANUAL}
+                value={MANUAL}
+                onChange={onValueChange}
+              />
+              <TextField
+                grow="1"
+                name="hosts_manual"
+                value={state.hosts_manual}
+                disabled={state.hosts !== MANUAL}
+                onChange={onValueChange}
+              />
             </FormGroup>
 
-            <FormGroup title={_('Location')}>
+            <FormGroup title={_('Location')} direction="row">
               <Radio
                 name="port"
                 title={_('Any')}
@@ -295,20 +296,19 @@ const OverrideDialog = ({
                 value={ANY}
                 onChange={onValueChange}
               />
-              <Divider>
-                <Radio
-                  name="port"
-                  checked={state.port === MANUAL}
-                  value={MANUAL}
-                  onChange={onValueChange}
-                />
-                <TextField
-                  name="port_manual"
-                  disabled={state.port !== MANUAL}
-                  value={state.port_manual}
-                  onChange={onValueChange}
-                />
-              </Divider>
+              <Radio
+                name="port"
+                checked={state.port === MANUAL}
+                value={MANUAL}
+                onChange={onValueChange}
+              />
+              <TextField
+                grow="1"
+                name="port_manual"
+                disabled={state.port !== MANUAL}
+                value={state.port_manual}
+                onChange={onValueChange}
+              />
             </FormGroup>
 
             <FormGroup title={_('Severity')}>
@@ -319,31 +319,27 @@ const OverrideDialog = ({
                 value=""
                 onChange={onValueChange}
               />
-              {isDefined(severity) && (
-                <Layout>
-                  {severity > 0 ? (
-                    <Radio
-                      name="severity"
-                      title={' > ' + severityFormat(severity - 0.1)}
-                      checked={true}
-                      convert={parseFloat}
-                      value={severity}
-                      onChange={onValueChange}
-                    />
-                  ) : (
-                    <Radio
-                      name="severity"
-                      title={translatedResultSeverityRiskFactor(severity)}
-                      checked={state.severity === severity}
-                      convert={parseFloat}
-                      value={severity}
-                      onChange={onValueChange}
-                    />
-                  )}
-                </Layout>
+              {isDefined(severity) && severity > 0 ? (
+                <Radio
+                  name="severity"
+                  title={' > ' + severityFormat(severity - 0.1)}
+                  checked={true}
+                  convert={parseFloat}
+                  value={severity}
+                  onChange={onValueChange}
+                />
+              ) : (
+                <Radio
+                  name="severity"
+                  title={translatedResultSeverityRiskFactor(severity)}
+                  checked={state.severity === severity}
+                  convert={parseFloat}
+                  value={severity}
+                  onChange={onValueChange}
+                />
               )}
               {!isDefined(severity) && (
-                <Layout>
+                <Row>
                   <Radio
                     name="severity"
                     title={_('> 0.0')}
@@ -360,43 +356,41 @@ const OverrideDialog = ({
                     convert={parseFloat}
                     onChange={onValueChange}
                   />
-                </Layout>
+                </Row>
               )}
             </FormGroup>
 
-            <FormGroup title={_('New Severity')}>
-              <Divider>
-                <Radio
-                  name="custom_severity"
-                  checked={state.custom_severity === NO_VALUE}
-                  convert={parseYesNo}
-                  value={NO_VALUE}
-                  onChange={onValueChange}
-                />
-                <Select
-                  name="new_severity_from_list"
-                  disabled={state.custom_severity === YES_VALUE}
-                  convert={parseFloat}
-                  items={severity_from_list_items}
-                  value={state.new_severity_from_list}
-                  onChange={onValueChange}
-                />
-                <Radio
-                  name="custom_severity"
-                  title={_('Other')}
-                  checked={state.custom_severity === YES_VALUE}
-                  convert={parseYesNo}
-                  value={YES_VALUE}
-                  onChange={onValueChange}
-                />
-                <TextField
-                  name="newSeverity"
-                  disabled={state.custom_severity === NO_VALUE}
-                  convert={parseFloat}
-                  value={state.newSeverity}
-                  onChange={onValueChange}
-                />
-              </Divider>
+            <FormGroup title={_('New Severity')} direction="row">
+              <Radio
+                name="custom_severity"
+                checked={state.custom_severity === NO_VALUE}
+                convert={parseYesNo}
+                value={NO_VALUE}
+                onChange={onValueChange}
+              />
+              <Select
+                name="new_severity_from_list"
+                disabled={state.custom_severity === YES_VALUE}
+                convert={parseFloat}
+                items={severity_from_list_items}
+                value={state.new_severity_from_list}
+                onChange={onValueChange}
+              />
+              <Radio
+                name="custom_severity"
+                title={_('Other')}
+                checked={state.custom_severity === YES_VALUE}
+                convert={parseYesNo}
+                value={YES_VALUE}
+                onChange={onValueChange}
+              />
+              <TextField
+                name="newSeverity"
+                disabled={state.custom_severity === NO_VALUE}
+                convert={parseFloat}
+                value={state.newSeverity}
+                onChange={onValueChange}
+              />
             </FormGroup>
 
             <FormGroup title={_('Task')}>
@@ -407,7 +401,7 @@ const OverrideDialog = ({
                 value={TASK_ANY}
                 onChange={onValueChange}
               />
-              <Divider>
+              <Row>
                 <Radio
                   name="task_id"
                   checked={state.task_id === TASK_SELECTED}
@@ -417,12 +411,13 @@ const OverrideDialog = ({
 
                 <Select
                   name="task_uuid"
+                  grow="1"
                   disabled={state.task_id !== TASK_SELECTED}
                   items={renderSelectItems(tasks)}
                   value={state.task_uuid}
                   onChange={onValueChange}
                 />
-              </Divider>
+              </Row>
             </FormGroup>
 
             <FormGroup title={_('Result')}>
@@ -433,7 +428,7 @@ const OverrideDialog = ({
                 value={RESULT_ANY}
                 onChange={onValueChange}
               />
-              <Divider>
+              <Row>
                 <Radio
                   name="result_id"
                   title={
@@ -451,26 +446,25 @@ const OverrideDialog = ({
                   !fixed && (
                     <TextField
                       name="result_uuid"
-                      size="34"
+                      grow="1"
                       disabled={state.result_id !== RESULT_UUID}
                       value={state.result_uuid}
                       onChange={onValueChange}
                     />
                   )}
-              </Divider>
+              </Row>
             </FormGroup>
 
             <FormGroup title={_('Text')}>
               <TextArea
                 name="text"
-                grow="1"
-                rows="10"
-                cols="60"
+                minRows="4"
+                autosize={true}
                 value={state.text}
                 onChange={onValueChange}
               />
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/permissions/dialog.jsx b/src/web/pages/permissions/dialog.jsx
index 2966d38411..9e73036e6d 100644
--- a/src/web/pages/permissions/dialog.jsx
+++ b/src/web/pages/permissions/dialog.jsx
@@ -18,13 +18,13 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
+import Model from 'gmp/model';
 
 import {isDefined} from 'gmp/utils/identity';
+import {split} from 'gmp/utils/string';
 
 import PropTypes from 'web/utils/proptypes';
 import {permissionDescription, renderSelectItems} from 'web/utils/render';
-import withCapabilities from 'web/utils/withCapabilities';
 
 import SaveDialog from 'web/components/dialog/savedialog';
 
@@ -33,11 +33,10 @@ import Radio from 'web/components/form/radio';
 import Select from 'web/components/form/select';
 import TextField from 'web/components/form/textfield';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-import Model from 'gmp/model';
+import Row from 'web/components/layout/row';
 
-import {split} from 'gmp/utils/string';
+import useCapabilities from 'web/utils/useCapabilities';
+import useTranslation from 'web/hooks/useTranslation';
 
 const NEED_RESOURCE_ID = [
   'Super',
@@ -118,7 +117,6 @@ const NEED_RESOURCE_ID = [
 ];
 
 const PermissionDialog = ({
-  capabilities,
   comment = '',
   fixedResource = false,
   groupId,
@@ -132,12 +130,16 @@ const PermissionDialog = ({
   roleId,
   roles = [],
   subjectType,
-  title = _('New Permission'),
+  title,
   userId,
   users = [],
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
+  const capabilities = useCapabilities();
+
+  title = title || _('New Permission');
   const permItems = [
     {
       value: 'Super',
@@ -210,13 +212,13 @@ const PermissionDialog = ({
         }
 
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <Select
+                grow="1"
                 name="name"
                 value={state.name}
                 items={permItems}
-                width="300"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -226,71 +228,72 @@ const PermissionDialog = ({
                 name="comment"
                 value={state.comment}
                 grow="1"
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
 
-            <FormGroup title={_('Subject')} flex="column">
-              <Divider flex="column">
-                {capabilities.mayAccess('users') && (
-                  <Divider>
-                    <Radio
-                      name="subjectType"
-                      checked={state.subjectType === 'user'}
-                      title={_('User')}
-                      value="user"
-                      onChange={onValueChange}
-                    />
-                    <Select
-                      name="userId"
-                      items={renderSelectItems(users)}
-                      value={state.userId}
-                      onChange={onValueChange}
-                    />
-                  </Divider>
-                )}
-                {capabilities.mayAccess('roles') && (
-                  <Divider>
-                    <Radio
-                      name="subjectType"
-                      checked={state.subjectType === 'role'}
-                      title={_('Role')}
-                      value="role"
-                      onChange={onValueChange}
-                    />
-                    <Select
-                      name="roleId"
-                      items={renderSelectItems(roles)}
-                      value={state.roleId}
-                      onChange={onValueChange}
-                    />
-                  </Divider>
-                )}
-                {capabilities.mayAccess('groups') && (
-                  <Divider>
-                    <Radio
-                      name="subjectType"
-                      checked={state.subjectType === 'group'}
-                      disabled={groups.length === 0}
-                      title={_('Group')}
-                      value="group"
-                      onChange={onValueChange}
-                    />
-                    <Select
-                      name="groupId"
-                      items={renderSelectItems(groups)}
-                      value={state.groupId}
-                      onChange={onValueChange}
-                    />
-                  </Divider>
-                )}
-              </Divider>
+            <FormGroup title={_('Subject')}>
+              {capabilities.mayAccess('users') && (
+                <Row>
+                  <Radio
+                    name="subjectType"
+                    checked={state.subjectType === 'user'}
+                    title={_('User')}
+                    value="user"
+                    onChange={onValueChange}
+                  />
+                  <Select
+                    grow="1"
+                    name="userId"
+                    items={renderSelectItems(users)}
+                    value={state.userId}
+                    onChange={onValueChange}
+                  />
+                </Row>
+              )}
+              {capabilities.mayAccess('roles') && (
+                <Row>
+                  <Radio
+                    name="subjectType"
+                    checked={state.subjectType === 'role'}
+                    title={_('Role')}
+                    value="role"
+                    onChange={onValueChange}
+                  />
+                  <Select
+                    grow="1"
+                    name="roleId"
+                    items={renderSelectItems(roles)}
+                    value={state.roleId}
+                    onChange={onValueChange}
+                  />
+                </Row>
+              )}
+              {capabilities.mayAccess('groups') && (
+                <Row>
+                  <Radio
+                    name="subjectType"
+                    checked={state.subjectType === 'group'}
+                    disabled={groups.length === 0}
+                    title={_('Group')}
+                    value="group"
+                    onChange={onValueChange}
+                  />
+                  <Select
+                    grow="1"
+                    name="groupId"
+                    items={renderSelectItems(groups)}
+                    value={state.groupId}
+                    onChange={onValueChange}
+                  />
+                </Row>
+              )}
             </FormGroup>
 
             {state.name === 'Super' && (
               <FormGroup title={_('Resource Type')}>
                 <Select
+                  grow="1"
                   items={[
                     {
                       value: '',
@@ -318,10 +321,10 @@ const PermissionDialog = ({
             {showResourceId && (
               <FormGroup title={resourceIdTitle}>
                 <TextField
+                  grow="1"
                   name="resourceId"
                   value={state.resourceId}
                   disabled={fixedResource}
-                  size="50"
                   onChange={onValueChange}
                 />
               </FormGroup>
@@ -329,7 +332,7 @@ const PermissionDialog = ({
             <FormGroup title={_('Description')}>
               {permissionDescription(state.name, resource, subject)}
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
@@ -337,7 +340,6 @@ const PermissionDialog = ({
 };
 
 PermissionDialog.propTypes = {
-  capabilities: PropTypes.capabilities.isRequired,
   comment: PropTypes.string,
   fixedResource: PropTypes.bool,
   groupId: PropTypes.id,
@@ -358,6 +360,6 @@ PermissionDialog.propTypes = {
   onSave: PropTypes.func.isRequired,
 };
 
-export default withCapabilities(PermissionDialog);
+export default PermissionDialog;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/permissions/multipledialog.jsx b/src/web/pages/permissions/multipledialog.jsx
index cd68b2bccb..bd32fac8a9 100644
--- a/src/web/pages/permissions/multipledialog.jsx
+++ b/src/web/pages/permissions/multipledialog.jsx
@@ -20,12 +20,9 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import _ from 'gmp/locale';
-
 import {typeName, getEntityType} from 'gmp/utils/entitytype';
 
 import PropTypes from 'web/utils/proptypes';
-import withCapabilities from 'web/utils/withCapabilities';
 import {renderSelectItems} from 'web/utils/render';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -35,7 +32,10 @@ import Radio from 'web/components/form/radio';
 import Select from 'web/components/form/select';
 
 import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+import Row from 'web/components/layout/row';
+
+import useCapabilities from 'web/utils/useCapabilities';
+import useTranslation from 'web/hooks/useTranslation';
 
 export const CURRENT_RESOURCE_ONLY = '0';
 export const INCLUDE_RELATED_RESOURCES = '1';
@@ -46,185 +46,184 @@ const EntityName = styled.div`
   word-break: break-all;
 `;
 
-const MultiplePermissionDialog = withCapabilities(
-  ({
-    capabilities,
-    entityName = '',
-    entityType = '',
+const MultiplePermissionDialog = ({
+  entityName = '',
+  entityType = '',
+  groupId,
+  groups = [],
+  id,
+  includeRelated = INCLUDE_RELATED_RESOURCES,
+  permission = 'read',
+  related = [],
+  roleId,
+  roles = [],
+  subjectType = 'user',
+  title,
+  userId,
+  users = [],
+  onChange,
+  onClose,
+  onSave,
+}) => {
+  const [_] = useTranslation();
+  const capabilities = useCapabilities();
+  const hasRelated = related.length > 0;
+
+  title = title || _('Create Permission');
+
+  const defaultValues = {
+    permission,
+    subjectType,
+  };
+
+  const values = {
+    includeRelated,
     groupId,
-    groups = [],
     id,
-    includeRelated = INCLUDE_RELATED_RESOURCES,
-    permission = 'read',
-    related = [],
+    entityType,
+    related,
     roleId,
-    roles = [],
-    subjectType = 'user',
-    title = _('Create Permission'),
     userId,
-    users = [],
-    onChange,
-    onClose,
-    onSave,
-  }) => {
-    const hasRelated = related.length > 0;
-
-    const defaultValues = {
-      permission,
-      subjectType,
-    };
-
-    const values = {
-      includeRelated,
-      groupId,
-      id,
-      entityType,
-      related,
-      roleId,
-      userId,
-    };
-
-    const includeRelatedItems = [];
-    if (hasRelated || includeRelated === INCLUDE_RELATED_RESOURCES) {
-      includeRelatedItems.push({
-        label: _('including related resources'),
-        value: INCLUDE_RELATED_RESOURCES,
-      });
-    }
+  };
 
+  const includeRelatedItems = [];
+  if (hasRelated || includeRelated === INCLUDE_RELATED_RESOURCES) {
     includeRelatedItems.push({
-      label: _('for current resource only'),
-      value: CURRENT_RESOURCE_ONLY,
+      label: _('including related resources'),
+      value: INCLUDE_RELATED_RESOURCES,
     });
+  }
 
-    if (hasRelated || includeRelated === RELATED_RESOURCES_ONLY) {
-      includeRelatedItems.push({
-        label: _('for related resources only'),
-        value: RELATED_RESOURCES_ONLY,
-      });
-    }
+  includeRelatedItems.push({
+    label: _('for current resource only'),
+    value: CURRENT_RESOURCE_ONLY,
+  });
 
-    return (
-      <SaveDialog
-        title={title}
-        onClose={onClose}
-        onSave={onSave}
-        defaultValues={defaultValues}
-        values={values}
-      >
-        {({values: state, onValueChange}) => {
-          return (
-            <Layout flex="column">
-              <FormGroup title={_('Grant')}>
-                <Divider>
+  if (hasRelated || includeRelated === RELATED_RESOURCES_ONLY) {
+    includeRelatedItems.push({
+      label: _('for related resources only'),
+      value: RELATED_RESOURCES_ONLY,
+    });
+  }
+
+  return (
+    <SaveDialog
+      title={title}
+      onClose={onClose}
+      onSave={onSave}
+      defaultValues={defaultValues}
+      values={values}
+    >
+      {({values: state, onValueChange}) => {
+        return (
+          <>
+            <FormGroup title={_('Grant')} direction="row">
+              <Select
+                grow="1"
+                name="permission"
+                value={state.permission}
+                items={[
+                  {
+                    label: _('read'),
+                    value: 'read',
+                  },
+                  {
+                    label: _('write'),
+                    value: 'write',
+                  },
+                ]}
+                onChange={onValueChange}
+              />
+              <span>{_('Permission')}</span>
+            </FormGroup>
+            <FormGroup title={_('to')}>
+              {capabilities.mayAccess('users') && (
+                <Row>
+                  <Radio
+                    name="subjectType"
+                    checked={state.subjectType === 'user'}
+                    title={_('User')}
+                    value="user"
+                    onChange={onValueChange}
+                  />
                   <Select
-                    name="permission"
-                    value={state.permission}
-                    items={[
-                      {
-                        label: _('read'),
-                        value: 'read',
-                      },
-                      {
-                        label: _('write'),
-                        value: 'write',
-                      },
-                    ]}
+                    grow="1"
+                    name="userId"
+                    value={state.userId}
+                    items={renderSelectItems(users)}
+                    onChange={onChange}
+                  />
+                </Row>
+              )}
+
+              {capabilities.mayAccess('roles') && (
+                <Row>
+                  <Radio
+                    name="subjectType"
+                    checked={state.subjectType === 'role'}
+                    title={_('Role')}
+                    value="role"
                     onChange={onValueChange}
                   />
-                  <span>{_('Permission')}</span>
-                </Divider>
-              </FormGroup>
-              <FormGroup flex="column" title={_('to')}>
-                <Divider flex="column">
-                  {capabilities.mayAccess('users') && (
-                    <Divider>
-                      <Radio
-                        name="subjectType"
-                        checked={state.subjectType === 'user'}
-                        title={_('User')}
-                        value="user"
-                        onChange={onValueChange}
-                      />
-                      <Select
-                        name="userId"
-                        value={state.userId}
-                        items={renderSelectItems(users)}
-                        onChange={onChange}
-                      />
-                    </Divider>
-                  )}
-
-                  {capabilities.mayAccess('roles') && (
-                    <Divider>
-                      <Radio
-                        name="subjectType"
-                        checked={state.subjectType === 'role'}
-                        title={_('Role')}
-                        value="role"
-                        onChange={onValueChange}
-                      />
-                      <Select
-                        name="roleId"
-                        value={state.roleId}
-                        items={renderSelectItems(roles)}
-                        onChange={onChange}
-                      />
-                    </Divider>
-                  )}
-
-                  {capabilities.mayAccess('groups') && (
-                    <Divider>
-                      <Radio
-                        name="subjectType"
-                        checked={state.subjectType === 'group'}
-                        title={_('Group')}
-                        value="group"
-                        onChange={onValueChange}
-                      />
-                      <Select
-                        name="groupId"
-                        value={state.groupId}
-                        items={renderSelectItems(groups)}
-                        onChange={onChange}
-                      />
-                    </Divider>
-                  )}
-                </Divider>
-              </FormGroup>
-              <FormGroup title={_('on')} flex="column">
-                <Divider>
-                  <span>{typeName(getEntityType(state))}</span>
-                  <EntityName>{entityName}</EntityName>
                   <Select
-                    name="includeRelated"
-                    value={state.includeRelated}
-                    items={includeRelatedItems}
+                    grow="1"
+                    name="roleId"
+                    value={state.roleId}
+                    items={renderSelectItems(roles)}
                     onChange={onChange}
                   />
-                </Divider>
-              </FormGroup>
-              <FormGroup title={_('related resource(s)')} flex="column">
-                {hasRelated && (
-                  <ul>
-                    {state.related.map(rentity => (
-                      <li key={rentity.id}>
-                        <Divider>
-                          {typeName(getEntityType(rentity))}
-                          <i>{rentity.name}</i>
-                        </Divider>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </FormGroup>
-            </Layout>
-          );
-        }}
-      </SaveDialog>
-    );
-  },
-);
+                </Row>
+              )}
+
+              {capabilities.mayAccess('groups') && (
+                <Row>
+                  <Radio
+                    name="subjectType"
+                    checked={state.subjectType === 'group'}
+                    title={_('Group')}
+                    value="group"
+                    onChange={onValueChange}
+                  />
+                  <Select
+                    grow="1"
+                    name="groupId"
+                    value={state.groupId}
+                    items={renderSelectItems(groups)}
+                    onChange={onChange}
+                  />
+                </Row>
+              )}
+            </FormGroup>
+            <FormGroup title={_('on')} direction="row">
+              <span>{typeName(getEntityType(state))}</span>
+              <EntityName>{entityName}</EntityName>
+              <Select
+                name="includeRelated"
+                value={state.includeRelated}
+                items={includeRelatedItems}
+                onChange={onChange}
+              />
+            </FormGroup>
+            <FormGroup title={_('related resource(s)')}>
+              {hasRelated && (
+                <ul>
+                  {state.related.map(rentity => (
+                    <li key={rentity.id}>
+                      <Divider>
+                        {typeName(getEntityType(rentity))}
+                        <i>{rentity.name}</i>
+                      </Divider>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </FormGroup>
+          </>
+        );
+      }}
+    </SaveDialog>
+  );
+};
 
 MultiplePermissionDialog.propTypes = {
   entityName: PropTypes.string,
diff --git a/src/web/pages/policies/dialog.jsx b/src/web/pages/policies/dialog.jsx
index 7f2c65e57c..c410b3fef4 100644
--- a/src/web/pages/policies/dialog.jsx
+++ b/src/web/pages/policies/dialog.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -27,15 +25,14 @@ import SaveDialog from 'web/components/dialog/savedialog';
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
+
+const CreatePolicyDialog = ({comment = '', name, title, onClose, onSave}) => {
+  const [_] = useTranslation();
+
+  title = title || _('New Policy');
+  name = name || _('Unnamed');
 
-const CreatePolicyDialog = ({
-  comment = '',
-  name = _('Unnamed'),
-  title = _('New Policy'),
-  onClose,
-  onSave,
-}) => {
   const data = {
     comment,
     name,
@@ -49,13 +46,11 @@ const CreatePolicyDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
-                grow="1"
                 value={state.name}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -64,12 +59,10 @@ const CreatePolicyDialog = ({
               <TextField
                 name="comment"
                 value={state.comment}
-                grow="1"
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/portlists/dialog.jsx b/src/web/pages/portlists/dialog.jsx
index dc919cdd21..1ff318f68c 100644
--- a/src/web/pages/portlists/dialog.jsx
+++ b/src/web/pages/portlists/dialog.jsx
@@ -17,15 +17,10 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {NO_VALUE, YES_VALUE, parseYesNo} from 'gmp/parser';
 
 import {isDefined} from 'gmp/utils/identity';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -39,6 +34,10 @@ import NewIcon from 'web/components/icon/newicon';
 
 import Section from 'web/components/section/section';
 
+import Row from 'web/components/layout/row';
+
+import useTranslation from 'web/hooks/useTranslation';
+
 import PortRangesTable from './portrangestable';
 
 const FROM_FILE = YES_VALUE;
@@ -48,19 +47,22 @@ const PortListsDialog = ({
   comment = '',
   from_file = NO_VALUE,
   id,
-  name = _('Unnamed'),
+  name,
   port_list,
   port_range = 'T:1-5,7,9,U:1-3,5,7,9',
   port_ranges = [],
-  title = _('New Port List'),
+  title,
   onClose,
   onNewPortRangeClick,
   onTmpDeletePortRange,
   onSave,
 }) => {
-  const is_edit = isDefined(port_list);
+  const [_] = useTranslation();
+  const isEdit = isDefined(port_list);
+  name = name || _('Unnamed');
+  title = title || _('New Port List');
 
-  const newrangeicon = (
+  const newRangeIcon = (
     <div>
       <NewIcon
         value={port_list}
@@ -88,66 +90,58 @@ const PortListsDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
-            <FormGroup title={_('Name')}>
-              <TextField
-                name="name"
-                value={state.name}
-                grow="1"
-                size="30"
-                onChange={onValueChange}
-              />
-            </FormGroup>
-
-            <FormGroup title={_('Comment')}>
-              <TextField
-                name="comment"
-                value={state.comment}
-                grow="1"
-                size="30"
-                onChange={onValueChange}
-              />
-            </FormGroup>
-
-            {!is_edit && (
-              <FormGroup title={_('Port Ranges')} flex="column">
-                <Divider flex="column">
-                  <Divider>
-                    <Radio
-                      title={_('Manual')}
-                      name="from_file"
-                      value={NOT_FROM_FILE}
-                      onChange={onValueChange}
-                      checked={parseYesNo(state.from_file) !== FROM_FILE}
-                    />
-                    <TextField
-                      grow="1"
-                      name="port_range"
-                      value={state.port_range}
-                      disabled={parseYesNo(state.from_file) === FROM_FILE}
-                      onChange={onValueChange}
-                      size="30"
-                    />
-                  </Divider>
-                  <Divider>
-                    <Radio
-                      title={_('From file')}
-                      name="from_file"
-                      value={FROM_FILE}
-                      onChange={onValueChange}
-                      checked={parseYesNo(state.from_file) === FROM_FILE}
-                    />
-                    <FileField
-                      name="file"
-                      disabled={parseYesNo(state.from_file) !== FROM_FILE}
-                      onChange={onValueChange}
-                    />
-                  </Divider>
-                </Divider>
+          <>
+            <TextField
+              name="name"
+              title={_('Name')}
+              value={state.name}
+              onChange={onValueChange}
+            />
+
+            <TextField
+              name="comment"
+              title={_('Comment')}
+              value={state.comment}
+              onChange={onValueChange}
+            />
+
+            {!isEdit && (
+              <FormGroup title={_('Port Ranges')}>
+                <Row>
+                  <Radio
+                    title={_('Manual')}
+                    name="from_file"
+                    value={NOT_FROM_FILE}
+                    onChange={onValueChange}
+                    checked={parseYesNo(state.from_file) !== FROM_FILE}
+                  />
+                  <TextField
+                    grow="1"
+                    name="port_range"
+                    value={state.port_range}
+                    disabled={parseYesNo(state.from_file) === FROM_FILE}
+                    onChange={onValueChange}
+                  />
+                </Row>
+                <Row>
+                  <Radio
+                    title={_('From file')}
+                    name="from_file"
+                    value={FROM_FILE}
+                    onChange={onValueChange}
+                    checked={parseYesNo(state.from_file) === FROM_FILE}
+                  />
+                  <FileField
+                    name="file"
+                    grow="1"
+                    disabled={parseYesNo(state.from_file) !== FROM_FILE}
+                    onChange={onValueChange}
+                  />
+                </Row>
               </FormGroup>
             )}
-            {is_edit && (
-              <Section title={_('Port Ranges')} extra={newrangeicon}>
+            {isEdit && (
+              <Section title={_('Port Ranges')} extra={newRangeIcon}>
                 {isDefined(port_list) && (
                   <PortRangesTable
                     portRanges={state.port_ranges}
@@ -156,7 +150,7 @@ const PortListsDialog = ({
                 )}
               </Section>
             )}
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/portlists/importdialog.jsx b/src/web/pages/portlists/importdialog.jsx
index 2ceaae21fb..c6cc66916a 100644
--- a/src/web/pages/portlists/importdialog.jsx
+++ b/src/web/pages/portlists/importdialog.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -26,9 +24,10 @@ import SaveDialog from 'web/components/dialog/savedialog';
 import FileField from 'web/components/form/filefield';
 import FormGroup from 'web/components/form/formgroup';
 
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
 
 const ImportDialog = ({onClose, onSave}) => {
+  const [_] = useTranslation();
   return (
     <SaveDialog
       buttonTitle={_('Import')}
@@ -38,11 +37,9 @@ const ImportDialog = ({onClose, onSave}) => {
     >
       {({onValueChange}) => {
         return (
-          <Layout flex="column">
-            <FormGroup title={_('Import XML Port List')} titleSize="3">
-              <FileField name="xml_file" onChange={onValueChange} />
-            </FormGroup>
-          </Layout>
+          <FormGroup title={_('Import XML Port List')}>
+            <FileField name="xml_file" onChange={onValueChange} />
+          </FormGroup>
         );
       }}
     </SaveDialog>
@@ -55,5 +52,3 @@ ImportDialog.propTypes = {
 };
 
 export default ImportDialog;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/portlists/portrangedialog.jsx b/src/web/pages/portlists/portrangedialog.jsx
index 8bce67c250..2ccf9c09d6 100644
--- a/src/web/pages/portlists/portrangedialog.jsx
+++ b/src/web/pages/portlists/portrangedialog.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {parseInt} from 'gmp/parser';
 
 import PropTypes from 'web/utils/proptypes';
@@ -29,17 +27,15 @@ import FormGroup from 'web/components/form/formgroup';
 import Radio from 'web/components/form/radio';
 import TextField from 'web/components/form/textfield';
 
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
 
 const convertPort = value => (value === '' ? value : parseInt(value));
 
-const PortRangeDialog = ({
-  id,
-  port_type = 'tcp',
-  title = _('New Port Range'),
-  onClose,
-  onSave,
-}) => {
+const PortRangeDialog = ({id, port_type = 'tcp', title, onClose, onSave}) => {
+  const [_] = useTranslation();
+
+  title = title || _('New Port Range');
+
   const data = {
     id,
     port_range_start: '',
@@ -56,13 +52,11 @@ const PortRangeDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Start')}>
               <TextField
                 name="port_range_start"
                 value={state.port_range_start}
-                grow="1"
-                size="30"
                 convert={convertPort}
                 onChange={onValueChange}
               />
@@ -72,14 +66,12 @@ const PortRangeDialog = ({
               <TextField
                 name="port_range_end"
                 value={state.port_range_end}
-                grow="1"
-                size="30"
                 convert={convertPort}
                 onChange={onValueChange}
               />
             </FormGroup>
 
-            <FormGroup title={_('Protocol')}>
+            <FormGroup title={_('Protocol')} direction="row">
               <Radio
                 title={_('TCP')}
                 name="port_type"
@@ -95,7 +87,7 @@ const PortRangeDialog = ({
                 checked={state.port_type === 'udp'}
               />
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/portlists/portrangestable.jsx b/src/web/pages/portlists/portrangestable.jsx
index c6bf496039..1a9a033c4d 100644
--- a/src/web/pages/portlists/portrangestable.jsx
+++ b/src/web/pages/portlists/portrangestable.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
 import PropTypes from 'web/utils/proptypes';
@@ -32,7 +30,10 @@ import TableHead from 'web/components/table/head';
 import TableHeader from 'web/components/table/header';
 import TableRow from 'web/components/table/row';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const PortRangesTable = ({actions = true, portRanges, onDeleteClick}) => {
+  const [_] = useTranslation();
   if (!isDefined(portRanges) || portRanges.length === 0) {
     return _('No Port Ranges available');
   }
diff --git a/src/web/pages/radius/dialog.jsx b/src/web/pages/radius/dialog.jsx
index 0d1ec8fbf6..6505087869 100644
--- a/src/web/pages/radius/dialog.jsx
+++ b/src/web/pages/radius/dialog.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -29,9 +27,10 @@ import FormGroup from 'web/components/form/formgroup';
 import PasswordField from 'web/components/form/passwordfield';
 import TextField from 'web/components/form/textfield';
 
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
 
 const RadiusDialog = ({enable = false, radiushost = '', onClose, onSave}) => {
+  const [_] = useTranslation();
   const uncontrolledValues = {
     enable,
     radiushost,
@@ -46,36 +45,35 @@ const RadiusDialog = ({enable = false, radiushost = '', onClose, onSave}) => {
       onSave={onSave}
     >
       {({values, onValueChange}) => (
-        <Layout flex="column">
-          <FormGroup title={_('Enable')}>
-            <CheckBox
-              data-testid="enable-checkbox"
-              name="enable"
-              checked={values.enable}
-              checkedValue={true}
-              unCheckedValue={false}
-              onChange={onValueChange}
-            />
-          </FormGroup>
+        <>
+          <CheckBox
+            title={_('Enable')}
+            data-testid="enable-checkbox"
+            name="enable"
+            checked={values.enable}
+            checkedValue={true}
+            unCheckedValue={false}
+            onChange={onValueChange}
+          />
           <FormGroup title={_('RADIUS Host')}>
             <TextField
+              grow="1"
               data-testid="radiushost-textfield"
               name="radiushost"
-              size="50"
               value={values.radiushost}
               onChange={onValueChange}
             />
           </FormGroup>
           <FormGroup title={_('Secret Key')}>
             <PasswordField
+              grow="1"
               data-testid="radiuskey-textfield"
               name="radiuskey"
-              size="50"
               value={values.radiuskey}
               onChange={onValueChange}
             />
           </FormGroup>
-        </Layout>
+        </>
       )}
     </SaveDialog>
   );
diff --git a/src/web/pages/reportconfigs/dialog.jsx b/src/web/pages/reportconfigs/dialog.jsx
index 4b3fb1d4f8..5d1761b9b7 100644
--- a/src/web/pages/reportconfigs/dialog.jsx
+++ b/src/web/pages/reportconfigs/dialog.jsx
@@ -37,8 +37,6 @@ import MultiSelect from 'web/components/form/multiselect';
 import Select from 'web/components/form/select';
 import YesNoRadio from 'web/components/form/yesnoradio';
 
-import Layout from 'web/components/layout/layout';
-
 import Table from 'web/components/table/table';
 import TableBody from 'web/components/table/body';
 import TableData from 'web/components/table/data';
@@ -56,7 +54,7 @@ const Param = ({
   formats,
 }) => {
   const {name, type, min, max} = value;
-  const field_value = data[name];
+  const fieldValue = data[name];
 
   const formatOptions = map(formats, format => ({
     label: format.name,
@@ -71,7 +69,7 @@ const Param = ({
         yesValue={true}
         noValue={false}
         name={name}
-        value={field_value}
+        value={fieldValue}
         onChange={onPrefChange}
       />
     );
@@ -82,7 +80,7 @@ const Param = ({
         name={name}
         min={min}
         max={max}
-        value={field_value}
+        value={fieldValue}
         onChange={onPrefChange}
       />
     );
@@ -95,7 +93,7 @@ const Param = ({
       <MultiSelect
         name={name}
         items={typeOptions}
-        value={field_value}
+        value={fieldValue}
         onChange={onPrefChange}
       />
     );
@@ -104,7 +102,7 @@ const Param = ({
       <TextField
         name={name}
         maxLength={max}
-        value={field_value}
+        value={fieldValue}
         onChange={onPrefChange}
       />
     );
@@ -118,7 +116,7 @@ const Param = ({
       <Select
         name={name}
         items={typeOptions}
-        value={field_value}
+        value={fieldValue}
         onChange={onPrefChange}
       />
     );
@@ -127,23 +125,22 @@ const Param = ({
       <MultiSelect
         name={name}
         items={formatOptions}
-        value={field_value}
+        value={fieldValue}
         onChange={onPrefChange}
       />
     );
   } else {
     field = (
       <TextArea
-        cols="80"
-        rows="5"
+        minRows="5"
         name={name}
-        value={field_value}
+        value={fieldValue}
         onChange={onPrefChange}
       />
     );
   }
 
-  const use_default_check = (
+  const useDefaultCheck = (
     <Checkbox
       name={name}
       checked={usingDefaultData[name]}
@@ -155,7 +152,7 @@ const Param = ({
     <TableRow>
       <TableData>{name}</TableData>
       <TableData>{field}</TableData>
-      <TableData>{use_default_check}</TableData>
+      <TableData>{useDefaultCheck}</TableData>
     </TableRow>
   );
 };
@@ -327,10 +324,9 @@ class Dialog extends React.Component {
       >
         {({values: state, onValueChange}) => {
           return (
-            <Layout flex="column">
+            <>
               <FormGroup title={_('Name')}>
                 <TextField
-                  grow="1"
                   name="name"
                   value={state.name}
                   onChange={onValueChange}
@@ -339,7 +335,6 @@ class Dialog extends React.Component {
 
               <FormGroup title={_('Comment')}>
                 <TextField
-                  grow="1"
                   name="comment"
                   value={state.comment}
                   onChange={onValueChange}
@@ -347,35 +342,33 @@ class Dialog extends React.Component {
               </FormGroup>
 
               <FormGroup title={_('Report Format')}>
-                {isDefined(format_items) && format_items.length > 0 && (
+                {isDefined(format_items) && format_items.length > 0 ? (
                   <Select
+                    grow="1"
                     name="report_format"
                     disabled={is_edit}
                     items={format_items}
                     value={state.report_format}
                     onChange={this.handleReportFormatChange}
                   />
-                )}
-                {(!isDefined(format_items) || format_items.length === 0) && (
+                ) : (
                   <span>{_('No configurable report formats found.')}</span>
                 )}
               </FormGroup>
 
               {isDefined(originalParamInfo) && originalParamInfo.length > 0 && (
-                <h2>{_('Parameters')}</h2>
-              )}
-              {isDefined(originalParamInfo) && originalParamInfo.length > 0 && (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead width="25%">{_('Name')}</TableHead>
-                      <TableHead width="70%">{_('Value')}</TableHead>
-                      <TableHead width="10%">{_('Default')}</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {originalParamInfo.map(param => {
-                      return (
+                <>
+                  <h2>{_('Parameters')}</h2>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead width="25%">{_('Name')}</TableHead>
+                        <TableHead width="70%">{_('Value')}</TableHead>
+                        <TableHead width="10%">{_('Default')}</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {originalParamInfo.map(param => (
                         <Param
                           key={param.name}
                           value={param}
@@ -388,12 +381,12 @@ class Dialog extends React.Component {
                           }
                           onPrefChange={this.handlePrefChange}
                         />
-                      );
-                    })}
-                  </TableBody>
-                </Table>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </>
               )}
-            </Layout>
+            </>
           );
         }}
       </SaveDialog>
diff --git a/src/web/pages/reportformats/dialog.jsx b/src/web/pages/reportformats/dialog.jsx
index a451625997..0dd2529a40 100644
--- a/src/web/pages/reportformats/dialog.jsx
+++ b/src/web/pages/reportformats/dialog.jsx
@@ -16,11 +16,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, {useCallback} from 'react';
 
-import _ from 'gmp/locale';
-
-import {isDefined} from 'gmp/utils/identity';
+import {isDefined, isArray, hasValue} from 'gmp/utils/identity';
+import {map} from 'gmp/utils/array';
 
 import PropTypes from 'web/utils/proptypes';
 
@@ -30,35 +29,170 @@ import FileField from 'web/components/form/filefield';
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 import YesNoRadio from 'web/components/form/yesnoradio';
+import MultiSelect from 'web/components/form/multiselect';
+import Spinner from 'web/components/form/spinner';
+import Select from 'web/components/form/select';
+import TextArea from 'web/components/form/textarea';
+
+import Table from 'web/components/table/table';
+import TableBody from 'web/components/table/body';
+import TableData from 'web/components/table/data';
+import TableHeader from 'web/components/table/header';
+import TableHead from 'web/components/table/head';
+import TableRow from 'web/components/table/row';
+
+import useTranslation from 'web/hooks/useTranslation';
+
+const ReportFormatListParam = ({formats, idList, name, onValueChange}) => {
+  const formatOptions = map(formats, format => ({
+    label: format.name,
+    value: format.id,
+  }));
+
+  return (
+    <TableRow>
+      <TableData>{name}</TableData>
+      <TableData>
+        <MultiSelect
+          name={name}
+          items={formatOptions}
+          value={idList}
+          onChange={onValueChange}
+        />
+      </TableData>
+    </TableRow>
+  );
+};
+
+ReportFormatListParam.propTypes = {
+  formats: PropTypes.array.isRequired,
+  idList: PropTypes.array.isRequired,
+  name: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+};
 
-import Layout from 'web/components/layout/layout';
+const Param = ({data, value, onPrefChange}) => {
+  const {name, type, min, max} = value;
+  const field_value = data[name];
 
-class Dialog extends React.Component {
-  constructor(...args) {
-    super(...args);
+  let field;
+  if (type === 'boolean') {
+    field = (
+      <YesNoRadio name={name} value={field_value} onChange={onPrefChange} />
+    );
+  } else if (type === 'integer') {
+    field = (
+      <Spinner
+        type="int"
+        name={name}
+        min={min}
+        max={max}
+        value={field_value}
+        onChange={onPrefChange}
+      />
+    );
+  } else if (type === 'string') {
+    field = (
+      <TextField
+        name={name}
+        maxLength={max}
+        value={field_value}
+        onChange={onPrefChange}
+      />
+    );
+  } else if (type === 'selection') {
+    const typeOptions = map(value.options, opt => ({
+      label: opt.name,
+      value: opt.value,
+    }));
+
+    field = (
+      <Select
+        name={name}
+        items={typeOptions}
+        value={isArray(field_value) ? field_value : [field_value]}
+        onChange={onPrefChange}
+      />
+    );
+  } else {
+    field = (
+      <TextArea
+        minRows="5"
+        name={name}
+        value={field_value}
+        onChange={onPrefChange}
+      />
+    );
   }
-  render() {
-    const {
-      reportformat,
-      title = _('Import Report Format'),
-      onClose,
-      onSave,
-    } = this.props;
-
-    if (isDefined(reportformat)) {
-      return (
-        <SaveDialog
-          title={title}
-          onClose={onClose}
-          onSave={onSave}
-          defaultValues={reportformat}
-        >
-          {({values: state, onValueChange}) => {
+  return (
+    <TableRow>
+      <TableData>{name}</TableData>
+      <TableData>{field}</TableData>
+    </TableRow>
+  );
+};
+
+Param.propTypes = {
+  data: PropTypes.object.isRequired,
+  value: PropTypes.object.isRequired,
+  onPrefChange: PropTypes.func.isRequired,
+};
+
+const Dialog = ({
+  formats,
+  id_lists,
+  preferences,
+  reportformat: reportFormat,
+  title,
+  onClose,
+  onSave,
+  onValueChange,
+}) => {
+  const [_] = useTranslation();
+
+  title = title || _('Import Report Format');
+
+  const handlePrefChange = useCallback(
+    (value, name) => {
+      preferences[name] = value;
+
+      if (onValueChange) {
+        onValueChange(preferences, 'preferences');
+      }
+    },
+    [onValueChange, preferences],
+  );
+
+  const handleIdListChange = useCallback(
+    (value, name) => {
+      if (!hasValue(value)) {
+        value = [];
+      }
+
+      id_lists[name] = value;
+
+      if (onValueChange) {
+        onValueChange(id_lists, 'id_lists');
+      }
+    },
+    [onValueChange, id_lists],
+  );
+
+  if (isDefined(reportFormat)) {
+    return (
+      <SaveDialog
+        title={title}
+        onClose={onClose}
+        onSave={onSave}
+        defaultValues={reportFormat}
+      >
+        {
+          // eslint-disable-next-line no-shadow
+          ({values: state, onValueChange}) => {
             return (
-              <Layout flex="column">
+              <>
                 <FormGroup title={_('Name')}>
                   <TextField
-                    grow="1"
                     name="name"
                     value={state.name}
                     onChange={onValueChange}
@@ -67,7 +201,6 @@ class Dialog extends React.Component {
 
                 <FormGroup title={_('Summary')}>
                   <TextField
-                    grow="1"
                     name="summary"
                     value={state.summary}
                     onChange={onValueChange}
@@ -81,27 +214,65 @@ class Dialog extends React.Component {
                     onChange={onValueChange}
                   />
                 </FormGroup>
-              </Layout>
+
+                {reportFormat.params.length > 0 && <h2>Parameters</h2>}
+                {reportFormat.params.length > 0 && (
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead width="25%">{_('Name')}</TableHead>
+                        <TableHead width="75%">{_('Value')}</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {reportFormat.params.map(param => {
+                        if (param.type === 'report_format_list') {
+                          return (
+                            <ReportFormatListParam
+                              key={param.name}
+                              formats={formats}
+                              idList={id_lists[param.name]}
+                              name={param.name}
+                              onValueChange={handleIdListChange}
+                            />
+                          );
+                        }
+                        return (
+                          <Param
+                            key={param.name}
+                            value={param}
+                            data={preferences}
+                            onPrefChange={handlePrefChange}
+                          />
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                )}
+              </>
             );
-          }}
-        </SaveDialog>
-      );
-    }
-    return (
-      <SaveDialog title={title} onClose={onClose} onSave={onSave}>
-        {({values: state, onValueChange}) => {
+          }
+        }
+      </SaveDialog>
+    );
+  }
+  return (
+    <SaveDialog title={title} onClose={onClose} onSave={onSave}>
+      {
+        // eslint-disable-next-line no-shadow
+        ({values: state, onValueChange}) => {
           return (
-            <Layout flex="column">
-              <FormGroup title={_('Import XML Report Format')} titleSize="3">
+            <>
+              <FormGroup title={_('Import XML Report Format')}>
                 <FileField name="xml_file" onChange={onValueChange} />
               </FormGroup>
-            </Layout>
+            </>
           );
-        }}
-      </SaveDialog>
-    );
-  }
-}
+        }
+      }
+    </SaveDialog>
+  );
+};
 
 Dialog.propTypes = {
   active: PropTypes.yesno,
@@ -116,7 +287,4 @@ Dialog.propTypes = {
   onSave: PropTypes.func.isRequired,
   onValueChange: PropTypes.func,
 };
-
 export default Dialog;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/reports/downloadreportdialog.jsx b/src/web/pages/reports/downloadreportdialog.jsx
index c04f747219..91c21bd3ef 100644
--- a/src/web/pages/reports/downloadreportdialog.jsx
+++ b/src/web/pages/reports/downloadreportdialog.jsx
@@ -18,14 +18,11 @@
 
 import React, {useState} from 'react';
 
-import styled from 'styled-components';
-
-import _ from 'gmp/locale';
-
 import {NO_VALUE, YES_VALUE} from 'gmp/parser';
 
 import {selectSaveId} from 'gmp/utils/id';
 import {isDefined, isString} from 'gmp/utils/identity';
+
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 
@@ -40,12 +37,7 @@ import CheckBox from 'web/components/form/checkbox';
 import FormGroup from 'web/components/form/formgroup';
 import Select from 'web/components/form/select';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
-const StyledDiv = styled.div`
-  text-align: end;
-`;
+import useTranslation from 'web/hooks/useTranslation';
 
 const DownloadReportDialog = ({
   defaultReportConfigId,
@@ -63,6 +55,7 @@ const DownloadReportDialog = ({
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const filterString = isString(filter) ? filter : filter.toFilterString();
 
   if (defaultReportConfigId === '' || !isDefined(defaultReportConfigId)) {
@@ -113,50 +106,46 @@ const DownloadReportDialog = ({
         );
 
         return (
-          <Layout flex="column">
+          <>
             <ComposerContent
               filterString={filterString}
               includeNotes={values.includeNotes}
               includeOverrides={values.includeOverrides}
               onValueChange={onValueChange}
             />
-            <FormGroup title={_('Report Format')} titleSize="3">
-              <Divider flex="column">
-                <Select
-                  name="reportFormatId"
-                  value={reportFormatIdInState}
-                  items={renderSelectItems(reportFormats)}
-                  width="auto"
-                  onChange={handleReportFormatIdChange}
-                />
-              </Divider>
-            </FormGroup>
-            <FormGroup title={_('Report Config')} titleSize="3">
-              <Divider flex="column">
-                <Select
-                  name="reportConfigId"
-                  value={reportConfigIdInState}
-                  items={renderSelectItems(filteredReportConfigs, '')}
-                  width="auto"
-                  onChange={handleReportConfigIdChange}
-                />
-              </Divider>
+            <FormGroup title={_('Report Format')}>
+              <Select
+                grow="1"
+                name="reportFormatId"
+                value={reportFormatIdInState}
+                items={renderSelectItems(reportFormats)}
+                width="auto"
+                onChange={handleReportFormatIdChange}
+              />
             </FormGroup>
-            <StyledDiv>
-              <CheckBox
-                name="storeAsDefault"
-                checked={storeAsDefault}
-                checkedValue={YES_VALUE}
-                unCheckedValue={NO_VALUE}
-                title={_('Store as default')}
-                toolTipTitle={_(
-                  'Store indicated settings (without filter) as default',
-                )}
-                onChange={onValueChange}
+            <FormGroup title={_('Report Config')}>
+              <Select
+                grow="1"
+                name="reportConfigId"
+                value={reportConfigIdInState}
+                items={renderSelectItems(filteredReportConfigs, '')}
+                width="auto"
+                onChange={handleReportConfigIdChange}
               />
-            </StyledDiv>
+            </FormGroup>
+            <CheckBox
+              name="storeAsDefault"
+              checked={storeAsDefault}
+              checkedValue={YES_VALUE}
+              unCheckedValue={NO_VALUE}
+              title={_('Store as default')}
+              toolTipTitle={_(
+                'Store indicated settings (without filter) as default',
+              )}
+              onChange={onValueChange}
+            />
             {showThresholdMessage && <ThresholdMessage threshold={threshold} />}
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/reports/importdialog.jsx b/src/web/pages/reports/importdialog.jsx
index dcf8f6e1df..ff38c87606 100644
--- a/src/web/pages/reports/importdialog.jsx
+++ b/src/web/pages/reports/importdialog.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {YES_VALUE} from 'gmp/parser';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -30,12 +28,11 @@ import YesNoRadio from 'web/components/form/yesnoradio';
 
 import NewIcon from 'web/components/icon/newicon';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const ImportDialog = ({
   in_assets = YES_VALUE,
   newContainerTask = true,
@@ -46,6 +43,7 @@ const ImportDialog = ({
   onSave,
   onTaskChange,
 }) => {
+  const [_] = useTranslation();
   return (
     <SaveDialog
       buttonTitle={_('Import')}
@@ -56,39 +54,36 @@ const ImportDialog = ({
       defaultValues={{in_assets}}
     >
       {({values, onValueChange}) => (
-        <Layout flex="column">
+        <>
           <FormGroup title={_('Report')}>
-            <FileField name="xml_file" onChange={onValueChange} />
+            <FileField grow="1" name="xml_file" onChange={onValueChange} />
           </FormGroup>
-          <FormGroup title={_('Container Task')}>
-            <Divider>
-              <Select
-                name="task_id"
-                value={values.task_id}
-                items={renderSelectItems(tasks)}
-                onChange={onTaskChange}
+          <FormGroup title={_('Container Task')} direction="row">
+            <Select
+              grow="1"
+              name="task_id"
+              value={values.task_id}
+              items={renderSelectItems(tasks)}
+              onChange={onTaskChange}
+            />
+            {newContainerTask && (
+              <NewIcon
+                title={_('Create new Container Task')}
+                onClick={onNewContainerTaskClick}
               />
-              {newContainerTask && (
-                <NewIcon
-                  title={_('Create new Container Task')}
-                  onClick={onNewContainerTaskClick}
-                />
-              )}
-            </Divider>
+            )}
           </FormGroup>
           <FormGroup title={_('Add to Assets')}>
-            <Divider flex="column">
-              <span>
-                {_('Add to Assets with QoD >= 70% and Overrides enabled')}
-              </span>
-              <YesNoRadio
-                value={values.in_assets}
-                name="in_assets"
-                onChange={onValueChange}
-              />
-            </Divider>
+            <span>
+              {_('Add to Assets with QoD >= 70% and Overrides enabled')}
+            </span>
+            <YesNoRadio
+              value={values.in_assets}
+              name="in_assets"
+              onChange={onValueChange}
+            />
           </FormGroup>
-        </Layout>
+        </>
       )}
     </SaveDialog>
   );
diff --git a/src/web/pages/reports/triggeralertdialog.jsx b/src/web/pages/reports/triggeralertdialog.jsx
index 97be7c5db0..1aafacb4d5 100644
--- a/src/web/pages/reports/triggeralertdialog.jsx
+++ b/src/web/pages/reports/triggeralertdialog.jsx
@@ -18,10 +18,6 @@
 
 import React from 'react';
 
-import styled from 'styled-components';
-
-import _ from 'gmp/locale';
-
 import {NO_VALUE, YES_VALUE} from 'gmp/parser';
 
 import {selectSaveId} from 'gmp/utils/id';
@@ -41,12 +37,7 @@ import Select from 'web/components/form/select';
 
 import NewIcon from 'web/components/icon/newicon';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
-const StyledDiv = styled.div`
-  text-align: end;
-`;
+import useTranslation from 'web/hooks/useTranslation';
 
 const TriggerAlertDialog = ({
   alertId,
@@ -64,6 +55,7 @@ const TriggerAlertDialog = ({
   onNewAlertClick,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const filterString = isString(filter)
     ? filter
     : filter.simple().toFilterString();
@@ -93,7 +85,7 @@ const TriggerAlertDialog = ({
       onSave={onSave}
     >
       {({values, onValueChange}) => (
-        <Layout flex="column">
+        <>
           <ComposerContent
             applyOverrides={values.applyOverrides}
             filterString={filterString}
@@ -101,32 +93,29 @@ const TriggerAlertDialog = ({
             includeOverrides={values.includeOverrides}
             onValueChange={onValueChange}
           />
-          <FormGroup title={_('Alert')} titleSize="3">
-            <Divider>
-              <Select
-                name="alertId"
-                value={values.alertId}
-                items={renderSelectItems(alerts)}
-                onChange={onAlertChange}
-              />
-              <NewIcon onClick={onNewAlertClick} />
-            </Divider>
-          </FormGroup>
-          <StyledDiv>
-            <CheckBox
-              name="storeAsDefault"
-              checked={storeAsDefault}
-              checkedValue={YES_VALUE}
-              unCheckedValue={NO_VALUE}
-              toolTipTitle={_(
-                'Store indicated settings (without filter) as default',
-              )}
-              title={_('Store as default')}
-              onChange={onValueChange}
+          <FormGroup title={_('Alert')} direction="row">
+            <Select
+              grow="1"
+              name="alertId"
+              value={values.alertId}
+              items={renderSelectItems(alerts)}
+              onChange={onAlertChange}
             />
-          </StyledDiv>
+            <NewIcon onClick={onNewAlertClick} />
+          </FormGroup>
+          <CheckBox
+            name="storeAsDefault"
+            checked={storeAsDefault}
+            checkedValue={YES_VALUE}
+            unCheckedValue={NO_VALUE}
+            toolTipTitle={_(
+              'Store indicated settings (without filter) as default',
+            )}
+            title={_('Store as default')}
+            onChange={onValueChange}
+          />
           {showThresholdMessage && <ThresholdMessage threshold={threshold} />}
-        </Layout>
+        </>
       )}
     </SaveDialog>
   );
diff --git a/src/web/pages/roles/dialog.jsx b/src/web/pages/roles/dialog.jsx
index c8f2b9fb3a..9fa7bf2aa9 100644
--- a/src/web/pages/roles/dialog.jsx
+++ b/src/web/pages/roles/dialog.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
 import PropTypes from 'web/utils/proptypes';
@@ -28,10 +26,10 @@ import {permissionDescription} from 'web/utils/render';
 import SaveDialog from 'web/components/dialog/savedialog';
 
 import FormGroup from 'web/components/form/formgroup';
-import LoadingButton from 'web/components/form/loadingbutton';
 import MultiSelect from 'web/components/form/multiselect';
 import Select from 'web/components/form/select';
 import TextField from 'web/components/form/textfield';
+import Button from 'web/components/form/button';
 
 import TrashIcon from 'web/components/icon/trashicon';
 
@@ -46,6 +44,8 @@ import TableHeader from 'web/components/table/header';
 import TableHead from 'web/components/table/head';
 import TableRow from 'web/components/table/row';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const Dialog = ({
   allGroups = [],
   allPermissions = [],
@@ -57,7 +57,7 @@ const Dialog = ({
   isLoadingPermissions = false,
   permissions = [],
   role,
-  title = _('New Role'),
+  title,
   onClose,
   onCreatePermission,
   onCreateSuperPermission,
@@ -65,6 +65,8 @@ const Dialog = ({
   onErrorClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
+  title = title || _('New Role');
   const DEFAULTS = {name: _('Unnamed')};
 
   const isEdit = isDefined(role);
@@ -99,7 +101,6 @@ const Dialog = ({
     <SaveDialog
       defaultValues={defaultValues}
       error={error}
-      initialHeight={isEdit ? '600px' : undefined}
       title={title}
       onClose={onClose}
       onErrorClose={onErrorClose}
@@ -107,13 +108,11 @@ const Dialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
-                grow="1"
                 value={state.name}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -122,7 +121,6 @@ const Dialog = ({
               <TextField
                 name="comment"
                 value={state.comment}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -140,17 +138,15 @@ const Dialog = ({
               <Layout flex="column">
                 <h2>{_('New Permission')}</h2>
 
-                <FormGroup
-                  title={_('Name')}
-                  align={['space-between', 'center']}
-                >
+                <FormGroup title={_('Name')} direction="row">
                   <Select
+                    grow="1"
                     name="permissionName"
                     items={permissionsOptions}
                     value={state.permissionName}
                     onChange={onValueChange}
                   />
-                  <LoadingButton
+                  <Button
                     title={_('Create Permission')}
                     disabled={
                       isInUse ||
@@ -165,17 +161,15 @@ const Dialog = ({
 
                 <h2>{_('New Super Permission')}</h2>
 
-                <FormGroup
-                  title={_('Group')}
-                  align={['space-between', 'center']}
-                >
+                <FormGroup title={_('Group')} direction="row">
                   <Select
+                    grow="1"
                     name="groupId"
                     items={groupOptions}
                     value={state.groupId}
                     onChange={onValueChange}
                   />
-                  <LoadingButton
+                  <Button
                     title={_('Create Permission')}
                     disabled={!hasGroups || !isDefined(state.groupId)}
                     isLoading={isCreatingSuperPermission}
@@ -225,7 +219,7 @@ const Dialog = ({
                 )}
               </Layout>
             )}
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/scanconfigs/dialog.jsx b/src/web/pages/scanconfigs/dialog.jsx
index c60bbe3223..e9f76b599e 100644
--- a/src/web/pages/scanconfigs/dialog.jsx
+++ b/src/web/pages/scanconfigs/dialog.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 
@@ -30,8 +28,7 @@ import Radio from 'web/components/form/radio';
 import Select from 'web/components/form/select';
 import TextField from 'web/components/form/textfield';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+import Row from 'web/components/layout/row';
 
 import {
   FULL_AND_FAST_SCAN_CONFIG_ID,
@@ -39,16 +36,21 @@ import {
   BASE_SCAN_CONFIG_ID,
 } from 'gmp/models/scanconfig';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const CreateScanConfigDialog = ({
   baseScanConfig = BASE_SCAN_CONFIG_ID,
   comment = '',
-  name = _('Unnamed'),
+  name,
   scannerId,
   scanners = [],
-  title = _('New Scan Config'),
+  title,
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
+  name = name || _('Unnamed');
+  title = title || _('New Scan Config');
   const defaultValues = {
     baseScanConfig,
     comment,
@@ -57,6 +59,7 @@ const CreateScanConfigDialog = ({
   };
   return (
     <SaveDialog
+      width="auto"
       title={title}
       onClose={onClose}
       onSave={onSave}
@@ -64,13 +67,11 @@ const CreateScanConfigDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
-                grow="1"
                 value={state.name}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -79,56 +80,51 @@ const CreateScanConfigDialog = ({
               <TextField
                 name="comment"
                 value={state.comment}
-                grow="1"
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
 
-            <FormGroup title={_('Base')} flex="column">
-              <Divider flex="column">
-                <Radio
-                  name="baseScanConfig"
-                  value={BASE_SCAN_CONFIG_ID}
-                  checked={state.baseScanConfig === BASE_SCAN_CONFIG_ID}
-                  title={_('Base with a minimum set of NVTs')}
-                  onChange={onValueChange}
-                />
-                <Radio
-                  name="baseScanConfig"
-                  value={EMPTY_SCAN_CONFIG_ID}
-                  checked={state.baseScanConfig === EMPTY_SCAN_CONFIG_ID}
-                  title={_('Empty, static and fast')}
-                  onChange={onValueChange}
-                />
-                <Radio
-                  name="baseScanConfig"
-                  value={FULL_AND_FAST_SCAN_CONFIG_ID}
-                  checked={
-                    state.baseScanConfig === FULL_AND_FAST_SCAN_CONFIG_ID
-                  }
-                  title={_('Full and fast')}
-                  onChange={onValueChange}
-                />
-                {scanners.length > 0 && (
-                  <Divider>
-                    <Radio
-                      name="baseScanConfig"
-                      value="0"
-                      checked={state.baseScanConfig === '0'}
-                      onChange={onValueChange}
-                    />
-                    <Select
-                      value={state.scannerId}
-                      name="scannerId"
-                      items={renderSelectItems(scanners)}
-                      onChange={onValueChange}
-                    />
-                  </Divider>
-                )}
-              </Divider>
+            <FormGroup title={_('Base')}>
+              <Radio
+                name="baseScanConfig"
+                value={BASE_SCAN_CONFIG_ID}
+                checked={state.baseScanConfig === BASE_SCAN_CONFIG_ID}
+                title={_('Base with a minimum set of NVTs')}
+                onChange={onValueChange}
+              />
+              <Radio
+                name="baseScanConfig"
+                value={EMPTY_SCAN_CONFIG_ID}
+                checked={state.baseScanConfig === EMPTY_SCAN_CONFIG_ID}
+                title={_('Empty, static and fast')}
+                onChange={onValueChange}
+              />
+              <Radio
+                name="baseScanConfig"
+                value={FULL_AND_FAST_SCAN_CONFIG_ID}
+                checked={state.baseScanConfig === FULL_AND_FAST_SCAN_CONFIG_ID}
+                title={_('Full and fast')}
+                onChange={onValueChange}
+              />
+              {scanners.length > 0 && (
+                <Row>
+                  <Radio
+                    name="baseScanConfig"
+                    value="0"
+                    checked={state.baseScanConfig === '0'}
+                    onChange={onValueChange}
+                  />
+                  <Select
+                    grow="1"
+                    value={state.scannerId}
+                    name="scannerId"
+                    items={renderSelectItems(scanners)}
+                    onChange={onValueChange}
+                  />
+                </Row>
+              )}
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/scanconfigs/editconfigfamilydialog.jsx b/src/web/pages/scanconfigs/editconfigfamilydialog.jsx
index b015a8b60c..5e63364ae6 100644
--- a/src/web/pages/scanconfigs/editconfigfamilydialog.jsx
+++ b/src/web/pages/scanconfigs/editconfigfamilydialog.jsx
@@ -18,14 +18,13 @@
 
 import React, {useState, useEffect} from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 import {isEmpty} from 'gmp/utils/string';
 
 import {YES_VALUE, NO_VALUE} from 'gmp/parser';
 
 import PropTypes from 'web/utils/proptypes';
+import {makeCompareSeverity, makeCompareString} from 'web/utils/sort';
 
 import SeverityBar from 'web/components/bar/severitybar';
 
@@ -37,8 +36,6 @@ import EditIcon from 'web/components/icon/editicon';
 
 import Loading from 'web/components/loading/loading';
 
-import Layout from 'web/components/layout/layout';
-
 import Section from 'web/components/section/section';
 
 import SortBy from 'web/components/sortby/sortby';
@@ -51,19 +48,15 @@ import TableHeader from 'web/components/table/header';
 import TableHead from 'web/components/table/head';
 import TableRow from 'web/components/table/row';
 
-import {makeCompareSeverity, makeCompareString} from 'web/utils/sort';
-
-class Nvt extends React.Component {
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected !== nextProps.selected ||
-      this.props.nvt !== nextProps.nvt
-    );
-  }
+import useTranslation from 'web/hooks/useTranslation';
 
-  render() {
-    const {nvt, selected, onSelectedChange, onEditNvtDetailsClick} = this.props;
+const shouldNvtComponentUpdate = (props, nextProps) => {
+  return props.selected !== nextProps.selected || props.nvt !== nextProps.nvt;
+};
 
+const Nvt = React.memo(
+  ({nvt, selected, onSelectedChange, onEditNvtDetailsClick}) => {
+    const [_] = useTranslation();
     let pref_count = nvt.preference_count;
     if (pref_count === '0') {
       pref_count = '';
@@ -103,8 +96,9 @@ class Nvt extends React.Component {
         </TableData>
       </TableRow>
     );
-  }
-}
+  },
+  shouldNvtComponentUpdate,
+);
 
 Nvt.propTypes = {
   nvt: PropTypes.object.isRequired,
@@ -168,6 +162,7 @@ const EditScanConfigFamilyDialog = ({
   onEditNvtDetailsClick,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const [sortBy, setSortby] = useState('name');
   const [sortReverse, setSortReverse] = useState(false);
   const [selectedNvts, setSelectedNvts] = useState(selected);
@@ -199,12 +194,18 @@ const EditScanConfigFamilyDialog = ({
   const sortedNvts = sortNvts(nvts, sortBy, sortReverse, selectedNvts);
 
   return (
-    <SaveDialog title={title} onClose={onClose} onSave={onSave} values={data}>
+    <SaveDialog
+      width="auto"
+      title={title}
+      onClose={onClose}
+      onSave={onSave}
+      values={data}
+    >
       {() =>
         isLoadingFamily || !isDefined(selectedNvts) ? (
           <Loading />
         ) : (
-          <Layout flex="column">
+          <>
             <SimpleTable>
               <TableBody>
                 <TableRow>
@@ -278,7 +279,7 @@ const EditScanConfigFamilyDialog = ({
                 </TableBody>
               </Table>
             </Section>
-          </Layout>
+          </>
         )
       }
     </SaveDialog>
diff --git a/src/web/pages/scanconfigs/editdialog.jsx b/src/web/pages/scanconfigs/editdialog.jsx
index a5c11526c3..4d4f41add2 100644
--- a/src/web/pages/scanconfigs/editdialog.jsx
+++ b/src/web/pages/scanconfigs/editdialog.jsx
@@ -18,8 +18,6 @@
 
 import React, {useReducer, useState, useEffect} from 'react';
 
-import _ from 'gmp/locale';
-
 import {SCANCONFIG_TREND_STATIC} from 'gmp/models/scanconfig';
 
 import {YES_VALUE, NO_VALUE} from 'gmp/parser';
@@ -35,13 +33,12 @@ import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 import Loading from 'web/components/loading/loading';
 
-import Layout from 'web/components/layout/layout';
-
 import NvtFamilies from './nvtfamilies';
 import NvtPreferences, {NvtPreferencePropType} from './nvtpreferences';
 import ScannerPreferences, {
   ScannerPreferencePropType,
 } from './scannerpreferences';
+import useTranslation from 'web/hooks/useTranslation';
 
 const createTrendAndSelect = (scanConfigFamilies = {}, allFamilies = []) => {
   const trend = {};
@@ -116,6 +113,7 @@ const EditScanConfigDialog = ({
   onEditNvtDetailsClick,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const [scannerPreferenceValues, dispatch] = useReducer(
     reducer,
     createScannerPreferenceValues(scannerPreferences),
@@ -169,13 +167,11 @@ const EditScanConfigDialog = ({
       values={controlledData}
     >
       {({values: state, onValueChange}) => (
-        <Layout flex="column">
+        <>
           <FormGroup title={_('Name')}>
             <TextField
               name="name"
-              grow="1"
               value={state.name}
-              size="30"
               onChange={onValueChange}
             />
           </FormGroup>
@@ -184,8 +180,6 @@ const EditScanConfigDialog = ({
             <TextField
               name="comment"
               value={state.comment}
-              grow="1"
-              size="30"
               onChange={onValueChange}
             />
           </FormGroup>
@@ -230,7 +224,7 @@ const EditScanConfigDialog = ({
               )}
             </React.Fragment>
           )}
-        </Layout>
+        </>
       )}
     </SaveDialog>
   );
diff --git a/src/web/pages/scanconfigs/editnvtdetailsdialog.jsx b/src/web/pages/scanconfigs/editnvtdetailsdialog.jsx
index 0b689976dd..fc092c632d 100644
--- a/src/web/pages/scanconfigs/editnvtdetailsdialog.jsx
+++ b/src/web/pages/scanconfigs/editnvtdetailsdialog.jsx
@@ -17,8 +17,6 @@
  */
 import React, {useEffect, useReducer, useState} from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
 import PropTypes from 'web/utils/proptypes';
@@ -50,6 +48,7 @@ import TableRow from 'web/components/table/row';
 
 import NvtPreference from '../nvts/nvtpreference';
 import Preformatted from '../nvts/preformatted';
+import useTranslation from 'web/hooks/useTranslation';
 
 const createPrefValues = (preferences = []) => {
   const preferenceValues = {};
@@ -117,6 +116,7 @@ const EditNvtDetailsDialog = ({
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const [preferenceValues, dispatch] = useReducer(
     reducer,
     createPrefValues(preferences),
diff --git a/src/web/pages/scanconfigs/importdialog.jsx b/src/web/pages/scanconfigs/importdialog.jsx
index 3ebe94f45f..7cd3cc7e27 100644
--- a/src/web/pages/scanconfigs/importdialog.jsx
+++ b/src/web/pages/scanconfigs/importdialog.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -26,9 +24,10 @@ import SaveDialog from 'web/components/dialog/savedialog';
 import FileField from 'web/components/form/filefield';
 import FormGroup from 'web/components/form/formgroup';
 
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
 
 const ImportDialog = ({title, text, onClose, onSave}) => {
+  const [_] = useTranslation();
   return (
     <SaveDialog
       buttonTitle={_('Import')}
@@ -37,15 +36,11 @@ const ImportDialog = ({title, text, onClose, onSave}) => {
       onClose={onClose}
       onSave={onSave}
     >
-      {({onValueChange}) => {
-        return (
-          <Layout flex="column">
-            <FormGroup title={text} titleSize="4">
-              <FileField name="xml_file" onChange={onValueChange} />
-            </FormGroup>
-          </Layout>
-        );
-      }}
+      {({onValueChange}) => (
+        <FormGroup title={text}>
+          <FileField grow="1" name="xml_file" onChange={onValueChange} />
+        </FormGroup>
+      )}
     </SaveDialog>
   );
 };
diff --git a/src/web/pages/scanconfigs/nvtfamilies.jsx b/src/web/pages/scanconfigs/nvtfamilies.jsx
index f088f797ad..24b2f6626c 100644
--- a/src/web/pages/scanconfigs/nvtfamilies.jsx
+++ b/src/web/pages/scanconfigs/nvtfamilies.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {
   SCANCONFIG_TREND_DYNAMIC,
   SCANCONFIG_TREND_STATIC,
@@ -48,6 +46,8 @@ import TableRow from 'web/components/table/row';
 
 import PropTypes from 'web/utils/proptypes';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 import Trend from './trend';
 
 const WHOLE_SELECTION_FAMILIES = [
@@ -83,6 +83,7 @@ const NvtFamily = ({
   onSelectChange,
   onTrendChange,
 }) => {
+  const [_] = useTranslation();
   const isToSelectWhole = WHOLE_SELECTION_FAMILIES.includes(familyName);
   return (
     <TableRow key={familyName}>
@@ -164,6 +165,7 @@ const NvtFamilies = ({
   onEditConfigFamilyClick,
   onValueChange,
 }) => {
+  const [_] = useTranslation();
   const onTrendChange = (value, name) => {
     trend[name] = value;
 
diff --git a/src/web/pages/scanconfigs/nvtpreferences.jsx b/src/web/pages/scanconfigs/nvtpreferences.jsx
index 48f3c08ce5..d6d9a5b105 100644
--- a/src/web/pages/scanconfigs/nvtpreferences.jsx
+++ b/src/web/pages/scanconfigs/nvtpreferences.jsx
@@ -19,8 +19,6 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import _ from 'gmp/locale';
-
 import {FoldState} from 'web/components/folding/folding';
 
 import EditIcon from 'web/components/icon/editicon';
@@ -36,17 +34,17 @@ import TableRow from 'web/components/table/row';
 
 import PropTypes from 'web/utils/proptypes';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const StyledTableData = styled(TableData)`
   overflow-wrap: break-word;
 `;
 
-class NvtPreferenceDisplay extends React.Component {
-  shouldComponentUpdate(nextProps) {
-    return nextProps.preference !== this.props.preference;
-  }
+const shouldComponentUpdate = (props, nextProps) =>
+  nextProps.preference !== props.preference;
 
-  render() {
-    const {preference, onEditNvtDetailsClick, title} = this.props;
+const NvtPreferenceDisplay = React.memo(
+  ({preference, onEditNvtDetailsClick, title}) => {
     return (
       <TableRow>
         <StyledTableData>{preference.nvt.name}</StyledTableData>
@@ -61,8 +59,9 @@ class NvtPreferenceDisplay extends React.Component {
         </TableData>
       </TableRow>
     );
-  }
-}
+  },
+  shouldComponentUpdate,
+);
 
 export const NvtPreferencePropType = PropTypes.shape({
   nvt: PropTypes.shape({
@@ -83,38 +82,41 @@ const NvtPreferences = ({
   editTitle,
   preferences = [],
   onEditNvtDetailsClick,
-}) => (
-  <Section
-    foldable
-    initialFoldState={FoldState.FOLDED}
-    title={_('Network Vulnerability Test Preferences ({{counts}})', {
-      counts: preferences.length,
-    })}
-  >
-    <Table fixed>
-      <TableHeader>
-        <TableRow>
-          <TableHead width="30%">{_('NVT')}</TableHead>
-          <TableHead width="30%">{_('Name')}</TableHead>
-          <TableHead width="30%">{_('Value')}</TableHead>
-          <TableHead width="10%" align="center">
-            {_('Actions')}
-          </TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {preferences.map(pref => (
-          <NvtPreferenceDisplay
-            key={pref.nvt.name + pref.name}
-            title={editTitle}
-            preference={pref}
-            onEditNvtDetailsClick={onEditNvtDetailsClick}
-          />
-        ))}
-      </TableBody>
-    </Table>
-  </Section>
-);
+}) => {
+  const [_] = useTranslation();
+  return (
+    <Section
+      foldable
+      initialFoldState={FoldState.FOLDED}
+      title={_('Network Vulnerability Test Preferences ({{counts}})', {
+        counts: preferences.length,
+      })}
+    >
+      <Table fixed>
+        <TableHeader>
+          <TableRow>
+            <TableHead width="30%">{_('NVT')}</TableHead>
+            <TableHead width="30%">{_('Name')}</TableHead>
+            <TableHead width="30%">{_('Value')}</TableHead>
+            <TableHead width="10%" align="center">
+              {_('Actions')}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {preferences.map(pref => (
+            <NvtPreferenceDisplay
+              key={pref.nvt.name + pref.name}
+              title={editTitle}
+              preference={pref}
+              onEditNvtDetailsClick={onEditNvtDetailsClick}
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </Section>
+  );
+};
 
 NvtPreferences.propTypes = {
   editTitle: PropTypes.string,
diff --git a/src/web/pages/scanconfigs/scannerpreferences.jsx b/src/web/pages/scanconfigs/scannerpreferences.jsx
index d3d31ba71a..2061b0a493 100644
--- a/src/web/pages/scanconfigs/scannerpreferences.jsx
+++ b/src/web/pages/scanconfigs/scannerpreferences.jsx
@@ -17,7 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
 import {parseInt} from 'gmp/parser';
 
 import {FoldState} from 'web/components/folding/folding';
@@ -38,6 +37,8 @@ import TableRow from 'web/components/table/row';
 
 import PropTypes from 'web/utils/proptypes';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const ScannerPreference = ({
   displayName,
   defaultValue,
@@ -45,7 +46,7 @@ const ScannerPreference = ({
   value,
   onPreferenceChange,
 }) => {
-  const is_radio =
+  const isRadio =
     name === 'ping_hosts' ||
     name === 'reverse_lookup' ||
     name === 'unscanned_closed' ||
@@ -74,7 +75,7 @@ const ScannerPreference = ({
     <TableRow>
       <TableData>{displayName}</TableData>
       <TableData>
-        {is_radio ? (
+        {isRadio ? (
           <Layout>
             <YesNoRadio // booleans are now 1 and 0 and not yes/no.
               yesValue={1}
@@ -107,6 +108,7 @@ const ScannerPreferences = ({
   values = {},
   onValuesChange,
 }) => {
+  const [_] = useTranslation();
   return (
     <Section
       foldable
diff --git a/src/web/pages/scanners/dialog.jsx b/src/web/pages/scanners/dialog.jsx
index d66809be21..fae0de8e2f 100644
--- a/src/web/pages/scanners/dialog.jsx
+++ b/src/web/pages/scanners/dialog.jsx
@@ -16,20 +16,21 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-
-import _ from 'gmp/locale';
+import React, {useCallback} from 'react';
 
 import {filter, map} from 'gmp/utils/array';
 import {hasValue, isDefined} from 'gmp/utils/identity';
 
 import {parseInt} from 'gmp/parser';
 
+import {
+  GREENBONE_SENSOR_SCANNER_TYPE,
+  scannerTypeName,
+} from 'gmp/models/scanner';
+
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 
-import withGmp from 'web/utils/withGmp';
-
 import SaveDialog from 'web/components/dialog/savedialog';
 
 import FormGroup from 'web/components/form/formgroup';
@@ -38,13 +39,8 @@ import TextField from 'web/components/form/textfield';
 
 import NewIcon from 'web/components/icon/newicon';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
-import {
-  GREENBONE_SENSOR_SCANNER_TYPE,
-  scannerTypeName,
-} from 'gmp/models/scanner';
+import useTranslation from 'web/hooks/useTranslation';
+import useGmp from 'web/utils/useGmp';
 
 const AVAILABLE_SCANNER_TYPES = [GREENBONE_SENSOR_SCANNER_TYPE];
 
@@ -53,11 +49,12 @@ const ScannerDialog = ({
   comment = '',
   scanner,
   credentials,
+  credential_id,
   host = 'localhost',
   id,
-  name = _('Unnamed'),
+  name,
   port = '22',
-  title = _('New Scanner'),
+  title,
   type,
   which_cert,
   onClose,
@@ -65,16 +62,24 @@ const ScannerDialog = ({
   onNewCredentialClick,
   onSave,
   onScannerTypeChange,
-  ...props
 }) => {
-  // eslint-disable-next-line no-shadow
-  const handleTypeChange = (value, name) => {
-    if (onScannerTypeChange) {
-      value = parseInt(value);
-
-      onScannerTypeChange(value, name);
-    }
-  };
+  const [_] = useTranslation();
+  const gmp = useGmp();
+
+  name = name || _('Unnamed');
+  title = title || _('New Scanner');
+
+  const handleTypeChange = useCallback(
+    // eslint-disable-next-line no-shadow
+    (value, name) => {
+      if (onScannerTypeChange) {
+        value = parseInt(value);
+
+        onScannerTypeChange(value, name);
+      }
+    },
+    [onScannerTypeChange],
+  );
 
   const data = {
     ca_pub,
@@ -88,8 +93,6 @@ const ScannerDialog = ({
 
   let SCANNER_TYPES = [];
 
-  const {gmp} = props;
-
   if (gmp.settings.enableGreenboneSensor) {
     type = hasValue(type) ? type : GREENBONE_SENSOR_SCANNER_TYPE;
     SCANNER_TYPES = [GREENBONE_SENSOR_SCANNER_TYPE];
@@ -98,8 +101,6 @@ const ScannerDialog = ({
     SCANNER_TYPES = [];
   }
 
-  let {credential_id} = props;
-
   const scannerTypesOptions = map(SCANNER_TYPES, scannerType => ({
     label: scannerTypeName(scannerType),
     value: scannerType,
@@ -127,11 +128,10 @@ const ScannerDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
-                grow="1"
                 value={state.name}
                 onChange={onValueChange}
               />
@@ -141,7 +141,6 @@ const ScannerDialog = ({
               <TextField
                 name="comment"
                 value={state.comment}
-                grow="1"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -159,31 +158,27 @@ const ScannerDialog = ({
                 name="host"
                 value={state.host}
                 disabled={isInUse}
-                grow="1"
                 onChange={onValueChange}
               />
             </FormGroup>
 
             {!isGreenboneSensorType && (
-              <FormGroup title={_('Credential')} flex="column">
-                <Divider>
-                  <Select
-                    name="credential_id"
-                    items={renderSelectItems(scanner_credentials)}
-                    value={credential_id}
-                    onChange={onCredentialChange}
-                  />
-                  <Layout>
-                    <NewIcon
-                      value={type}
-                      title={_('Create a new Credential')}
-                      onClick={onNewCredentialClick}
-                    />
-                  </Layout>
-                </Divider>
+              <FormGroup title={_('Credential')} direction="row">
+                <Select
+                  grow="1"
+                  name="credential_id"
+                  items={renderSelectItems(scanner_credentials)}
+                  value={credential_id}
+                  onChange={onCredentialChange}
+                />
+                <NewIcon
+                  value={type}
+                  title={_('Create a new Credential')}
+                  onClick={onNewCredentialClick}
+                />
               </FormGroup>
             )}
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
@@ -195,7 +190,6 @@ ScannerDialog.propTypes = {
   comment: PropTypes.string,
   credential_id: PropTypes.id,
   credentials: PropTypes.array,
-  gmp: PropTypes.gmp,
   host: PropTypes.string,
   id: PropTypes.string,
   name: PropTypes.string,
@@ -212,6 +206,6 @@ ScannerDialog.propTypes = {
   onValueChange: PropTypes.func,
 };
 
-export default withGmp(ScannerDialog);
+export default ScannerDialog;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/schedules/dayselect.jsx b/src/web/pages/schedules/dayselect.jsx
index 19e3f16c3b..035beccdb6 100644
--- a/src/web/pages/schedules/dayselect.jsx
+++ b/src/web/pages/schedules/dayselect.jsx
@@ -17,49 +17,50 @@
  */
 import React from 'react';
 
-import {_l} from 'gmp/locale/lang';
-
-import PropTyes from 'web/utils/proptypes';
+import PropTypes from 'web/utils/proptypes';
 
 import Select from 'web/components/form/select';
 
-const DAY_SELECT_ITEMS = [
-  {
-    label: _l('Monday'),
-    value: 'monday',
-  },
-  {
-    label: _l('Tuesday'),
-    value: 'tuesday',
-  },
-  {
-    label: _l('Wednesday'),
-    value: 'wednesday',
-  },
-  {
-    label: _l('Thursday'),
-    value: 'thursday',
-  },
-  {
-    label: _l('Friday'),
-    value: 'friday',
-  },
-  {
-    label: _l('Saturday'),
-    value: 'saturday',
-  },
-  {
-    label: _l('Sunday'),
-    value: 'sunday',
-  },
-];
+import useTranslation from 'web/hooks/useTranslation';
+
+const DaySelect = ({value, ...props}) => {
+  const [_] = useTranslation();
 
-const DaySelect = ({value, ...props}) => (
-  <Select {...props} value={value} items={DAY_SELECT_ITEMS} />
-);
+  const DAY_SELECT_ITEMS = [
+    {
+      label: _('Monday'),
+      value: 'monday',
+    },
+    {
+      label: _('Tuesday'),
+      value: 'tuesday',
+    },
+    {
+      label: _('Wednesday'),
+      value: 'wednesday',
+    },
+    {
+      label: _('Thursday'),
+      value: 'thursday',
+    },
+    {
+      label: _('Friday'),
+      value: 'friday',
+    },
+    {
+      label: _('Saturday'),
+      value: 'saturday',
+    },
+    {
+      label: _('Sunday'),
+      value: 'sunday',
+    },
+  ];
+  return <Select {...props} value={value} items={DAY_SELECT_ITEMS} />;
+};
 
 DaySelect.propTypes = {
-  value: PropTyes.oneOf([
+  value: PropTypes.oneOf([
     'monday',
     'tuesday',
     'wednesday',
diff --git a/src/web/pages/schedules/dialog.jsx b/src/web/pages/schedules/dialog.jsx
index 8e6fed6ae2..2548ad100c 100644
--- a/src/web/pages/schedules/dialog.jsx
+++ b/src/web/pages/schedules/dialog.jsx
@@ -15,9 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React from 'react';
-
-import {_, _l} from 'gmp/locale/lang';
+import React, {useState} from 'react';
 
 import {isDefined} from 'gmp/utils/identity';
 
@@ -28,6 +26,7 @@ import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
 
+import Button from 'web/components/form/button';
 import Select from 'web/components/form/select';
 import Spinner from 'web/components/form/spinner';
 import FormGroup from 'web/components/form/formgroup';
@@ -37,15 +36,15 @@ import TimeZoneSelect from 'web/components/form/timezoneselect';
 import CheckBox from 'web/components/form/checkbox';
 import Radio from 'web/components/form/radio';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+import Row from 'web/components/layout/row';
+
+import useTranslation from 'web/hooks/useTranslation';
 
+import {renderDuration} from './render';
 import TimeUnitSelect from './timeunitselect';
 import WeekDaySelect, {WeekDaysPropType} from './weekdayselect';
-import {renderDuration} from './render';
 import DaySelect from './dayselect';
 import MonthDaysSelect from './monthdaysselect';
-import Button from 'web/components/form/button';
 
 const RECURRENCE_ONCE = 'once';
 const RECURRENCE_HOURLY = ReccurenceFrequency.HOURLY;
@@ -56,64 +55,6 @@ const RECURRENCE_YEARLY = ReccurenceFrequency.YEARLY;
 const RECURRENCE_WORKWEEK = 'workweek';
 const RECURRENCE_CUSTOM = 'custom';
 
-const RECURRENCE_TYPE_ITEMS = [
-  {
-    label: _l('Once'),
-    value: RECURRENCE_ONCE,
-  },
-  {
-    label: _l('Hourly'),
-    value: RECURRENCE_HOURLY,
-  },
-  {
-    label: _l('Daily'),
-    value: RECURRENCE_DAILY,
-  },
-  {
-    label: _l('Weekly'),
-    value: RECURRENCE_WEEKLY,
-  },
-  {
-    label: _l('Monthly'),
-    value: RECURRENCE_MONTHLY,
-  },
-  {
-    label: _l('Yearly'),
-    value: RECURRENCE_YEARLY,
-  },
-  {
-    label: _l('Workweek (Monday till Friday)'),
-    value: RECURRENCE_WORKWEEK,
-  },
-  {
-    label: _l('Custom...'),
-    value: RECURRENCE_CUSTOM,
-  },
-];
-
-const NTH_DAY_ITEMS = [
-  {
-    label: _l('The First'),
-    value: '1',
-  },
-  {
-    label: _l('The Second'),
-    value: '2',
-  },
-  {
-    label: _l('The Third'),
-    value: '3',
-  },
-  {
-    label: _l('The Fourth'),
-    value: '4',
-  },
-  {
-    label: _l('The Last'),
-    value: '-1',
-  },
-];
-
 const RepeatMonthly = {
   nth: 'nth',
   days: 'days',
@@ -121,139 +62,190 @@ const RepeatMonthly = {
 
 const getNthWeekday = cdate => Math.ceil(cdate.date() / 7);
 
-class ScheduleDialog extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.state = this.initialState(this.props);
-
-    this.handleSave = this.handleSave.bind(this);
-    this.handleValueChange = this.handleValueChange.bind(this);
-    this.handleStartHoursChange = this.handleStartHoursChange.bind(this);
-    this.handleStartMinutesChange = this.handleStartMinutesChange.bind(this);
-    this.handleEndHoursChange = this.handleEndHoursChange.bind(this);
-    this.handleEndMinutesChange = this.handleEndMinutesChange.bind(this);
-    this.handleTimezoneChange = this.handleTimezoneChange.bind(this);
-    this.handleNowButtonClick = this.handleNowButtonClick.bind(this);
-  }
-
-  initialState(props) {
-    const {
-      duration,
-      timezone = 'UTC',
-      startDate = date().tz(timezone).startOf('hour').add(1, 'hour'),
-    } = props;
-    let {freq, interval = 1, weekdays, monthdays} = this.props;
-
-    const monthly =
-      freq === ReccurenceFrequency.MONTHLY && !isDefined(weekdays)
-        ? RepeatMonthly.days
-        : RepeatMonthly.nth;
-
-    let recurrenceType;
-    if (isDefined(freq)) {
-      if (!isDefined(weekdays) && !isDefined(monthdays) && interval === 1) {
-        recurrenceType = freq;
-      } else {
-        recurrenceType = RECURRENCE_CUSTOM;
+const ScheduleDialog = ({
+  duration,
+  timezone: initialTimezone = 'UTC',
+  startDate: initialStartDate = date()
+    .tz(initialTimezone)
+    .startOf('hour')
+    .add(1, 'hour'),
+  freq: initialFrequency,
+  interval: initialInterval = 1,
+  weekdays: initialWeekdays,
+  monthdays: initialMonthDays,
+  comment = '',
+  id,
+  name,
+  title,
+  onClose,
+  onSave,
+}) => {
+  const [_] = useTranslation();
+  const [timezone, setTimezone] = useState(initialTimezone);
+  const [endDate, setEndDate] = useState(
+    isDefined(duration)
+      ? initialStartDate.clone().add(duration)
+      : initialStartDate.clone().add(1, 'hour'),
+  );
+  const [startDate, setStartDate] = useState(initialStartDate);
+  const [endOpen, setEndOpen] = useState(!isDefined(duration));
+  const [freq, setFreq] = useState(
+    isDefined(initialFrequency) ? initialFrequency : ReccurenceFrequency.WEEKLY,
+  );
+  const [recurrenceType, setRecurrenceType] = useState(() => {
+    if (isDefined(initialFrequency)) {
+      if (
+        !isDefined(initialWeekdays) &&
+        !isDefined(initialMonthDays) &&
+        initialInterval === 1
+      ) {
+        return initialFrequency;
       }
-    } else {
-      recurrenceType = RECURRENCE_ONCE;
-      freq = ReccurenceFrequency.WEEKLY;
+      return RECURRENCE_CUSTOM;
     }
-
-    const endDate = isDefined(duration)
-      ? startDate.clone().add(duration)
-      : startDate.clone().add(1, 'hour');
-
-    if (!isDefined(weekdays)) {
-      weekdays = new WeekDays();
-      weekdays = weekdays.setWeekDayFromDate(startDate);
+    return RECURRENCE_ONCE;
+  });
+  const [interval, setInterval] = useState(initialInterval);
+  const [monthly, setMonthly] = useState(
+    initialFrequency === ReccurenceFrequency.MONTHLY &&
+      !isDefined(initialWeekdays)
+      ? RepeatMonthly.days
+      : RepeatMonthly.nth,
+  );
+  const [weekdays, setWeekdays] = useState(() => {
+    if (isDefined(initialWeekdays)) {
+      return initialWeekdays;
     }
-
-    const monthlyDay = weekdays.getSelectedWeekDay();
-    let monthlyNth = weekdays.get(monthlyDay);
-    if (monthlyNth === true) {
-      monthlyNth = '' + getNthWeekday(startDate);
-    }
-
-    return {
-      endDate,
-      endOpen: !isDefined(duration),
-      freq,
-      interval,
-      monthdays: isDefined(monthdays) ? monthdays : [startDate.date()],
-      recurrenceType,
-      monthly,
-      monthlyDay,
-      monthlyNth,
-      startDate,
-      timezone,
-      weekdays,
-    };
-  }
-
-  handleValueChange(value, name) {
-    this.setState({[name]: value});
-  }
-
-  handleStartHoursChange(value) {
-    this.setState(state => ({
-      startDate: state.startDate.hours(value),
-    }));
-  }
-
-  handleStartMinutesChange(value) {
-    this.setState(state => ({
-      startDate: state.startDate.minutes(value),
-    }));
-  }
-
-  handleNowButtonClick() {
-    const {timezone} = this.state;
-    const now = date().tz(timezone);
-    this.setState({startDate: now});
-  }
-
-  handleEndHoursChange(value) {
-    this.setState(state => ({
-      endDate: state.endDate.hours(value),
-    }));
-  }
-
-  handleEndMinutesChange(value) {
-    this.setState(state => ({
-      endDate: state.endDate.minutes(value),
-    }));
-  }
-
-  handleTimezoneChange(value) {
-    this.setState(state => ({
-      endDate: state.endDate.tz(value),
-      startDate: state.startDate.tz(value),
-      timezone: value,
-    }));
-  }
-
-  handleSave({
-    comment,
-    endDate,
-    endOpen = false,
-    freq,
-    id,
-    interval,
-    monthdays,
-    monthly,
-    monthlyDay,
-    monthlyNth,
-    name,
-    recurrenceType,
-    startDate,
-    timezone,
-    weekdays,
-  }) {
-    const {onSave} = this.props;
-
+    return new WeekDays().setWeekDayFromDate(initialStartDate);
+  });
+  const [monthlyNth, setMonthlyNth] = useState(() => {
+    const currentWeekdays = isDefined(initialWeekdays)
+      ? initialWeekdays
+      : new WeekDays().setWeekDayFromDate(initialStartDate);
+    const currentMonthlyDay = currentWeekdays.getSelectedWeekDay();
+    const currentMonthlyNth = currentWeekdays.get(currentMonthlyDay);
+    return currentMonthlyNth === true
+      ? '' + getNthWeekday(initialStartDate)
+      : currentMonthlyDay;
+  });
+  const [monthdays, setMonthdays] = useState(
+    isDefined(initialMonthDays) ? initialMonthDays : [initialStartDate.date()],
+  );
+  const [monthlyDay, setMonthlyDay] = useState(() => {
+    const currentWeekdays = isDefined(initialWeekdays)
+      ? initialWeekdays
+      : new WeekDays().setWeekDayFromDate(initialStartDate);
+    return currentWeekdays.getSelectedWeekDay();
+  });
+
+  name = name || _('Unnamed');
+  title = title || _('New Schedule');
+
+  const RECURRENCE_TYPE_ITEMS = [
+    {
+      label: _('Once'),
+      value: RECURRENCE_ONCE,
+    },
+    {
+      label: _('Hourly'),
+      value: RECURRENCE_HOURLY,
+    },
+    {
+      label: _('Daily'),
+      value: RECURRENCE_DAILY,
+    },
+    {
+      label: _('Weekly'),
+      value: RECURRENCE_WEEKLY,
+    },
+    {
+      label: _('Monthly'),
+      value: RECURRENCE_MONTHLY,
+    },
+    {
+      label: _('Yearly'),
+      value: RECURRENCE_YEARLY,
+    },
+    {
+      label: _('Workweek (Monday till Friday)'),
+      value: RECURRENCE_WORKWEEK,
+    },
+    {
+      label: _('Custom...'),
+      value: RECURRENCE_CUSTOM,
+    },
+  ];
+
+  const NTH_DAY_ITEMS = [
+    {
+      label: _('The First'),
+      value: '1',
+    },
+    {
+      label: _('The Second'),
+      value: '2',
+    },
+    {
+      label: _('The Third'),
+      value: '3',
+    },
+    {
+      label: _('The Fourth'),
+      value: '4',
+    },
+    {
+      label: _('The Last'),
+      value: '-1',
+    },
+  ];
+
+  duration = endOpen
+    ? undefined
+    : isDefined(endDate) && createDuration(endDate.diff(startDate));
+
+  const handleStartHoursChange = value => {
+    setStartDate(startDate => startDate.hours(value)); // eslint-disable-line no-shadow
+  };
+
+  const handleStartMinutesChange = value => {
+    setStartDate(startDate => startDate.minutes(value)); // eslint-disable-line no-shadow
+  };
+
+  const handleNowButtonClick = () => {
+    setStartDate(date().tz(timezone));
+  };
+
+  const handleEndHoursChange = value => {
+    setEndDate(endDate => endDate.hours(value)); // eslint-disable-line no-shadow
+  };
+
+  const handleEndMinutesChange = value => {
+    setEndDate(endDate => endDate.minutes(value)); // eslint-disable-line no-shadow
+  };
+
+  const handleTimezoneChange = value => {
+    setEndDate(endDate => endDate.tz(value)); // eslint-disable-line no-shadow
+    setStartDate(startDate => startDate.tz(value)); // eslint-disable-line no-shadow
+    setTimezone(value);
+  };
+
+  const handleSave = ({
+    comment, // eslint-disable-line no-shadow
+    endDate, // eslint-disable-line no-shadow
+    endOpen = false, // eslint-disable-line no-shadow
+    freq, // eslint-disable-line no-shadow
+    id, // eslint-disable-line no-shadow
+    interval, // eslint-disable-line no-shadow
+    monthdays, // eslint-disable-line no-shadow
+    monthly, // eslint-disable-line no-shadow
+    monthlyDay, // eslint-disable-line no-shadow
+    monthlyNth, // eslint-disable-line no-shadow
+    name, // eslint-disable-line no-shadow
+    recurrenceType, // eslint-disable-line no-shadow
+    startDate, // eslint-disable-line no-shadow
+    timezone, // eslint-disable-line no-shadow
+    weekdays, // eslint-disable-line no-shadow
+  }) => {
     if (!isDefined(onSave)) {
       return Promise.resolve();
     }
@@ -296,7 +288,7 @@ class ScheduleDialog extends React.Component {
       freq = recurrenceType;
     }
 
-    const setWeekdays =
+    const weekdaysSet =
       recurrenceType === RECURRENCE_WORKWEEK ||
       (recurrenceType === RECURRENCE_CUSTOM &&
         freq === ReccurenceFrequency.WEEKLY) ||
@@ -304,7 +296,7 @@ class ScheduleDialog extends React.Component {
         freq === ReccurenceFrequency.MONTHLY &&
         monthly === RepeatMonthly.nth);
 
-    const setMonthydays =
+    const monthDaysSet =
       recurrenceType === RECURRENCE_CUSTOM &&
       freq === ReccurenceFrequency.MONTHLY &&
       monthly === RepeatMonthly.days;
@@ -323,8 +315,8 @@ class ScheduleDialog extends React.Component {
         description: comment,
         freq: recurrenceType === RECURRENCE_ONCE ? undefined : freq,
         interval: isPreDefined ? 1 : interval,
-        monthdays: setMonthydays ? monthdays : undefined,
-        weekdays: setWeekdays ? weekdays : undefined,
+        monthdays: monthDaysSet ? monthdays : undefined,
+        weekdays: weekdaysSet ? weekdays : undefined,
         // convert name to string explicitly to not run into:
         // `TypeError: e.replace is not a function`
         // when name is just numbers.
@@ -341,262 +333,220 @@ class ScheduleDialog extends React.Component {
       icalendar: event.toIcalString(),
       timezone,
     });
-  }
-
-  render() {
-    const {
-      comment = '',
-      id,
-      name = _('Unnamed'),
-      title = _('New Schedule'),
-      onClose,
-    } = this.props;
-
-    const {
-      endDate,
-      endOpen,
-      freq,
-      interval,
-      monthdays,
-      recurrenceType,
-      monthly,
-      monthlyDay,
-      monthlyNth,
-      startDate,
-      timezone,
-      weekdays,
-    } = this.state;
-
-    const defaultValues = {
-      comment,
-      id,
-      name,
-    };
-
-    const duration = endOpen
-      ? undefined
-      : createDuration(endDate.diff(startDate));
-
-    const values = {
-      endDate,
-      endOpen,
-      freq,
-      interval,
-      monthdays,
-      monthly,
-      monthlyDay,
-      monthlyNth,
-      recurrenceType,
-      startDate,
-      timezone,
-      weekdays,
-    };
-
-    return (
-      <SaveDialog
-        title={title}
-        defaultValues={defaultValues}
-        values={values}
-        onClose={onClose}
-        onSave={this.handleSave}
-      >
-        {({values: state, onValueChange}) => (
-          <Layout flex="column">
-            <FormGroup title={_('Name')}>
-              <TextField
-                name="name"
-                grow="1"
-                value={state.name}
-                size="30"
-                onChange={onValueChange}
-              />
-            </FormGroup>
-
-            <FormGroup title={_('Comment')}>
-              <TextField
-                name="comment"
-                value={state.comment}
-                grow="1"
-                size="30"
-                onChange={onValueChange}
-              />
-            </FormGroup>
+  };
 
-            <FormGroup title={_('Timezone')}>
-              <TimeZoneSelect
-                name="timezone"
-                value={timezone}
-                onChange={this.handleTimezoneChange}
-              />
-            </FormGroup>
+  const defaultValues = {
+    comment,
+    id,
+    name,
+  };
 
-            <FormGroup title={_('First Run')}>
+  const values = {
+    endDate,
+    endOpen,
+    freq,
+    interval,
+    monthdays,
+    monthly,
+    monthlyDay,
+    monthlyNth,
+    recurrenceType,
+    startDate,
+    timezone,
+    weekdays,
+  };
+
+  return (
+    <SaveDialog
+      title={title}
+      defaultValues={defaultValues}
+      values={values}
+      onClose={onClose}
+      onSave={handleSave}
+    >
+      {({values: state, onValueChange}) => (
+        <>
+          <FormGroup title={_('Name')}>
+            <TextField
+              name="name"
+              value={state.name}
+              onChange={onValueChange}
+            />
+          </FormGroup>
+
+          <FormGroup title={_('Comment')}>
+            <TextField
+              name="comment"
+              value={state.comment}
+              onChange={onValueChange}
+            />
+          </FormGroup>
+
+          <FormGroup title={_('Timezone')}>
+            <TimeZoneSelect
+              name="timezone"
+              value={timezone}
+              onChange={handleTimezoneChange}
+            />
+          </FormGroup>
+
+          <FormGroup title={_('First Run')}>
+            <Row>
               <DatePicker
                 timezone={timezone}
                 name="startDate"
                 value={startDate}
-                onChange={this.handleValueChange}
+                onChange={setStartDate}
                 showYearDropdown
               />
-              <Divider>
-                <Spinner
-                  name="startHour"
-                  type="int"
-                  min="0"
-                  max="23"
-                  size="2"
-                  value={startDate.hours()}
-                  onChange={this.handleStartHoursChange}
-                />
-                <span>h</span>
-                <Spinner
-                  name="startMinute"
-                  type="int"
-                  min="0"
-                  max="59"
-                  size="2"
-                  value={startDate.minutes()}
-                  onChange={this.handleStartMinutesChange}
-                />
-                <span>m</span>
-                <Button title="Now" onClick={this.handleNowButtonClick} />
-              </Divider>
-            </FormGroup>
-
-            <FormGroup title={_('Run Until')}>
+              <Spinner
+                name="startHour"
+                type="int"
+                min="0"
+                max="23"
+                value={startDate.hours()}
+                onChange={handleStartHoursChange}
+              />
+              <span>h</span>
+              <Spinner
+                name="startMinute"
+                type="int"
+                min="0"
+                max="59"
+                value={startDate.minutes()}
+                onChange={handleStartMinutesChange}
+              />
+              <span>m</span>
+            </Row>
+            <Button title={_('Now')} onClick={handleNowButtonClick} />
+          </FormGroup>
+
+          <FormGroup title={_('Run Until')}>
+            <CheckBox
+              title={_('Open End')}
+              name="endOpen"
+              checked={state.endOpen}
+              onChange={setEndOpen}
+            />
+            <Row>
               <DatePicker
-                disabled={state.endOpen}
                 timezone={timezone}
+                disabled={state.endOpen}
                 name="endDate"
                 value={state.endDate}
-                onChange={this.handleValueChange}
+                onChange={setEndDate}
               />
-              <Divider>
-                <Spinner
-                  disabled={state.endOpen}
-                  name="endHour"
-                  type="int"
-                  min="0"
-                  max="23"
-                  size="2"
-                  value={endDate.hour()}
-                  onChange={this.handleEndHoursChange}
-                />
-                <span>h</span>
+              <Spinner
+                disabled={state.endOpen}
+                name="endHour"
+                type="int"
+                min="0"
+                max="23"
+                value={endDate.hour()}
+                onChange={handleEndHoursChange}
+              />
+              <span>h</span>
+              <Spinner
+                disabled={state.endOpen}
+                name="endMinute"
+                type="int"
+                min="0"
+                max="59"
+                value={endDate.minute()}
+                onChange={handleEndMinutesChange}
+              />
+              <span>m</span>
+            </Row>
+          </FormGroup>
+
+          <FormGroup title={_('Duration')}>
+            <span>{renderDuration(duration)}</span>
+          </FormGroup>
+
+          <FormGroup title={_('Recurrence')}>
+            <Select
+              name="recurrenceType"
+              items={RECURRENCE_TYPE_ITEMS}
+              value={state.recurrenceType}
+              onChange={setRecurrenceType}
+            />
+          </FormGroup>
+
+          {state.recurrenceType === RECURRENCE_CUSTOM && (
+            <>
+              <FormGroup title={_('Repeat')} direction="row">
+                <span>{_('Every')}</span>
                 <Spinner
-                  disabled={state.endOpen}
-                  name="endMinute"
+                  name="interval"
                   type="int"
-                  min="0"
-                  max="59"
-                  size="2"
-                  value={endDate.minute()}
-                  onChange={this.handleEndMinutesChange}
+                  min="1"
+                  value={state.interval}
+                  onChange={setInterval}
                 />
-                <span>m</span>
-                <CheckBox
-                  title={_('Open End')}
-                  name="endOpen"
-                  checked={state.endOpen}
-                  onChange={this.handleValueChange}
+                <TimeUnitSelect
+                  name="freq"
+                  value={state.freq}
+                  onChange={setFreq}
                 />
-              </Divider>
-            </FormGroup>
-
-            <FormGroup title={_('Duration')}>
-              <span>{renderDuration(duration)}</span>
-            </FormGroup>
-
-            <FormGroup title={_('Recurrence')}>
-              <Select
-                name="recurrenceType"
-                items={RECURRENCE_TYPE_ITEMS}
-                value={state.recurrenceType}
-                onChange={this.handleValueChange}
-              />
-            </FormGroup>
-
-            {state.recurrenceType === RECURRENCE_CUSTOM && (
-              <React.Fragment>
-                <FormGroup title={_('Repeat')}>
-                  <Divider>
-                    <span>{_('Every')}</span>
-                    <Spinner
-                      name="interval"
-                      type="int"
-                      min="1"
-                      size="3"
-                      value={state.interval}
-                      onChange={this.handleValueChange}
+              </FormGroup>
+
+              {state.freq === RECURRENCE_WEEKLY && (
+                <FormGroup title={_('Repeat at')}>
+                  <WeekDaySelect
+                    name="weekdays"
+                    value={weekdays}
+                    onChange={setWeekdays}
+                  />
+                </FormGroup>
+              )}
+
+              {state.freq === RECURRENCE_MONTHLY && (
+                <FormGroup title={_('Repeat at')}>
+                  <Row>
+                    <Radio
+                      name="monthly"
+                      checked={state.monthly === RepeatMonthly.nth}
+                      value={RepeatMonthly.nth}
+                      onChange={setMonthly}
                     />
-                    <TimeUnitSelect
-                      name="freq"
-                      value={state.freq}
-                      onChange={this.handleValueChange}
+                    <Select
+                      items={NTH_DAY_ITEMS}
+                      disabled={state.monthly !== RepeatMonthly.nth}
+                      name="monthlyNth"
+                      value={state.monthlyNth}
+                      onChange={setMonthlyNth}
                     />
-                  </Divider>
-                </FormGroup>
-
-                {state.freq === RECURRENCE_WEEKLY && (
-                  <FormGroup title={_('Repeat at')}>
-                    <WeekDaySelect
-                      name="weekdays"
-                      value={weekdays}
-                      onChange={this.handleValueChange}
+                    <DaySelect
+                      name="monthlyDay"
+                      disabled={state.monthly !== RepeatMonthly.nth}
+                      value={state.monthlyDay}
+                      onChange={setMonthlyDay}
                     />
-                  </FormGroup>
-                )}
-
-                {state.freq === RECURRENCE_MONTHLY && (
-                  <FormGroup title={_('Repeat at')}>
-                    <Divider flex="column">
-                      <Divider>
-                        <Radio
-                          name="monthly"
-                          checked={state.monthly === RepeatMonthly.nth}
-                          value={RepeatMonthly.nth}
-                          onChange={this.handleValueChange}
-                        />
-                        <Select
-                          items={NTH_DAY_ITEMS}
-                          disabled={state.monthly !== RepeatMonthly.nth}
-                          name="monthlyNth"
-                          value={state.monthlyNth}
-                          onChange={this.handleValueChange}
-                        />
-                        <DaySelect
-                          name="monthlyDay"
-                          disabled={state.monthly !== RepeatMonthly.nth}
-                          value={state.monthlyDay}
-                          onChange={this.handleValueChange}
-                        />
-                      </Divider>
-                      <Divider>
-                        <Radio
-                          title={_('Recur on day(s)')}
-                          name="monthly"
-                          checked={state.monthly === RepeatMonthly.days}
-                          value={RepeatMonthly.days}
-                          onChange={this.handleValueChange}
-                        />
-                        <MonthDaysSelect
-                          name="monthdays"
-                          disabled={state.monthly !== RepeatMonthly.days}
-                          value={state.monthdays}
-                          onChange={this.handleValueChange}
-                        />
-                      </Divider>
-                    </Divider>
-                  </FormGroup>
-                )}
-              </React.Fragment>
-            )}
-          </Layout>
-        )}
-      </SaveDialog>
-    );
-  }
-}
+                  </Row>
+                  <Row>
+                    <Radio
+                      title={_('Recur on day(s)')}
+                      name="monthly"
+                      checked={state.monthly === RepeatMonthly.days}
+                      value={RepeatMonthly.days}
+                      onChange={setMonthly}
+                    />
+                    <MonthDaysSelect
+                      name="monthdays"
+                      disabled={state.monthly !== RepeatMonthly.days}
+                      value={state.monthdays}
+                      onChange={setMonthdays}
+                    />
+                  </Row>
+                </FormGroup>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </SaveDialog>
+  );
+};
 
 ScheduleDialog.propTypes = {
   comment: PropTypes.string,
diff --git a/src/web/pages/schedules/monthdaysselect.jsx b/src/web/pages/schedules/monthdaysselect.jsx
index 7ceaea879b..1b9e5ebb7c 100644
--- a/src/web/pages/schedules/monthdaysselect.jsx
+++ b/src/web/pages/schedules/monthdaysselect.jsx
@@ -16,9 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-
-import _ from 'gmp/locale';
+import React, {useCallback} from 'react';
 
 import {isDefined} from 'gmp/utils/identity';
 
@@ -30,101 +28,97 @@ import ToggleButton from 'web/components/form/togglebutton';
 
 import PropTypes from 'web/utils/proptypes';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const RANGE = [1, 2, 3, 4, 5, 6, 7];
 const ROWS = [0, 1, 2, 3];
 
-class MonthDaysSelect extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(val, valname) {
-    const {onChange, value = [], name} = this.props;
-
-    if (!isDefined(onChange)) {
-      return;
-    }
-
-    const day = parseInt(valname);
-
-    let newValue;
-    if (val && !value.includes(day)) {
-      newValue = [...value, day];
-    } else if (!val && value.includes(day)) {
-      newValue = value.filter(v => v !== day);
-    } else {
-      newValue = value;
-    }
-
-    if (newValue.length > 0) {
-      // at least one day must be still selected
-      onChange(newValue, name);
-    }
-  }
-
-  render() {
-    const {value = [], disabled} = this.props;
-    return (
-      <Divider flex="column">
-        {ROWS.map(j => (
-          <Divider key={j}>
-            {RANGE.map(i => {
-              const k = j * 7 + i;
-              return (
-                <ToggleButton
-                  name={'' + k}
-                  key={k}
-                  checked={value.includes(k)}
-                  disabled={disabled}
-                  onToggle={this.handleChange}
-                >
-                  {k}
-                </ToggleButton>
-              );
-            })}
-          </Divider>
-        ))}
-        <Divider>
-          <ToggleButton
-            name="29"
-            checked={value.includes(29)}
-            disabled={disabled}
-            onToggle={this.handleChange}
-          >
-            29
-          </ToggleButton>
-          <ToggleButton
-            name="30"
-            checked={value.includes(30)}
-            disabled={disabled}
-            onToggle={this.handleChange}
-          >
-            30
-          </ToggleButton>
-          <ToggleButton
-            name="31"
-            checked={value.includes(31)}
-            disabled={disabled}
-            onToggle={this.handleChange}
-          >
-            31
-          </ToggleButton>
-          <ToggleButton
-            name="-1"
-            checked={value.includes(-1)}
-            disabled={disabled}
-            width="64px"
-            onToggle={this.handleChange}
-          >
-            {_('Last Day')}
-          </ToggleButton>
+const MonthDaysSelect = ({disabled, onChange, value = [], name}) => {
+  const [_] = useTranslation();
+
+  const handleChange = useCallback(
+    (val, valName) => {
+      if (!isDefined(onChange)) {
+        return;
+      }
+
+      const day = parseInt(valName);
+
+      let newValue;
+      if (val && !value.includes(day)) {
+        newValue = [...value, day];
+      } else if (!val && value.includes(day)) {
+        newValue = value.filter(v => v !== day);
+      } else {
+        newValue = value;
+      }
+
+      if (newValue.length > 0) {
+        // at least one day must be still selected
+        onChange(newValue, name);
+      }
+    },
+    [name, value, onChange],
+  );
+
+  return (
+    <Divider flex="column">
+      {ROWS.map(j => (
+        <Divider key={j}>
+          {RANGE.map(i => {
+            const k = j * 7 + i;
+            return (
+              <ToggleButton
+                name={'' + k}
+                key={k}
+                checked={value.includes(k)}
+                disabled={disabled}
+                onToggle={handleChange}
+              >
+                {k}
+              </ToggleButton>
+            );
+          })}
         </Divider>
+      ))}
+      <Divider>
+        <ToggleButton
+          name="29"
+          checked={value.includes(29)}
+          disabled={disabled}
+          onToggle={handleChange}
+        >
+          29
+        </ToggleButton>
+        <ToggleButton
+          name="30"
+          checked={value.includes(30)}
+          disabled={disabled}
+          onToggle={handleChange}
+        >
+          30
+        </ToggleButton>
+        <ToggleButton
+          name="31"
+          checked={value.includes(31)}
+          disabled={disabled}
+          onToggle={handleChange}
+        >
+          31
+        </ToggleButton>
+        <ToggleButton
+          name="-1"
+          checked={value.includes(-1)}
+          disabled={disabled}
+          width="64px"
+          onToggle={handleChange}
+        >
+          {_('Last Day')}
+        </ToggleButton>
       </Divider>
-    );
-  }
-}
+    </Divider>
+  );
+};
 
 MonthDaysSelect.propTypes = {
   disabled: PropTypes.bool,
diff --git a/src/web/pages/schedules/timeunitselect.jsx b/src/web/pages/schedules/timeunitselect.jsx
index 804d80828d..bafc5530d5 100644
--- a/src/web/pages/schedules/timeunitselect.jsx
+++ b/src/web/pages/schedules/timeunitselect.jsx
@@ -17,21 +17,24 @@
  */
 import React from 'react';
 
-import {_l} from 'gmp/locale/lang';
-
 import {ReccurenceFrequency} from 'gmp/models/event';
 
 import Select from 'web/components/form/select';
 
-const TIME_UNIT_ITEMS = [
-  {value: ReccurenceFrequency.HOURLY, label: _l('hour(s)')},
-  {value: ReccurenceFrequency.DAILY, label: _l('day(s)')},
-  {value: ReccurenceFrequency.WEEKLY, label: _l('week(s)')},
-  {value: ReccurenceFrequency.MONTHLY, label: _l('month(s)')},
-  {value: ReccurenceFrequency.YEARLY, label: _l('year(s)')},
-];
+import useTranslation from 'web/hooks/useTranslation';
+
+const TimeUnitSelect = props => {
+  const [_] = useTranslation();
+  const TIME_UNIT_ITEMS = [
+    {value: ReccurenceFrequency.HOURLY, label: _('hour(s)')},
+    {value: ReccurenceFrequency.DAILY, label: _('day(s)')},
+    {value: ReccurenceFrequency.WEEKLY, label: _('week(s)')},
+    {value: ReccurenceFrequency.MONTHLY, label: _('month(s)')},
+    {value: ReccurenceFrequency.YEARLY, label: _('year(s)')},
+  ];
 
-const TimeUnitSelect = props => <Select {...props} items={TIME_UNIT_ITEMS} />;
+  return <Select {...props} items={TIME_UNIT_ITEMS} />;
+};
 
 export default TimeUnitSelect;
 
diff --git a/src/web/pages/schedules/weekdayselect.jsx b/src/web/pages/schedules/weekdayselect.jsx
index 28bcde6385..265d203031 100644
--- a/src/web/pages/schedules/weekdayselect.jsx
+++ b/src/web/pages/schedules/weekdayselect.jsx
@@ -16,9 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-
-import _ from 'gmp/locale';
+import React, {useCallback} from 'react';
 
 import {isDefined} from 'gmp/utils/identity';
 
@@ -30,94 +28,89 @@ import ToggleButton from 'web/components/form/togglebutton';
 
 import PropTypes from 'web/utils/proptypes';
 
-export const WeekDaysPropType = PropTypes.instanceOf(WeekDays);
-
-class WeekDaySelect extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(val, valname) {
-    const {onChange, value, name} = this.props;
+import useTranslation from 'web/hooks/useTranslation';
 
-    if (!isDefined(onChange)) {
-      return;
-    }
-
-    const newValue = value.setWeekDay(valname, val);
-
-    if (!newValue.isDefault()) {
-      // at least one day must be still selected
-      onChange(newValue, name);
-    }
-  }
+export const WeekDaysPropType = PropTypes.instanceOf(WeekDays);
 
-  render() {
-    const {value} = this.props;
-    return (
-      <Divider>
-        <ToggleButton
-          name="monday"
-          title={_('Monday')}
-          checked={value.monday}
-          onToggle={this.handleChange}
-        >
-          {_('Mo.')}
-        </ToggleButton>
-        <ToggleButton
-          name="tuesday"
-          title={_('Tuesday')}
-          checked={value.tuesday}
-          onToggle={this.handleChange}
-        >
-          {_('Tu.')}
-        </ToggleButton>
-        <ToggleButton
-          name="wednesday"
-          title={_('Wednesday')}
-          checked={value.wednesday}
-          onToggle={this.handleChange}
-        >
-          {_('We.')}
-        </ToggleButton>
-        <ToggleButton
-          name="thursday"
-          title={_('Thursday')}
-          checked={value.thursday}
-          onToggle={this.handleChange}
-        >
-          {_('Th.')}
-        </ToggleButton>
-        <ToggleButton
-          name="friday"
-          title={_('Friday')}
-          checked={value.friday}
-          onToggle={this.handleChange}
-        >
-          {_('Fr.')}
-        </ToggleButton>
-        <ToggleButton
-          name="saturday"
-          title={_('Saturday')}
-          checked={value.saturday}
-          onToggle={this.handleChange}
-        >
-          {_('Sa.')}
-        </ToggleButton>
-        <ToggleButton
-          name="sunday"
-          title={_('Sunday')}
-          checked={value.sunday}
-          onToggle={this.handleChange}
-        >
-          {_('Su.')}
-        </ToggleButton>
-      </Divider>
-    );
-  }
-}
+const WeekDaySelect = ({name, value, onChange}) => {
+  const [_] = useTranslation();
+  const handleChange = useCallback(
+    (val, valName) => {
+      if (!isDefined(onChange)) {
+        return;
+      }
+
+      const newValue = value.setWeekDay(valName, val);
+
+      if (!newValue.isDefault()) {
+        // at least one day must be still selected
+        onChange(newValue, name);
+      }
+    },
+    [name, value, onChange],
+  );
+
+  return (
+    <Divider>
+      <ToggleButton
+        name="monday"
+        title={_('Monday')}
+        checked={value.monday}
+        onToggle={handleChange}
+      >
+        {_('Mo.')}
+      </ToggleButton>
+      <ToggleButton
+        name="tuesday"
+        title={_('Tuesday')}
+        checked={value.tuesday}
+        onToggle={handleChange}
+      >
+        {_('Tu.')}
+      </ToggleButton>
+      <ToggleButton
+        name="wednesday"
+        title={_('Wednesday')}
+        checked={value.wednesday}
+        onToggle={handleChange}
+      >
+        {_('We.')}
+      </ToggleButton>
+      <ToggleButton
+        name="thursday"
+        title={_('Thursday')}
+        checked={value.thursday}
+        onToggle={handleChange}
+      >
+        {_('Th.')}
+      </ToggleButton>
+      <ToggleButton
+        name="friday"
+        title={_('Friday')}
+        checked={value.friday}
+        onToggle={handleChange}
+      >
+        {_('Fr.')}
+      </ToggleButton>
+      <ToggleButton
+        name="saturday"
+        title={_('Saturday')}
+        checked={value.saturday}
+        onToggle={handleChange}
+      >
+        {_('Sa.')}
+      </ToggleButton>
+      <ToggleButton
+        name="sunday"
+        title={_('Sunday')}
+        checked={value.sunday}
+        onToggle={handleChange}
+      >
+        {_('Su.')}
+      </ToggleButton>
+    </Divider>
+  );
+};
 
 WeekDaySelect.propTypes = {
   name: PropTypes.string,
diff --git a/src/web/pages/tags/dialog.jsx b/src/web/pages/tags/dialog.jsx
index 022a1382f6..66517b5534 100644
--- a/src/web/pages/tags/dialog.jsx
+++ b/src/web/pages/tags/dialog.jsx
@@ -40,8 +40,6 @@ import MultiSelect from 'web/components/form/multiselect';
 import Select from 'web/components/form/select';
 import YesNoRadio from 'web/components/form/yesnoradio';
 
-import Layout from 'web/components/layout/layout';
-
 import {SELECT_MAX_RESOURCES} from 'web/pages/tags/component';
 
 const Divider = styled.div`
@@ -241,13 +239,11 @@ class TagDialog extends React.Component {
       >
         {({values: state, onValueChange}) => {
           return (
-            <Layout flex="column">
+            <>
               <FormGroup title={_('Name')}>
                 <TextField
                   name="name"
-                  grow="1"
                   value={state.name}
-                  size="30"
                   onChange={onValueChange}
                 />
               </FormGroup>
@@ -256,8 +252,6 @@ class TagDialog extends React.Component {
                 <TextField
                   name="comment"
                   value={state.comment}
-                  grow="1"
-                  size="30"
                   onChange={onValueChange}
                 />
               </FormGroup>
@@ -266,7 +260,6 @@ class TagDialog extends React.Component {
                 <TextField
                   name="value"
                   value={state.value}
-                  grow="1"
                   onChange={onValueChange}
                 />
               </FormGroup>
@@ -307,7 +300,6 @@ class TagDialog extends React.Component {
                   <TextField
                     name="resource_id_text"
                     value={this.state.resourceIdText}
-                    grow="1"
                     disabled={!typeIsChosen || fixed}
                     onChange={id =>
                       this.handleIdChangeByText(id, onValueChange)
@@ -327,7 +319,7 @@ class TagDialog extends React.Component {
                   onChange={onValueChange}
                 />
               </FormGroup>
-            </Layout>
+            </>
           );
         }}
       </SaveDialog>
diff --git a/src/web/pages/targets/dialog.jsx b/src/web/pages/targets/dialog.jsx
index d5473966ca..f7d8d5cd23 100644
--- a/src/web/pages/targets/dialog.jsx
+++ b/src/web/pages/targets/dialog.jsx
@@ -17,10 +17,19 @@
  */
 import React from 'react';
 
-import {_, _l} from 'gmp/locale/lang';
-
 import {NO_VALUE, YES_VALUE} from 'gmp/parser';
 
+import {
+  snmp_credential_filter,
+  ssh_credential_filter,
+  ESXI_CREDENTIAL_TYPES,
+  SMB_CREDENTIAL_TYPES,
+  SNMP_CREDENTIAL_TYPES,
+  SSH_CREDENTIAL_TYPES,
+  USERNAME_PASSWORD_CREDENTIAL_TYPE,
+  SSH_ELEVATE_CREDENTIAL_TYPES,
+} from 'gmp/models/credential';
+
 import PropTypes from 'web/utils/proptypes';
 import withCapabilities from 'web/utils/withCapabilities';
 import {renderSelectItems, UNSET_VALUE} from 'web/utils/render';
@@ -37,19 +46,9 @@ import YesNoRadio from 'web/components/form/yesnoradio';
 import InfoIcon from 'web/components/icon/infoicon';
 import NewIcon from 'web/components/icon/newicon';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+import Row from 'web/components/layout/row';
 
-import {
-  snmp_credential_filter,
-  ssh_credential_filter,
-  ESXI_CREDENTIAL_TYPES,
-  SMB_CREDENTIAL_TYPES,
-  SNMP_CREDENTIAL_TYPES,
-  SSH_CREDENTIAL_TYPES,
-  USERNAME_PASSWORD_CREDENTIAL_TYPE,
-  SSH_ELEVATE_CREDENTIAL_TYPES,
-} from 'gmp/models/credential';
+import useTranslation from 'web/hooks/useTranslation';
 
 const DEFAULT_PORT = 22;
 
@@ -77,44 +76,6 @@ const ALIVE_TESTS = [
   'Consider Alive',
 ];
 
-const ALIVE_TESTS_ITEMS = [
-  {
-    value: ALIVE_TESTS_DEFAULT,
-    label: _l(ALIVE_TESTS_DEFAULT),
-  },
-  ...ALIVE_TESTS.map(value => ({value, label: value})),
-];
-
-const NEW_SSH = {
-  id_field: 'ssh_credential_id',
-  types: SSH_CREDENTIAL_TYPES,
-  title: _l('Create new SSH credential'),
-};
-
-const NEW_SSH_ELEVATE = {
-  id_field: 'ssh_elevate_credential_id',
-  types: SSH_ELEVATE_CREDENTIAL_TYPES,
-  title: _l('Create new SSH elevate credential'),
-};
-
-const NEW_SMB = {
-  id_field: 'smb_credential_id',
-  title: _l('Create new SMB credential'),
-  types: SMB_CREDENTIAL_TYPES,
-};
-
-const NEW_ESXI = {
-  id_field: 'esxi_credential_id',
-  title: _l('Create new ESXi credential'),
-  types: ESXI_CREDENTIAL_TYPES,
-};
-
-const NEW_SNMP = {
-  id_field: 'snmp_credential_id',
-  title: _l('Create new SNMP credential'),
-  types: SNMP_CREDENTIAL_TYPES,
-};
-
 const TargetDialog = ({
   alive_tests = ALIVE_TESTS_DEFAULT,
   allowSimultaneousIPs = YES_VALUE,
@@ -126,7 +87,7 @@ const TargetDialog = ({
   hosts = '',
   hosts_count,
   in_use = false,
-  name = _('Unnamed'),
+  name,
   port = DEFAULT_PORT,
   port_list_id = DEFAULT_PORT_LIST_ID,
   port_lists = DEFAULT_PORT_LISTS,
@@ -138,7 +99,7 @@ const TargetDialog = ({
   ssh_elevate_credential_id = UNSET_VALUE,
   target_source = 'manual',
   target_exclude_source = 'manual',
-  title = _('New Target'),
+  title,
   onClose,
   onNewCredentialsClick,
   onNewPortListClick,
@@ -151,6 +112,49 @@ const TargetDialog = ({
   onSshElevateCredentialChange,
   ...initial
 }) => {
+  const [_] = useTranslation();
+
+  name = name || _('Unnamed');
+  title = title || _('New Target');
+
+  const ALIVE_TESTS_ITEMS = [
+    {
+      value: ALIVE_TESTS_DEFAULT,
+      label: _(ALIVE_TESTS_DEFAULT),
+    },
+    ...ALIVE_TESTS.map(value => ({value, label: value})),
+  ];
+
+  const NEW_SSH = {
+    id_field: 'ssh_credential_id',
+    types: SSH_CREDENTIAL_TYPES,
+    title: _('Create new SSH credential'),
+  };
+
+  const NEW_SSH_ELEVATE = {
+    id_field: 'ssh_elevate_credential_id',
+    types: SSH_ELEVATE_CREDENTIAL_TYPES,
+    title: _('Create new SSH elevate credential'),
+  };
+
+  const NEW_SMB = {
+    id_field: 'smb_credential_id',
+    title: _('Create new SMB credential'),
+    types: SMB_CREDENTIAL_TYPES,
+  };
+
+  const NEW_ESXI = {
+    id_field: 'esxi_credential_id',
+    title: _('Create new ESXi credential'),
+    types: ESXI_CREDENTIAL_TYPES,
+  };
+
+  const NEW_SNMP = {
+    id_field: 'snmp_credential_id',
+    title: _('Create new SNMP credential'),
+    types: SNMP_CREDENTIAL_TYPES,
+  };
+
   const ssh_credentials = credentials.filter(
     value =>
       ssh_credential_filter(value) && value.id !== ssh_elevate_credential_id,
@@ -199,65 +203,59 @@ const TargetDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
                 grow="1"
-                size="30"
                 value={state.name}
                 onChange={onValueChange}
               />
             </FormGroup>
 
-            <FormGroup title={_('Comment')} flex="column">
+            <FormGroup title={_('Comment')}>
               <TextField
                 name="comment"
-                size="30"
                 value={state.comment}
                 onChange={onValueChange}
               />
             </FormGroup>
 
-            <FormGroup title={_('Hosts')} flex="column">
-              <Divider flex="column">
-                <Divider>
-                  <Radio
-                    title={_('Manual')}
-                    name="target_source"
-                    disabled={in_use}
-                    checked={state.target_source === 'manual'}
-                    value="manual"
-                    onChange={onValueChange}
-                  />
-                  <TextField
-                    grow="1"
-                    disabled={in_use || state.target_source !== 'manual'}
-                    name="hosts"
-                    value={state.hosts}
-                    onChange={onValueChange}
-                  />
-                </Divider>
-
-                <Divider>
-                  <Radio
-                    title={_('From file')}
-                    name="target_source"
-                    disabled={in_use}
-                    checked={state.target_source === 'file'}
-                    value="file"
-                    onChange={onValueChange}
-                  />
-                  <FileField
-                    name="file"
-                    disabled={in_use || state.target_source !== 'file'}
-                    onChange={onValueChange}
-                  />
-                </Divider>
-              </Divider>
-
-              {state.hosts_count && (
-                <Layout>
+            <FormGroup title={_('Hosts')}>
+              <Row>
+                <Radio
+                  title={_('Manual')}
+                  name="target_source"
+                  disabled={in_use}
+                  checked={state.target_source === 'manual'}
+                  value="manual"
+                  onChange={onValueChange}
+                />
+                <TextField
+                  grow="1"
+                  disabled={in_use || state.target_source !== 'manual'}
+                  name="hosts"
+                  value={state.hosts}
+                  onChange={onValueChange}
+                />
+              </Row>
+              <Row>
+                <Radio
+                  title={_('From file')}
+                  name="target_source"
+                  disabled={in_use}
+                  checked={state.target_source === 'file'}
+                  value="file"
+                  onChange={onValueChange}
+                />
+                <FileField
+                  grow="1"
+                  name="file"
+                  disabled={in_use || state.target_source !== 'file'}
+                  onChange={onValueChange}
+                />
+
+                {state.hosts_count && (
                   <Radio
                     title={_('From host assets ({{count}} hosts)', {
                       count: state.hosts_count,
@@ -268,53 +266,48 @@ const TargetDialog = ({
                     value="asset_hosts"
                     onChange={onValueChange}
                   />
-                </Layout>
-              )}
+                )}
+              </Row>
             </FormGroup>
 
-            <FormGroup title={_('Exclude Hosts')} flex="column">
-              <Divider flex="column">
-                <Divider>
-                  <Radio
-                    title={_('Manual')}
-                    name="target_exclude_source"
-                    disabled={in_use}
-                    checked={state.target_exclude_source === 'manual'}
-                    value="manual"
-                    onChange={onValueChange}
-                  />
-                  <TextField
-                    grow="1"
-                    disabled={
-                      in_use || state.target_exclude_source !== 'manual'
-                    }
-                    name="exclude_hosts"
-                    value={state.exclude_hosts}
-                    onChange={onValueChange}
-                  />
-                </Divider>
-
-                <Divider>
-                  <Radio
-                    title={_('From file')}
-                    name="target_exclude_source"
-                    disabled={in_use}
-                    checked={state.target_exclude_source === 'file'}
-                    value="file"
-                    onChange={onValueChange}
-                  />
-                  <FileField
-                    name="exclude_file"
-                    disabled={in_use || state.target_exclude_source !== 'file'}
-                    onChange={onValueChange}
-                  />
-                </Divider>
-              </Divider>
+            <FormGroup title={_('Exclude Hosts')}>
+              <Row>
+                <Radio
+                  title={_('Manual')}
+                  name="target_exclude_source"
+                  disabled={in_use}
+                  checked={state.target_exclude_source === 'manual'}
+                  value="manual"
+                  onChange={onValueChange}
+                />
+                <TextField
+                  grow="1"
+                  disabled={in_use || state.target_exclude_source !== 'manual'}
+                  name="exclude_hosts"
+                  value={state.exclude_hosts}
+                  onChange={onValueChange}
+                />
+              </Row>
+              <Row>
+                <Radio
+                  title={_('From file')}
+                  name="target_exclude_source"
+                  disabled={in_use}
+                  checked={state.target_exclude_source === 'file'}
+                  value="file"
+                  onChange={onValueChange}
+                />
+                <FileField
+                  grow="1"
+                  name="exclude_file"
+                  disabled={in_use || state.target_exclude_source !== 'file'}
+                  onChange={onValueChange}
+                />
+              </Row>
             </FormGroup>
 
             <FormGroup
               title={_('Allow simultaneous scanning via multiple IPs')}
-              flex="column"
             >
               <YesNoRadio
                 name="allowSimultaneousIPs"
@@ -324,24 +317,21 @@ const TargetDialog = ({
             </FormGroup>
 
             {capabilities.mayOp('get_port_lists') && (
-              <FormGroup title={_('Port List')}>
-                <Divider>
-                  <Select
-                    name="port_list_id"
-                    disabled={in_use}
-                    items={renderSelectItems(port_lists)}
-                    value={state.port_list_id}
-                    onChange={onPortListChange}
+              <FormGroup title={_('Port List')} direction="row">
+                <Select
+                  grow="1"
+                  name="port_list_id"
+                  disabled={in_use}
+                  items={renderSelectItems(port_lists)}
+                  value={state.port_list_id}
+                  onChange={onPortListChange}
+                />
+                {!in_use && (
+                  <NewIcon
+                    title={_('Create a new port list')}
+                    onClick={onNewPortListClick}
                   />
-                  {!in_use && (
-                    <Layout>
-                      <NewIcon
-                        title={_('Create a new port list')}
-                        onClick={onNewPortListClick}
-                      />
-                    </Layout>
-                  )}
-                </Divider>
+                )}
               </FormGroup>
             )}
 
@@ -359,140 +349,120 @@ const TargetDialog = ({
             )}
 
             {capabilities.mayOp('get_credentials') && (
-              <React.Fragment>
-                <FormGroup title={_('SSH')}>
-                  <Divider>
-                    <Select
-                      name="ssh_credential_id"
-                      disabled={in_use}
-                      items={renderSelectItems(ssh_credentials, UNSET_VALUE)}
-                      value={state.ssh_credential_id}
-                      onChange={onSshCredentialChange}
+              <FormGroup title={_('SSH')}>
+                <Row>
+                  <Select
+                    grow="1"
+                    name="ssh_credential_id"
+                    disabled={in_use}
+                    items={renderSelectItems(ssh_credentials, UNSET_VALUE)}
+                    value={state.ssh_credential_id}
+                    onChange={onSshCredentialChange}
+                  />
+                  {_('on port')}
+                  <TextField
+                    name="port"
+                    disabled={in_use}
+                    value={state.port}
+                    onChange={onValueChange}
+                  />
+                  {!in_use && (
+                    <NewIcon
+                      title={_('Create a new credential')}
+                      value={NEW_SSH}
+                      onClick={onNewCredentialsClick}
+                    />
+                  )}
+                </Row>
+                {state.ssh_credential_id !== UNSET_VALUE && (
+                  <Row>
+                    <InfoIcon
+                      title={_(
+                        'This feature is experimental and may ' +
+                          'not work reliable under all circumstances.',
+                      )}
                     />
-                    <Layout>{_('on port')}</Layout>
-                    <TextField
-                      size="6"
-                      name="port"
+                    <span>{_('Elevate privileges')}</span>
+                    <Select
+                      grow="1"
+                      name="ssh_elevate_credential_id"
                       disabled={in_use}
-                      value={state.port}
-                      onChange={onValueChange}
+                      items={renderSelectItems(
+                        elevateUpCredentials,
+                        UNSET_VALUE,
+                      )}
+                      value={state.ssh_elevate_credential_id}
+                      onChange={onSshElevateCredentialChange}
                     />
                     {!in_use && (
-                      <Layout>
-                        <NewIcon
-                          title={_('Create a new credential')}
-                          value={NEW_SSH}
-                          onClick={onNewCredentialsClick}
-                        />
-                      </Layout>
-                    )}
-                  </Divider>
-                </FormGroup>
-                {state.ssh_credential_id !== UNSET_VALUE && (
-                  <FormGroup title={' '}>
-                    <Divider>
-                      <Layout>
-                        <Divider>
-                          <InfoIcon
-                            title={_(
-                              'This feature is experimental and may ' +
-                                'not work reliable under all circumstances.',
-                            )}
-                          />
-                          <span>{_('Elevate privileges')}</span>
-                        </Divider>
-                      </Layout>
-                      <Select
-                        name="ssh_elevate_credential_id"
-                        disabled={in_use}
-                        items={renderSelectItems(
-                          elevateUpCredentials,
-                          UNSET_VALUE,
-                        )}
-                        value={state.ssh_elevate_credential_id}
-                        onChange={onSshElevateCredentialChange}
+                      <NewIcon
+                        title={_('Create a new credential')}
+                        value={NEW_SSH_ELEVATE}
+                        onClick={onNewCredentialsClick}
                       />
-                      {!in_use && (
-                        <Layout>
-                          <NewIcon
-                            title={_('Create a new credential')}
-                            value={NEW_SSH_ELEVATE}
-                            onClick={onNewCredentialsClick}
-                          />
-                        </Layout>
-                      )}
-                    </Divider>
-                  </FormGroup>
+                    )}
+                  </Row>
                 )}
-              </React.Fragment>
+              </FormGroup>
             )}
 
             {capabilities.mayOp('get_credentials') && (
-              <FormGroup title={_('SMB')}>
-                <Divider>
-                  <Select
-                    name="smb_credential_id"
-                    disabled={in_use}
-                    items={renderSelectItems(up_credentials, UNSET_VALUE)}
-                    value={state.smb_credential_id}
-                    onChange={onSmbCredentialChange}
+              <FormGroup title={_('SMB')} direction="row">
+                <Select
+                  grow="1"
+                  name="smb_credential_id"
+                  disabled={in_use}
+                  items={renderSelectItems(up_credentials, UNSET_VALUE)}
+                  value={state.smb_credential_id}
+                  onChange={onSmbCredentialChange}
+                />
+                {!in_use && (
+                  <NewIcon
+                    title={_('Create a new credential')}
+                    value={NEW_SMB}
+                    onClick={onNewCredentialsClick}
                   />
-                  {!in_use && (
-                    <Layout>
-                      <NewIcon
-                        title={_('Create a new credential')}
-                        value={NEW_SMB}
-                        onClick={onNewCredentialsClick}
-                      />
-                    </Layout>
-                  )}
-                </Divider>
+                )}
               </FormGroup>
             )}
 
             {capabilities.mayOp('get_credentials') && (
-              <FormGroup title={_('ESXi')}>
-                <Divider>
-                  <Select
-                    disabled={in_use}
-                    name="esxi_credential_id"
-                    items={renderSelectItems(up_credentials, UNSET_VALUE)}
-                    value={state.esxi_credential_id}
-                    onChange={onEsxiCredentialChange}
+              <FormGroup title={_('ESXi')} direction="row">
+                <Select
+                  grow="1"
+                  disabled={in_use}
+                  name="esxi_credential_id"
+                  items={renderSelectItems(up_credentials, UNSET_VALUE)}
+                  value={state.esxi_credential_id}
+                  onChange={onEsxiCredentialChange}
+                />
+                {!in_use && (
+                  <NewIcon
+                    title={_('Create a new credential')}
+                    value={NEW_ESXI}
+                    onClick={onNewCredentialsClick}
                   />
-                  {!in_use && (
-                    <Layout>
-                      <NewIcon
-                        title={_('Create a new credential')}
-                        value={NEW_ESXI}
-                        onClick={onNewCredentialsClick}
-                      />
-                    </Layout>
-                  )}
-                </Divider>
+                )}
               </FormGroup>
             )}
 
             {capabilities.mayOp('get_credentials') && (
-              <FormGroup title={_('SNMP')}>
-                <Divider>
-                  <Select
-                    disabled={in_use}
-                    name="snmp_credential_id"
-                    items={renderSelectItems(snmp_credentials, UNSET_VALUE)}
-                    value={state.snmp_credential_id}
-                    onChange={onSnmpCredentialChange}
+              <FormGroup title={_('SNMP')} direction="row">
+                <Select
+                  grow="1"
+                  disabled={in_use}
+                  name="snmp_credential_id"
+                  items={renderSelectItems(snmp_credentials, UNSET_VALUE)}
+                  value={state.snmp_credential_id}
+                  onChange={onSnmpCredentialChange}
+                />
+                {!in_use && (
+                  <NewIcon
+                    title={_('Create a new credential')}
+                    value={NEW_SNMP}
+                    onClick={onNewCredentialsClick}
                   />
-                  {!in_use && (
-                    <Layout>
-                      <NewIcon
-                        title={_('Create a new credential')}
-                        value={NEW_SNMP}
-                        onClick={onNewCredentialsClick}
-                      />
-                    </Layout>
-                  )}
-                </Divider>
+                )}
               </FormGroup>
             )}
 
@@ -513,7 +483,7 @@ const TargetDialog = ({
                 onChange={onValueChange}
               />
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/tasks/addresultstoassetsgroup.jsx b/src/web/pages/tasks/addresultstoassetsgroup.jsx
index be58d337fb..78b9b79444 100644
--- a/src/web/pages/tasks/addresultstoassetsgroup.jsx
+++ b/src/web/pages/tasks/addresultstoassetsgroup.jsx
@@ -17,14 +17,15 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import FormGroup from 'web/components/form/formgroup';
 import YesNoRadio from 'web/components/form/yesnoradio';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 export const AddResultsToAssetsGroup = ({inAssets, onChange}) => {
+  const [_] = useTranslation();
   return (
     <FormGroup title={_('Add results to Assets')}>
       <YesNoRadio name="in_assets" value={inAssets} onChange={onChange} />
diff --git a/src/web/pages/tasks/autodeletereportsgroup.jsx b/src/web/pages/tasks/autodeletereportsgroup.jsx
index 0dc3e51bb1..d1aac10b99 100644
--- a/src/web/pages/tasks/autodeletereportsgroup.jsx
+++ b/src/web/pages/tasks/autodeletereportsgroup.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {AUTO_DELETE_KEEP, AUTO_DELETE_NO} from 'gmp/models/task';
 
 import PropTypes from 'web/utils/proptypes';
@@ -27,42 +25,50 @@ import FormGroup from 'web/components/form/formgroup';
 import Radio from 'web/components/form/radio';
 import Spinner from 'web/components/form/spinner';
 
-import Divider from 'web/components/layout/divider';
+import Row from 'web/components/layout/row';
+
+import useTranslation from 'web/hooks/useTranslation';
 
 const AutoDeleteReportsGroup = ({
   autoDelete = AUTO_DELETE_NO,
   autoDeleteData,
   onChange,
-}) => (
-  <FormGroup title={_('Auto Delete Reports')} flex="column">
-    <Radio
-      title={_('Do not automatically delete reports')}
-      name="auto_delete"
-      value={AUTO_DELETE_NO}
-      onChange={onChange}
-      checked={autoDelete !== AUTO_DELETE_KEEP}
-    />
-    <Divider>
+}) => {
+  const [_] = useTranslation();
+  return (
+    <FormGroup title={_('Auto Delete Reports')}>
       <Radio
+        title={_('Do not automatically delete reports')}
         name="auto_delete"
-        value="keep"
+        value={AUTO_DELETE_NO}
         onChange={onChange}
-        title={_('Automatically delete oldest reports but always keep newest')}
-        checked={autoDelete === AUTO_DELETE_KEEP}
+        checked={autoDelete !== AUTO_DELETE_KEEP}
       />
-      <Spinner
-        type="int"
-        min="2"
-        max="1200"
-        name="auto_delete_data"
-        value={autoDeleteData}
-        disabled={autoDelete !== AUTO_DELETE_KEEP}
-        onChange={onChange}
-      />
-      <span>{_('reports')}</span>
-    </Divider>
-  </FormGroup>
-);
+      <Row>
+        <Radio
+          name="auto_delete"
+          value="keep"
+          onChange={onChange}
+          title={_(
+            'Automatically delete oldest reports but always keep newest',
+          )}
+          checked={autoDelete === AUTO_DELETE_KEEP}
+        />
+        <Spinner
+          grow="1"
+          type="int"
+          min="2"
+          max="1200"
+          name="auto_delete_data"
+          value={autoDeleteData}
+          disabled={autoDelete !== AUTO_DELETE_KEEP}
+          onChange={onChange}
+        />
+        <span>{_('reports')}</span>
+      </Row>
+    </FormGroup>
+  );
+};
 
 AutoDeleteReportsGroup.propTypes = {
   autoDelete: PropTypes.oneOf([AUTO_DELETE_KEEP, AUTO_DELETE_NO]),
diff --git a/src/web/pages/tasks/containerdialog.jsx b/src/web/pages/tasks/containerdialog.jsx
index 3e8a8591b1..c5833e1dbd 100644
--- a/src/web/pages/tasks/containerdialog.jsx
+++ b/src/web/pages/tasks/containerdialog.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
 import {YES_VALUE} from 'gmp/parser';
@@ -30,7 +28,7 @@ import SaveDialog from 'web/components/dialog/savedialog';
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
 
 import AddResultsToAssetsGroup from './addresultstoassetsgroup';
 
@@ -39,12 +37,15 @@ const ContainerTaskDialog = ({
   in_assets = YES_VALUE,
   name = '',
   task,
-  title = _('New Container Task'),
+  title,
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const isEdit = isDefined(task);
 
+  title = title || _('New Container Task');
+
   const data = {
     comment,
     in_assets,
@@ -61,13 +62,11 @@ const ContainerTaskDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
-                grow="1"
                 value={state.name}
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -75,8 +74,6 @@ const ContainerTaskDialog = ({
               <TextField
                 name="comment"
                 value={state.comment}
-                grow="1"
-                size="30"
                 onChange={onValueChange}
               />
             </FormGroup>
@@ -87,7 +84,7 @@ const ContainerTaskDialog = ({
                 onChange={onValueChange}
               />
             )}
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/tasks/dialog.jsx b/src/web/pages/tasks/dialog.jsx
index 0124ff9f38..e4851a11de 100644
--- a/src/web/pages/tasks/dialog.jsx
+++ b/src/web/pages/tasks/dialog.jsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
+import styled from 'styled-components';
 
 import {first} from 'gmp/utils/array';
 import {isDefined} from 'gmp/utils/identity';
@@ -58,12 +58,17 @@ import TextField from 'web/components/form/textfield';
 import NewIcon from 'web/components/icon/newicon';
 
 import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+
+import useTranslation from 'web/hooks/useTranslation';
 
 import AddResultsToAssetsGroup from './addresultstoassetsgroup';
 import AutoDeleteReportsGroup from './autodeletereportsgroup';
 
-const get_scanner = (scanners, scanner_id) => {
+const Title = styled.div`
+  flex-grow: 1;
+`;
+
+const getScanner = (scanners, scanner_id) => {
   if (!isDefined(scanners)) {
     return undefined;
   }
@@ -73,9 +78,14 @@ const get_scanner = (scanners, scanner_id) => {
   });
 };
 
-const ScannerSelect = props => {
-  const {changeTask, isLoading, scannerId, scanners, onChange} = props;
-
+const ScannerSelect = ({
+  changeTask,
+  isLoading,
+  scannerId,
+  scanners,
+  onChange,
+}) => {
+  const [_] = useTranslation();
   return (
     <FormGroup title={_('Scanner')}>
       <Select
@@ -123,7 +133,7 @@ const TaskDialog = ({
   max_checks = DEFAULT_MAX_CHECKS,
   max_hosts = DEFAULT_MAX_HOSTS,
   min_qod = DEFAULT_MIN_QOD,
-  name = _('Unnamed'),
+  name,
   scan_configs = [],
   scanner_id = OPENVAS_DEFAULT_SCANNER_ID,
   scanners = [
@@ -139,7 +149,7 @@ const TaskDialog = ({
   target_id,
   targets,
   task,
-  title = _('New Task'),
+  title,
   onAlertsChange,
   onClose,
   onNewAlertClick,
@@ -152,27 +162,32 @@ const TaskDialog = ({
   onTargetChange,
   ...data
 }) => {
-  const scanner = get_scanner(scanners, scanner_id);
-  const scanner_type = isDefined(scanner) ? scanner.scannerType : undefined;
+  const [_] = useTranslation();
+
+  name = name || _('Unnamed');
+  title = title || _('New Task');
 
-  const tag_items = renderSelectItems(tags);
+  const scanner = getScanner(scanners, scanner_id);
+  const scannerType = isDefined(scanner) ? scanner.scannerType : undefined;
 
-  const target_items = renderSelectItems(targets);
+  const tagItems = renderSelectItems(tags);
 
-  const schedule_items = renderSelectItems(schedules, UNSET_VALUE);
+  const targetItems = renderSelectItems(targets);
 
-  const openvas_scan_config_items = renderSelectItems(scan_configs);
+  const scheduleItems = renderSelectItems(schedules, UNSET_VALUE);
 
-  const alert_items = renderSelectItems(alerts);
+  const openvasScanConfigItems = renderSelectItems(scan_configs);
+
+  const alertItems = renderSelectItems(alerts);
 
   // having a task means we are editing a task
   const hasTask = isDefined(task);
 
-  const change_task = hasTask ? task.isChangeable() : true;
+  const changeTask = hasTask ? task.isChangeable() : true;
 
   const showTagSelection = !hasTask && tags.length > 0;
 
-  const tag_id = showTagSelection ? first(tags).id : undefined;
+  const tagId = showTagSelection ? first(tags).id : undefined;
 
   const uncontrolledData = {
     ...data,
@@ -189,10 +204,10 @@ const TaskDialog = ({
     max_hosts,
     min_qod,
     name,
-    scanner_type,
+    scanner_type: scannerType,
     scanner_id,
     schedule_periods,
-    tag_id,
+    tag_id: tagId,
     tags,
     task,
   };
@@ -202,7 +217,7 @@ const TaskDialog = ({
     config_id,
     schedule_id,
     scanner_id,
-    scanner_type,
+    scanner_type: scannerType,
     target_id,
   };
 
@@ -215,19 +230,17 @@ const TaskDialog = ({
       values={controlledData}
     >
       {({values: state, onValueChange}) => {
-        const openvas_config_id = selectSaveId(scan_configs, state.config_id);
+        const openvasConfigId = selectSaveId(scan_configs, state.config_id);
 
-        const use_openvas_scan_config =
+        const useOpenvasScanConfig =
           state.scanner_type === OPENVAS_SCANNER_TYPE ||
           state.scanner_type === GREENBONE_SENSOR_SCANNER_TYPE;
 
         return (
-          <Layout flex="column">
+          <>
             <FormGroup title={_('Name')}>
               <TextField
                 name="name"
-                grow="1"
-                size="30"
                 value={state.name}
                 onChange={onValueChange}
               />
@@ -236,92 +249,77 @@ const TaskDialog = ({
             <FormGroup title={_('Comment')}>
               <TextField
                 name="comment"
-                grow="1"
-                size="30"
                 value={state.comment}
                 onChange={onValueChange}
               />
             </FormGroup>
 
-            <FormGroup title={_('Scan Targets')}>
-              <Divider>
-                <div
-                  title={
-                    change_task
-                      ? null
-                      : _(
-                          'This setting is not alterable once task has been run at least once.',
-                        )
-                  }
-                >
-                  <Select
-                    name="target_id"
-                    disabled={!change_task}
-                    items={target_items}
-                    isLoading={isLoadingTargets}
-                    value={state.target_id}
-                    width="260px"
-                    onChange={onTargetChange}
-                  />
-                </div>
-                {change_task && (
-                  <Layout>
-                    <NewIcon
-                      title={_('Create a new target')}
-                      onClick={onNewTargetClick}
-                    />
-                  </Layout>
-                )}
-              </Divider>
+            <FormGroup title={_('Scan Targets')} direction="row">
+              <Title
+                title={
+                  changeTask
+                    ? null
+                    : _(
+                        'This setting is not alterable once task has been run at least once.',
+                      )
+                }
+              >
+                <Select
+                  name="target_id"
+                  disabled={!changeTask}
+                  items={targetItems}
+                  isLoading={isLoadingTargets}
+                  value={state.target_id}
+                  onChange={onTargetChange}
+                />
+              </Title>
+              {changeTask && (
+                <NewIcon
+                  title={_('Create a new target')}
+                  onClick={onNewTargetClick}
+                />
+              )}
             </FormGroup>
 
             {capabilities.mayOp('get_alerts') && (
-              <FormGroup title={_('Alerts')}>
-                <Divider>
-                  <MultiSelect
-                    name="alert_ids"
-                    items={alert_items}
-                    isLoading={isLoadingAlerts}
-                    value={state.alert_ids}
-                    width="260px"
-                    onChange={onAlertsChange}
-                  />
-                  <Layout>
-                    <NewIcon
-                      title={_('Create a new alert')}
-                      onClick={onNewAlertClick}
-                    />
-                  </Layout>
-                </Divider>
+              <FormGroup title={_('Alerts')} direction="row">
+                <MultiSelect
+                  grow="1"
+                  name="alert_ids"
+                  items={alertItems}
+                  isLoading={isLoadingAlerts}
+                  value={state.alert_ids}
+                  onChange={onAlertsChange}
+                />
+                <NewIcon
+                  title={_('Create a new alert')}
+                  onClick={onNewAlertClick}
+                />
               </FormGroup>
             )}
 
             {capabilities.mayOp('get_schedules') && (
-              <FormGroup title={_('Schedule')}>
-                <Divider>
-                  <Select
-                    name="schedule_id"
-                    value={state.schedule_id}
-                    items={schedule_items}
-                    isLoading={isLoadingSchedules}
-                    width="201px"
-                    onChange={onScheduleChange}
-                  />
-                  <Checkbox
-                    name="schedule_periods"
-                    checked={state.schedule_periods === YES_VALUE}
-                    checkedValue={YES_VALUE}
-                    unCheckedValue={NO_VALUE}
-                    title={_('Once')}
-                    onChange={onValueChange}
-                  />
-                  <Layout>
-                    <NewIcon
-                      title={_('Create a new schedule')}
-                      onClick={onNewScheduleClick}
-                    />
-                  </Layout>
-                </Divider>
+              <FormGroup title={_('Schedule')} direction="row">
+                <Select
+                  grow="1"
+                  name="schedule_id"
+                  value={state.schedule_id}
+                  items={scheduleItems}
+                  isLoading={isLoadingSchedules}
+                  onChange={onScheduleChange}
+                />
+                <Checkbox
+                  name="schedule_periods"
+                  checked={state.schedule_periods === YES_VALUE}
+                  checkedValue={YES_VALUE}
+                  unCheckedValue={NO_VALUE}
+                  title={_('Once')}
+                  onChange={onValueChange}
+                />
+                <NewIcon
+                  title={_('Create a new schedule')}
+                  onClick={onNewScheduleClick}
+                />
               </FormGroup>
             )}
 
@@ -342,18 +340,17 @@ const TaskDialog = ({
             <FormGroup title={_('Min QoD')}>
               <Spinner
                 name="min_qod"
-                size="4"
                 disabled={state.in_assets !== YES_VALUE}
                 type="int"
                 min="0"
                 max="100"
+                postfix="%"
                 value={state.min_qod}
                 onChange={onValueChange}
               />
-              <Layout>%</Layout>
             </FormGroup>
 
-            {change_task && (
+            {changeTask && (
               <FormGroup title={_('Alterable Task')}>
                 <YesNoRadio
                   name="alterable"
@@ -369,9 +366,10 @@ const TaskDialog = ({
               autoDeleteData={state.auto_delete_data}
               onChange={onValueChange}
             />
-            <div
+
+            <Title
               title={
-                change_task
+                changeTask
                   ? null
                   : _(
                       'This setting is not alterable once task has been run at least once.',
@@ -381,17 +379,17 @@ const TaskDialog = ({
               <ScannerSelect
                 scanners={scanners}
                 scannerId={state.scanner_id}
-                changeTask={change_task}
+                changeTask={changeTask}
                 isLoading={isLoadingScanners}
                 onChange={onScannerChange}
               />
-            </div>
-            {use_openvas_scan_config && (
-              <Layout flex="column" grow="1">
-                <FormGroup titleSize="2" title={_('Scan Config')}>
-                  <div
+            </Title>
+            {useOpenvasScanConfig && (
+              <>
+                <FormGroup title={_('Scan Config')}>
+                  <Title
                     title={
-                      change_task
+                      changeTask
                         ? null
                         : _(
                             'This setting is not alterable once task has been run at least once.',
@@ -400,17 +398,17 @@ const TaskDialog = ({
                   >
                     <Select
                       name="config_id"
-                      disabled={!change_task}
-                      items={openvas_scan_config_items}
+                      disabled={!changeTask}
+                      items={openvasScanConfigItems}
                       isLoading={isLoadingConfigs}
-                      value={openvas_config_id}
+                      value={openvasConfigId}
                       onChange={value => {
                         onScanConfigChange(value);
                       }}
                     />
-                  </div>
+                  </Title>
                 </FormGroup>
-                <FormGroup titleSize="4" title={_('Order for target hosts')}>
+                <FormGroup title={_('Order for target hosts')}>
                   <Select
                     name="hosts_ordering"
                     items={[
@@ -432,62 +430,53 @@ const TaskDialog = ({
                   />
                 </FormGroup>
                 <FormGroup
-                  titleSize="4"
                   title={_('Maximum concurrently executed NVTs per host')}
                 >
                   <Spinner
                     name="max_checks"
-                    size="10"
                     min="0"
-                    maxLength="10"
                     value={state.max_checks}
                     onChange={onValueChange}
                   />
                 </FormGroup>
-                <FormGroup
-                  titleSize="4"
-                  title={_('Maximum concurrently scanned hosts')}
-                >
+                <FormGroup title={_('Maximum concurrently scanned hosts')}>
                   <Spinner
                     name="max_hosts"
                     type="int"
                     min="0"
-                    size="10"
-                    maxLength="10"
                     value={state.max_hosts}
                     onChange={onValueChange}
                   />
                 </FormGroup>
-              </Layout>
+              </>
             )}
 
             {capabilities.mayAccess('tags') &&
               capabilities.mayCreate('tag') &&
               showTagSelection && (
-                <React.Fragment>
-                  <FormGroup title={_('Tag')}>
-                    <Divider>
-                      <Checkbox
-                        title={_('Add:')}
-                        name="add_tag"
-                        checkedValue={YES_VALUE}
-                        unCheckedValue={NO_VALUE}
-                        checked={state.add_tag === YES_VALUE}
-                        onChange={onValueChange}
-                      />
-                      <Select
-                        disabled={state.add_tag !== YES_VALUE}
-                        name="tag_id"
-                        items={tag_items}
-                        isLoading={isLoadingTags}
-                        value={state.tag_id}
-                        onChange={onValueChange}
-                      />
-                    </Divider>
-                  </FormGroup>
-                </React.Fragment>
+                <FormGroup title={_('Tag')}>
+                  <Divider>
+                    <Checkbox
+                      title={_('Add:')}
+                      name="add_tag"
+                      checkedValue={YES_VALUE}
+                      unCheckedValue={NO_VALUE}
+                      checked={state.add_tag === YES_VALUE}
+                      onChange={onValueChange}
+                    />
+                    <Select
+                      grow="1"
+                      disabled={state.add_tag !== YES_VALUE}
+                      name="tag_id"
+                      items={tagItems}
+                      isLoading={isLoadingTags}
+                      value={state.tag_id}
+                      onChange={onValueChange}
+                    />
+                  </Divider>
+                </FormGroup>
               )}
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
diff --git a/src/web/pages/tickets/createdialog.jsx b/src/web/pages/tickets/createdialog.jsx
index 179ea97f17..a326378c2c 100644
--- a/src/web/pages/tickets/createdialog.jsx
+++ b/src/web/pages/tickets/createdialog.jsx
@@ -17,45 +17,43 @@
  */
 import React, {useState} from 'react';
 
-import _ from 'gmp/locale';
-
 import SaveDialog from 'web/components/dialog/savedialog';
 
 import FormGroup from 'web/components/form/formgroup';
 import Select from 'web/components/form/select';
 import TextArea from 'web/components/form/textarea';
-import Layout from 'web/components/layout/layout';
 import useFormValidation from 'web/components/form/useFormValidation';
 import useFormValues from 'web/components/form/useFormValues';
 
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 import {createTicketRules as validationRules} from './validationrules';
 
 const fieldsToValidate = ['note'];
 
 const CreateTicketDialog = ({
   resultId,
-  title = _('Create new Ticket for Result'),
+  title,
   userId,
   users,
   onClose,
   onSave,
   onUserIdChange,
 }) => {
+  const [_] = useTranslation();
   const [error, setError] = useState();
 
   const [formValues, handleValueChange] = useFormValues({note: ''});
-  const {hasError, errors, validate} = useFormValidation(
-    validationRules,
-    formValues,
-    {
-      onValidationSuccess: onSave,
-      onValidationError: setError,
-      fieldsToValidate,
-    },
-  );
+  const {errors, validate} = useFormValidation(validationRules, formValues, {
+    onValidationSuccess: onSave,
+    onValidationError: setError,
+    fieldsToValidate,
+  });
+
+  title = title || _('Create new Ticket for Result');
 
   return (
     <SaveDialog
@@ -71,7 +69,7 @@ const CreateTicketDialog = ({
       }}
     >
       {({values}) => (
-        <Layout flex="column">
+        <>
           <FormGroup title={_('Assign To User')}>
             <Select
               name="userId"
@@ -82,16 +80,14 @@ const CreateTicketDialog = ({
           </FormGroup>
           <FormGroup title={_('Note')}>
             <TextArea
-              hasError={hasError && !!errors.note} // default false if undefined (if we don't want to do validation on this textarea)
               errorContent={errors.note}
               name="note"
-              grow="1"
-              rows="5"
+              minRows="5"
               value={values.note}
               onChange={handleValueChange}
             />
           </FormGroup>
-        </Layout>
+        </>
       )}
     </SaveDialog>
   );
diff --git a/src/web/pages/tickets/editdialog.jsx b/src/web/pages/tickets/editdialog.jsx
index 43b2f68c9e..082e29e3b8 100644
--- a/src/web/pages/tickets/editdialog.jsx
+++ b/src/web/pages/tickets/editdialog.jsx
@@ -17,14 +17,11 @@
  */
 import React, {useState} from 'react';
 
-import _ from 'gmp/locale';
-
 import {TICKET_STATUS, TICKET_STATUS_TRANSLATIONS} from 'gmp/models/ticket';
 
 import SaveDialog from 'web/components/dialog/savedialog';
 
 import FormGroup from 'web/components/form/formgroup';
-import Layout from 'web/components/layout/layout';
 import Select from 'web/components/form/select';
 import TextArea from 'web/components/form/textarea';
 import useFormValidation from 'web/components/form/useFormValidation';
@@ -33,15 +30,12 @@ import useFormValues from 'web/components/form/useFormValues';
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 import {editTicketRules as validationRules} from './validationrules';
 
 const STATUS = [TICKET_STATUS.open, TICKET_STATUS.fixed, TICKET_STATUS.closed];
 
-const STATUS_ITEMS = STATUS.map(status => ({
-  value: status,
-  label: TICKET_STATUS_TRANSLATIONS[status],
-}));
-
 const fieldsToValidate = ['openNote', 'closedNote', 'fixedNote'];
 
 const EditTicketDialog = ({
@@ -49,13 +43,14 @@ const EditTicketDialog = ({
   fixedNote = '',
   openNote = '',
   ticketId,
-  title = _('Edit Ticket'),
+  title,
   status,
   userId,
   users,
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
   const [error, setError] = useState();
   const [formValues, handleValueChange] = useFormValues({
     ticketId,
@@ -65,15 +60,17 @@ const EditTicketDialog = ({
     status,
     userId,
   });
-  const {errors, hasError, validate} = useFormValidation(
-    validationRules,
-    formValues,
-    {
-      onValidationSuccess: onSave,
-      onValidationError: setError,
-      fieldsToValidate,
-    },
-  );
+  const {errors, validate} = useFormValidation(validationRules, formValues, {
+    onValidationSuccess: onSave,
+    onValidationError: setError,
+    fieldsToValidate,
+  });
+  const STATUS_ITEMS = STATUS.map(ticketStatus => ({
+    value: ticketStatus,
+    label: `${TICKET_STATUS_TRANSLATIONS[ticketStatus]}`,
+  }));
+
+  title = title || _('Edit Ticket');
 
   return (
     <SaveDialog
@@ -85,7 +82,7 @@ const EditTicketDialog = ({
       values={formValues}
     >
       {({values}) => (
-        <Layout flex="column">
+        <>
           <FormGroup title={_('Status')}>
             <Select
               name="status"
@@ -104,38 +101,32 @@ const EditTicketDialog = ({
           </FormGroup>
           <FormGroup title={_('Note for Open')}>
             <TextArea
-              hasError={hasError && !!errors.openNote}
               errorContent={errors.openNote}
               name="openNote"
-              grow="1"
-              rows="5"
+              maxRows="5"
               value={values.openNote}
               onChange={handleValueChange}
             />
           </FormGroup>
           <FormGroup title={_('Note for Fixed')}>
             <TextArea
-              hasError={hasError && !!errors.fixedNote}
               errorContent={errors.fixedNote}
               name="fixedNote"
-              grow="1"
-              rows="5"
+              maxRows="5"
               value={values.fixedNote}
               onChange={handleValueChange}
             />
           </FormGroup>
           <FormGroup title={_('Note for Closed')}>
             <TextArea
-              hasError={hasError && !!errors.closedNote}
               errorContent={errors.closedNote}
               name="closedNote"
-              grow="1"
-              rows="5"
+              maxRows="5"
               value={values.closedNote}
               onChange={handleValueChange}
             />
           </FormGroup>
-        </Layout>
+        </>
       )}
     </SaveDialog>
   );
diff --git a/src/web/pages/users/confirmdeletedialog.jsx b/src/web/pages/users/confirmdeletedialog.jsx
index a8b2800196..8839326b4a 100644
--- a/src/web/pages/users/confirmdeletedialog.jsx
+++ b/src/web/pages/users/confirmdeletedialog.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 
@@ -28,7 +26,7 @@ import SaveDialog from 'web/components/dialog/savedialog';
 import FormGroup from 'web/components/form/formgroup';
 import Select from 'web/components/form/select';
 
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
 
 const ConfirmDeleteDialog = ({
   deleteUsers = [],
@@ -38,6 +36,7 @@ const ConfirmDeleteDialog = ({
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
   let headline;
   if (deleteUsers.length === 1) {
     headline = _('User {{name}} will be deleted.', {name: deleteUsers[0].name});
@@ -76,7 +75,7 @@ const ConfirmDeleteDialog = ({
     >
       {({values: state, onValueChange}) => {
         return (
-          <Layout flex="column">
+          <>
             <h2>{headline}</h2>
             <p>
               {_(
@@ -92,7 +91,7 @@ const ConfirmDeleteDialog = ({
                 onChange={onValueChange}
               />
             </FormGroup>
-          </Layout>
+          </>
         );
       }}
     </SaveDialog>
@@ -111,4 +110,3 @@ ConfirmDeleteDialog.propTypes = {
 export default ConfirmDeleteDialog;
 
 // vim: set ts=2 sw=2 tw=80:
-
diff --git a/src/web/pages/users/dialog.jsx b/src/web/pages/users/dialog.jsx
index ddfc8f79f6..cbe402c69c 100644
--- a/src/web/pages/users/dialog.jsx
+++ b/src/web/pages/users/dialog.jsx
@@ -16,13 +16,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-import {connect} from 'react-redux';
-import {getUsername} from 'web/store/usersettings/selectors';
-
-import compose from 'web/utils/compose';
-
-import _ from 'gmp/locale';
+import React, {useState} from 'react';
 
 import {isDefined} from 'gmp/utils/identity';
 import {map} from 'gmp/utils/array';
@@ -37,7 +31,6 @@ import {
 } from 'gmp/models/user';
 
 import PropTypes from 'web/utils/proptypes';
-import withCapabilities from 'web/utils/withCapabilities';
 
 import ConfirmationDialog from 'web/components/dialog/confirmationdialog';
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -48,362 +41,329 @@ import Radio from 'web/components/form/radio';
 import MultiSelect from 'web/components/form/multiselect';
 import TextField from 'web/components/form/textfield';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
-class Dialog extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    const {roleIds = []} = this.props;
-
-    this.state = {
-      confirmationDialogVisible: false,
-      confirmationDialogVisibleSuperAdmin: false,
-      noRoleConfirmed: false,
-      roleIds,
-      superAdminData: {},
-    };
-
-    this.closeConfirmationDialog = this.closeConfirmationDialog.bind(this);
-    this.closeConfirmationDialogSuperAdmin =
-      this.closeConfirmationDialogSuperAdmin.bind(this);
-    this.openConfirmationDialogSuperAdmin =
-      this.openConfirmationDialogSuperAdmin.bind(this);
-    this.handleResumeClick = this.handleResumeClick.bind(this);
-    this.handleResumeClickSuperAdmin =
-      this.handleResumeClickSuperAdmin.bind(this);
-    this.handleRoleIdsChange = this.handleRoleIdsChange.bind(this);
-    this.handleSaveClick = this.handleSaveClick.bind(this);
-  }
-
-  openConfirmationDialog() {
-    this.setState({confirmationDialogVisible: true});
-  }
-
-  closeConfirmationDialog() {
-    this.setState({confirmationDialogVisible: false});
-  }
-
-  openConfirmationDialogSuperAdmin() {
-    this.setState({confirmationDialogVisibleSuperAdmin: true});
-  }
-
-  closeConfirmationDialogSuperAdmin() {
-    this.setState({confirmationDialogVisibleSuperAdmin: false});
-  }
-
-  handleResumeClick() {
-    this.setState({noRoleConfirmed: true});
-    this.closeConfirmationDialog();
-  }
-
-  handleResumeClickSuperAdmin(onSave) {
-    this.closeConfirmationDialogSuperAdmin();
-    return onSave(this.state.superAdminData);
-  }
-
-  handleRoleIdsChange(value) {
-    this.setState({
-      noRoleConfirmed: false,
-      roleIds: value,
-    });
-  }
-
-  handleSaveClick(onSave, userData) {
-    const {roleIds, noRoleConfirmed} = this.state;
+import Row from 'web/components/layout/row';
+
+import useTranslation from 'web/hooks/useTranslation';
+import useUserName from 'web/utils/useUserName';
+import useCapabilities from 'web/utils/useCapabilities';
+
+const Dialog = ({
+  roleIds: initialRoleIds = [],
+  accessHosts = '',
+  comment = '',
+  groups,
+  groupIds = [],
+  hostsAllow = ACCESS_ALLOW_ALL,
+  name,
+  oldName,
+  password = '',
+  roles,
+  settings,
+  title,
+  user,
+  onClose,
+  onSave,
+}) => {
+  const [_] = useTranslation();
+  const [username] = useUserName();
+  const capabilities = useCapabilities();
+  const [confirmationDialogVisible, setConfirmationDialogVisible] =
+    useState(false);
+  const [
+    confirmationDialogVisibleSuperAdmin,
+    setConfirmationDialogVisibleSuperAdmin,
+  ] = useState(false);
+  const [noRoleConfirmed, setNoRoleConfirmed] = useState(false);
+  const [superAdminData, setSuperAdminData] = useState({});
+  const [roleIds, setRoleIds] = useState(initialRoleIds);
+
+  name = name || _('Unnamed');
+  title = title || _('New User');
+
+  const openConfirmationDialog = () => {
+    setConfirmationDialogVisible(true);
+  };
+
+  const closeConfirmationDialog = () => {
+    setConfirmationDialogVisible(false);
+  };
+
+  const openConfirmationDialogSuperAdmin = () => {
+    setConfirmationDialogVisibleSuperAdmin(true);
+  };
+
+  const closeConfirmationDialogSuperAdmin = () => {
+    setConfirmationDialogVisibleSuperAdmin(false);
+  };
+
+  const handleResumeClick = () => {
+    setNoRoleConfirmed(true);
+    closeConfirmationDialog();
+  };
+
+  const handleResumeClickSuperAdmin = () => {
+    closeConfirmationDialogSuperAdmin();
+    return onSave(superAdminData);
+  };
+
+  const handleRoleIdsChange = value => {
+    setNoRoleConfirmed(false);
+    setRoleIds(value);
+  };
+
+  const handleSaveClick = userData => {
     if (roleIds.length > 0 || noRoleConfirmed) {
       /*
        * You reach this point, if you have at least one role in the user data
        * or you have already confirmed that you want to save the user data
        * without any role.
        */
-      if (
-        isDefined(this.props.user) &&
-        this.props.username === this.props.user.name
-      ) {
+      if (isDefined(user) && username === user.name) {
         /*
          * You reach this point only as a Super Admin, when you try to save your
          * own personal user data. The confirmation dialog opens. The data can
          * then be saved from the confirmation dialog, so we have to "return"
          * after opening the confirmation dialog.
          */
-        this.setState({superAdminData: userData});
-        this.openConfirmationDialogSuperAdmin();
+        setSuperAdminData(userData);
+        openConfirmationDialogSuperAdmin();
         return;
       }
       return onSave(userData);
     }
-    this.openConfirmationDialog();
-  }
-
-  render() {
-    const {
-      accessHosts = '',
-      capabilities,
-      comment = '',
-      groups,
-      groupIds = [],
-      hostsAllow = ACCESS_ALLOW_ALL,
-      name = _('Unnamed'),
-      oldName,
-      password = '',
-      roles,
-      settings,
-      title = _('New User'),
-      user,
-      onClose,
-      onSave,
-    } = this.props;
-
-    const {
-      confirmationDialogVisible,
-      confirmationDialogVisibleSuperAdmin,
-      roleIds,
-    } = this.state;
-
-    const isEdit = isDefined(user);
-
-    const data = {
-      ...user,
-      access_hosts: accessHosts,
-      auth_method:
-        isEdit && isDefined(user.authMethod)
-          ? user.authMethod
-          : AUTH_METHOD_PASSWORD,
-      comment,
-      group_ids: groupIds,
-      groups,
-      hosts_allow: hostsAllow,
-      name,
-      old_name: oldName,
-      password,
-      roles,
-    };
-
-    const controlledValues = {
-      role_ids: roleIds,
-    };
-
-    const rolesOptions = map(roles, role => ({
-      label: role.name,
-      value: role.id,
-    }));
-
-    const groupsOptions = map(groups, group => ({
-      label: group.name,
-      value: group.id,
-    }));
-
-    const hasLdapEnabled = settings.get('method:ldap_connect').enabled;
-    const hasRadiusEnabled = settings.get('method:radius_connect').enabled;
-
-    return (
-      <React.Fragment>
-        <SaveDialog
-          title={title}
-          values={controlledValues}
-          onClose={onClose}
-          onSave={userData => this.handleSaveClick(onSave, userData)}
-          defaultValues={data}
-        >
-          {({values: state, onValueChange}) => (
-            <React.Fragment>
-              <Layout flex="column">
-                <FormGroup title={_('Login Name')}>
-                  <TextField
-                    name="name"
-                    grow="1"
-                    value={state.name}
-                    size="30"
+    openConfirmationDialog();
+  };
+
+  const isEdit = isDefined(user);
+
+  const data = {
+    ...user,
+    access_hosts: accessHosts,
+    auth_method:
+      isEdit && isDefined(user.authMethod)
+        ? user.authMethod
+        : AUTH_METHOD_PASSWORD,
+    comment,
+    group_ids: groupIds,
+    groups,
+    hosts_allow: hostsAllow,
+    name,
+    old_name: oldName,
+    password,
+    roles,
+  };
+
+  const controlledValues = {
+    role_ids: roleIds,
+  };
+
+  const rolesOptions = map(roles, role => ({
+    label: role.name,
+    value: role.id,
+  }));
+
+  const groupsOptions = map(groups, group => ({
+    label: group.name,
+    value: group.id,
+  }));
+
+  const hasLdapEnabled = settings.get('method:ldap_connect').enabled;
+  const hasRadiusEnabled = settings.get('method:radius_connect').enabled;
+
+  return (
+    <React.Fragment>
+      <SaveDialog
+        title={title}
+        values={controlledValues}
+        onClose={onClose}
+        onSave={handleSaveClick}
+        defaultValues={data}
+      >
+        {({values: state, onValueChange}) => (
+          <React.Fragment>
+            <FormGroup title={_('Login Name')}>
+              <TextField
+                name="name"
+                value={state.name}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+
+            <FormGroup title={_('Comment')}>
+              <TextField
+                name="comment"
+                value={state.comment}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+
+            {!isEdit && (
+              <FormGroup title={_('Authentication')} flex="column">
+                <Row>
+                  <Radio
+                    title={_('Password')}
+                    name="auth_method"
+                    value={AUTH_METHOD_PASSWORD}
+                    checked={state.auth_method === AUTH_METHOD_PASSWORD}
                     onChange={onValueChange}
                   />
-                </FormGroup>
-
-                <FormGroup title={_('Comment')}>
-                  <TextField
-                    name="comment"
-                    value={state.comment}
+                  <PasswordField
                     grow="1"
-                    size="30"
+                    name="password"
+                    autoComplete="new-password"
+                    value={state.password}
+                    onChange={onValueChange}
+                  />
+                </Row>
+                {hasLdapEnabled && (
+                  <Radio
+                    title={_('LDAP Authentication Only')}
+                    name="auth_method"
+                    value={AUTH_METHOD_LDAP}
+                    checked={state.auth_method === AUTH_METHOD_LDAP}
                     onChange={onValueChange}
                   />
-                </FormGroup>
-
-                {!isEdit && (
-                  <FormGroup title={_('Authentication')} flex="column">
-                    <Divider flex="column">
-                      <Divider>
-                        <Radio
-                          title={_('Password')}
-                          name="auth_method"
-                          value={AUTH_METHOD_PASSWORD}
-                          checked={state.auth_method === AUTH_METHOD_PASSWORD}
-                          onChange={onValueChange}
-                        />
-                        <PasswordField
-                          name="password"
-                          autoComplete="new-password"
-                          value={state.password}
-                          onChange={onValueChange}
-                        />
-                      </Divider>
-                      {hasLdapEnabled && (
-                        <Radio
-                          title={_('LDAP Authentication Only')}
-                          name="auth_method"
-                          value={AUTH_METHOD_LDAP}
-                          checked={state.auth_method === AUTH_METHOD_LDAP}
-                          onChange={onValueChange}
-                        />
-                      )}
-                      {hasRadiusEnabled && (
-                        <Radio
-                          title={_('RADIUS Authentication Only')}
-                          name="auth_method"
-                          value={AUTH_METHOD_RADIUS}
-                          checked={state.auth_method === AUTH_METHOD_RADIUS}
-                          onChange={onValueChange}
-                        />
-                      )}
-                    </Divider>
-                  </FormGroup>
                 )}
-
-                {isEdit && (
-                  <FormGroup title={_('Authentication')} flex="column">
-                    <Divider flex="column">
-                      <Radio
-                        title={_('Password: Use existing Password')}
-                        name="auth_method"
-                        value={AUTH_METHOD_PASSWORD}
-                        checked={state.auth_method === AUTH_METHOD_PASSWORD}
-                        onChange={onValueChange}
-                      />
-                      <Divider>
-                        <Radio
-                          title={_('New Password')}
-                          name="auth_method"
-                          value={AUTH_METHOD_NEW_PASSWORD}
-                          checked={
-                            state.auth_method === AUTH_METHOD_NEW_PASSWORD
-                          }
-                          onChange={onValueChange}
-                        />
-                        <PasswordField
-                          name="password"
-                          autoComplete="new-password"
-                          value={state.password}
-                          onChange={onValueChange}
-                        />
-                      </Divider>
-                      {hasLdapEnabled && (
-                        <Radio
-                          title={_('LDAP Authentication Only')}
-                          name="auth_method"
-                          value={AUTH_METHOD_LDAP}
-                          checked={state.auth_method === AUTH_METHOD_LDAP}
-                          onChange={onValueChange}
-                        />
-                      )}
-                      {hasRadiusEnabled && (
-                        <Radio
-                          title={_('RADIUS Authentication Only')}
-                          name="auth_method"
-                          value={AUTH_METHOD_RADIUS}
-                          checked={state.auth_method === AUTH_METHOD_RADIUS}
-                          onChange={onValueChange}
-                        />
-                      )}
-                    </Divider>
-                  </FormGroup>
+                {hasRadiusEnabled && (
+                  <Radio
+                    title={_('RADIUS Authentication Only')}
+                    name="auth_method"
+                    value={AUTH_METHOD_RADIUS}
+                    checked={state.auth_method === AUTH_METHOD_RADIUS}
+                    onChange={onValueChange}
+                  />
                 )}
-                {capabilities.mayAccess('roles') && (
-                  <FormGroup title={_('Roles')}>
-                    <MultiSelect
-                      name="role_ids"
-                      items={rolesOptions}
-                      value={roleIds}
-                      onChange={this.handleRoleIdsChange}
-                    />
-                  </FormGroup>
+              </FormGroup>
+            )}
+
+            {isEdit && (
+              <FormGroup title={_('Authentication')}>
+                <Radio
+                  title={_('Password: Use existing Password')}
+                  name="auth_method"
+                  value={AUTH_METHOD_PASSWORD}
+                  checked={state.auth_method === AUTH_METHOD_PASSWORD}
+                  onChange={onValueChange}
+                />
+                <Row>
+                  <Radio
+                    title={_('New Password')}
+                    name="auth_method"
+                    value={AUTH_METHOD_NEW_PASSWORD}
+                    checked={state.auth_method === AUTH_METHOD_NEW_PASSWORD}
+                    onChange={onValueChange}
+                  />
+                  <PasswordField
+                    grow="1"
+                    name="password"
+                    autoComplete="new-password"
+                    disabled={state.auth_method !== AUTH_METHOD_NEW_PASSWORD}
+                    value={state.password}
+                    onChange={onValueChange}
+                  />
+                </Row>
+                {hasLdapEnabled && (
+                  <Radio
+                    title={_('LDAP Authentication Only')}
+                    name="auth_method"
+                    value={AUTH_METHOD_LDAP}
+                    checked={state.auth_method === AUTH_METHOD_LDAP}
+                    onChange={onValueChange}
+                  />
                 )}
-
-                {capabilities.mayAccess('groups') && (
-                  <FormGroup title={_('Groups')}>
-                    <MultiSelect
-                      name="group_ids"
-                      items={groupsOptions}
-                      value={state.group_ids}
-                      onChange={onValueChange}
-                    />
-                  </FormGroup>
+                {hasRadiusEnabled && (
+                  <Radio
+                    title={_('RADIUS Authentication Only')}
+                    name="auth_method"
+                    value={AUTH_METHOD_RADIUS}
+                    checked={state.auth_method === AUTH_METHOD_RADIUS}
+                    onChange={onValueChange}
+                  />
                 )}
-
-                <FormGroup title={_('Host Access')}>
-                  <Divider flex="column">
-                    <Divider>
-                      <Radio
-                        name="hosts_allow"
-                        title={_('Allow all and deny')}
-                        value={ACCESS_ALLOW_ALL}
-                        checked={state.hosts_allow === ACCESS_ALLOW_ALL}
-                        onChange={onValueChange}
-                      />
-                      <Radio
-                        name="hosts_allow"
-                        title={_('Deny all and allow')}
-                        value={ACCESS_DENY_ALL}
-                        checked={state.hosts_allow === ACCESS_DENY_ALL}
-                        onChange={onValueChange}
-                      />
-                    </Divider>
-                    <TextField
-                      name="access_hosts"
-                      size="30"
-                      value={state.access_hosts}
-                      onChange={onValueChange}
-                    />
-                  </Divider>
-                </FormGroup>
-              </Layout>
-              {confirmationDialogVisibleSuperAdmin && (
-                <ConfirmationDialog
-                  content={_(
-                    'Please note: You are about to change your own personal user data ' +
-                      'as Super Admin! It is not possible to change the login name. ' +
-                      'If you have modified the login name, neither the login name nor ' +
-                      'any other changes made will be saved. ' +
-                      'If you have made any modifications other than the login name, ' +
-                      'the data will be saved when clicking OK, and you will be logged ' +
-                      'out immediately.',
-                  )}
-                  title={_('Save Super Admin User')}
-                  width="400px"
-                  onClose={this.closeConfirmationDialogSuperAdmin}
-                  onResumeClick={s => this.handleResumeClickSuperAdmin(onSave)}
+              </FormGroup>
+            )}
+            {capabilities.mayAccess('roles') && (
+              <FormGroup title={_('Roles')}>
+                <MultiSelect
+                  name="role_ids"
+                  items={rolesOptions}
+                  value={roleIds}
+                  onChange={handleRoleIdsChange}
                 />
-              )}
-              {confirmationDialogVisible && (
-                <ConfirmationDialog
-                  content={_(
-                    'Please note: You are about to create a user ' +
-                      'without a role. This user will not have any ' +
-                      'permissions and as a result will not be able to login.',
-                  )}
-                  title={_('User without a role')}
-                  width="400px"
-                  onClose={this.closeConfirmationDialog}
-                  onResumeClick={this.handleResumeClick}
+              </FormGroup>
+            )}
+
+            {capabilities.mayAccess('groups') && (
+              <FormGroup title={_('Groups')}>
+                <MultiSelect
+                  name="group_ids"
+                  items={groupsOptions}
+                  value={state.group_ids}
+                  onChange={onValueChange}
                 />
-              )}
-            </React.Fragment>
-          )}
-        </SaveDialog>
-      </React.Fragment>
-    );
-  }
-}
+              </FormGroup>
+            )}
+
+            <FormGroup title={_('Host Access')}>
+              <Row>
+                <Radio
+                  name="hosts_allow"
+                  title={_('Allow all and deny')}
+                  value={ACCESS_ALLOW_ALL}
+                  checked={state.hosts_allow === ACCESS_ALLOW_ALL}
+                  onChange={onValueChange}
+                />
+                <Radio
+                  name="hosts_allow"
+                  title={_('Deny all and allow')}
+                  value={ACCESS_DENY_ALL}
+                  checked={state.hosts_allow === ACCESS_DENY_ALL}
+                  onChange={onValueChange}
+                />
+              </Row>
+              <TextField
+                grow="1"
+                name="access_hosts"
+                value={state.access_hosts}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+            {confirmationDialogVisibleSuperAdmin && (
+              <ConfirmationDialog
+                content={_(
+                  'Please note: You are about to change your own personal user data ' +
+                    'as Super Admin! It is not possible to change the login name. ' +
+                    'If you have modified the login name, neither the login name nor ' +
+                    'any other changes made will be saved. ' +
+                    'If you have made any modifications other than the login name, ' +
+                    'the data will be saved when clicking OK, and you will be logged ' +
+                    'out immediately.',
+                )}
+                title={_('Save Super Admin User')}
+                width="400px"
+                onClose={closeConfirmationDialogSuperAdmin}
+                onResumeClick={handleResumeClickSuperAdmin}
+              />
+            )}
+            {confirmationDialogVisible && (
+              <ConfirmationDialog
+                content={_(
+                  'Please note: You are about to create a user ' +
+                    'without a role. This user will not have any ' +
+                    'permissions and as a result will not be able to login.',
+                )}
+                title={_('User without a role')}
+                width="400px"
+                onClose={closeConfirmationDialog}
+                onResumeClick={handleResumeClick}
+              />
+            )}
+          </React.Fragment>
+        )}
+      </SaveDialog>
+    </React.Fragment>
+  );
+};
 
 Dialog.propTypes = {
   accessHosts: PropTypes.string,
@@ -413,7 +373,6 @@ Dialog.propTypes = {
     AUTH_METHOD_PASSWORD,
     AUTH_METHOD_RADIUS,
   ]),
-  capabilities: PropTypes.capabilities.isRequired,
   comment: PropTypes.string,
   groupIds: PropTypes.array,
   groups: PropTypes.array,
@@ -427,16 +386,10 @@ Dialog.propTypes = {
   settings: PropTypes.settings.isRequired,
   title: PropTypes.string,
   user: PropTypes.model,
-  username: PropTypes.string,
   onClose: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = rootState => {
-  const username = getUsername(rootState);
-  return {username};
-};
-
-export default compose(withCapabilities, connect(mapStateToProps))(Dialog);
+export default Dialog;
 
 // vim: set ts=2 sw=2 tw=80: