diff --git a/src/web/wizard/advancedtaskwizard.jsx b/src/web/wizard/advancedtaskwizard.jsx
index e68fe8cec6..97fdd53cb0 100644
--- a/src/web/wizard/advancedtaskwizard.jsx
+++ b/src/web/wizard/advancedtaskwizard.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {
   esxi_credential_filter,
   smb_credential_filter,
@@ -28,12 +26,9 @@ import {
 
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
-import withCapabilities from 'web/utils/withCapabilities';
 
 import SaveDialog from 'web/components/dialog/savedialog';
 
-import Divider from 'web/components/layout/divider';
-
 import Select from 'web/components/form/select';
 import Spinner from 'web/components/form/spinner';
 import FormGroup from 'web/components/form/formgroup';
@@ -42,7 +37,12 @@ import Radio from 'web/components/form/radio';
 import Datepicker from 'web/components/form/datepicker';
 import TimeZoneSelect from 'web/components/form/timezoneselect';
 
+import Divider from 'web/components/layout/divider';
 import Layout from 'web/components/layout/layout';
+import Column from 'web/components/layout/column';
+
+import useTranslation from 'web/hooks/useTranslation';
+import useCapabilities from 'web/utils/useCapabilities';
 
 import {WizardContent, WizardIcon} from './taskwizard';
 
@@ -60,7 +60,6 @@ const DEFAULTS = {
 const AdvancedTaskWizard = ({
   alert_email,
   auto_start,
-  capabilities,
   config_id,
   credentials = [],
   start_date,
@@ -77,6 +76,8 @@ const AdvancedTaskWizard = ({
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
+  const capabilities = useCapabilities();
   const configItems = renderSelectItems(scan_configs);
   const sshCredentialItems = renderSelectItems(
     credentials.filter(ssh_credential_filter),
@@ -181,19 +182,18 @@ const AdvancedTaskWizard = ({
               </p>
             </WizardContent>
           </Layout>
-          <Layout grow="1" basis="0" flex="column">
-            <FormGroup title={_('Task Name')} titleSize="3">
+          <Column>
+            <FormGroup title={_('Task Name')}>
               <TextField
                 name="task_name"
                 grow="1"
                 onChange={onValueChange}
                 value={state.task_name}
-                size="30"
                 maxLength="80"
               />
             </FormGroup>
 
-            <FormGroup title={_('Scan Config')} titleSize="3">
+            <FormGroup title={_('Scan Config')}>
               <Select
                 name="config_id"
                 value={state.config_id}
@@ -202,7 +202,7 @@ const AdvancedTaskWizard = ({
               />
             </FormGroup>
 
-            <FormGroup title={_('Target Host(s)')} titleSize="3">
+            <FormGroup title={_('Target Host(s)')}>
               <TextField
                 name="target_hosts"
                 grow="1"
@@ -212,21 +212,19 @@ const AdvancedTaskWizard = ({
               />
             </FormGroup>
 
-            <FormGroup title={_('Start Time')} titleSize="3" flex="column">
-              <FormGroup>
-                <Radio
-                  title={_('Start immediately')}
-                  value={IMMEDIATELY_START_VALUE}
-                  checked={state.auto_start === IMMEDIATELY_START_VALUE}
-                  name="auto_start"
-                  onChange={onValueChange}
-                />
-              </FormGroup>
+            <FormGroup title={_('Start Time')}>
+              <Radio
+                title={_('Start immediately')}
+                value={IMMEDIATELY_START_VALUE}
+                checked={state.auto_start === IMMEDIATELY_START_VALUE}
+                name="auto_start"
+                onChange={onValueChange}
+              />
 
               {capabilities.mayCreate('schedule') &&
                 capabilities.mayAccess('schedules') && (
-                  <span>
-                    <FormGroup>
+                  <>
+                    <Column>
                       <Radio
                         title={_('Create Schedule:')}
                         value={SCHEDULE_START_VALUE}
@@ -234,23 +232,18 @@ const AdvancedTaskWizard = ({
                         name="auto_start"
                         onChange={onValueChange}
                       />
-                    </FormGroup>
-                    <FormGroup offset="1">
                       <Datepicker
                         name="start_date"
                         value={state.start_date}
                         timezone={state.start_timezone}
                         onChange={onValueChange}
                       />
-                    </FormGroup>
-                    <FormGroup offset="1">
                       <Divider>
                         <span>{_('at')}</span>
                         <Spinner
                           type="int"
                           min="0"
                           max="23"
-                          size="2"
                           name="start_hour"
                           value={state.start_hour}
                           onChange={onValueChange}
@@ -260,22 +253,19 @@ const AdvancedTaskWizard = ({
                           type="int"
                           min="0"
                           max="59"
-                          size="2"
                           name="start_minute"
                           value={state.start_minute}
                           onChange={onValueChange}
                         />
                         <span>{_('m')}</span>
                       </Divider>
-                    </FormGroup>
-                    <FormGroup offset="1">
-                      <TimeZoneSelect
-                        name="start_timezone"
-                        value={state.start_timezone}
-                        onChange={onValueChange}
-                      />
-                    </FormGroup>
-                  </span>
+                    </Column>
+                    <TimeZoneSelect
+                      name="start_timezone"
+                      value={state.start_timezone}
+                      onChange={onValueChange}
+                    />
+                  </>
                 )}
 
               <Radio
@@ -287,26 +277,24 @@ const AdvancedTaskWizard = ({
               />
             </FormGroup>
 
-            <FormGroup title={_('SSH Credential')} titleSize="3">
-              <Divider>
-                <Select
-                  value={state.ssh_credential}
-                  name="ssh_credential"
-                  items={sshCredentialItems}
-                  onChange={onValueChange}
-                />
-                <span>{_(' on port ')}</span>
-                <Spinner
-                  min="0"
-                  max="65535"
-                  size="5"
-                  value={state.ssh_port}
-                  onChange={onValueChange}
-                />
-              </Divider>
+            <FormGroup title={_('SSH Credential')} direction="row">
+              <Select
+                value={state.ssh_credential}
+                name="ssh_credential"
+                items={sshCredentialItems}
+                onChange={onValueChange}
+              />
+              <span>{_(' on port ')}</span>
+              <Spinner
+                min="0"
+                max="65535"
+                type="int"
+                value={state.ssh_port}
+                onChange={onValueChange}
+              />
             </FormGroup>
 
-            <FormGroup title={_('SMB Credential')} titleSize="3">
+            <FormGroup title={_('SMB Credential')}>
               <Select
                 value={state.smb_credential}
                 name="smb_credential"
@@ -315,7 +303,7 @@ const AdvancedTaskWizard = ({
               />
             </FormGroup>
 
-            <FormGroup title={_('ESXi Credential')} titleSize="3">
+            <FormGroup title={_('ESXi Credential')}>
               <Select
                 value={state.esxi_credential}
                 name="esxi_credential"
@@ -326,18 +314,17 @@ const AdvancedTaskWizard = ({
 
             {capabilities.mayCreate('alert') &&
               capabilities.mayAccess('alerts') && (
-                <FormGroup title={_('Email report to')} titleSize="3">
+                <FormGroup title={_('Email report to')}>
                   <TextField
                     name="alert_email"
                     grow="1"
                     value={state.alert_email}
-                    size="30"
                     maxLength="80"
                     onChange={onValueChange}
                   />
                 </FormGroup>
               )}
-          </Layout>
+          </Column>
         </Layout>
       )}
     </SaveDialog>
@@ -351,7 +338,6 @@ AdvancedTaskWizard.propTypes = {
     SCHEDULE_START_VALUE,
     DONT_START_VALUE,
   ]),
-  capabilities: PropTypes.capabilities.isRequired,
   config_id: PropTypes.idOrZero,
   credentials: PropTypes.arrayOf(PropTypes.model),
   esxi_credential: PropTypes.idOrZero,
@@ -370,6 +356,6 @@ AdvancedTaskWizard.propTypes = {
   onSave: PropTypes.func.isRequired,
 };
 
-export default withCapabilities(AdvancedTaskWizard);
+export default AdvancedTaskWizard;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/wizard/modifytaskwizard.jsx b/src/web/wizard/modifytaskwizard.jsx
index 6f0783d44c..1a99a23b40 100644
--- a/src/web/wizard/modifytaskwizard.jsx
+++ b/src/web/wizard/modifytaskwizard.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {parseYesNo, NO_VALUE, YES_VALUE} from 'gmp/parser';
 
 import PropTypes from 'web/utils/proptypes';
@@ -33,17 +31,19 @@ import TextField from 'web/components/form/textfield';
 import TimeZoneSelect from 'web/components/form/timezoneselect';
 import Datepicker from 'web/components/form/datepicker';
 
-import Divider from 'web/components/layout/divider';
 import Layout from 'web/components/layout/layout';
+import Column from 'web/components/layout/column';
+import Row from 'web/components/layout/row';
 
 import {renderSelectItems} from 'web/utils/render';
-import withCapabilities from 'web/utils/withCapabilities';
+
+import useTranslation from 'web/hooks/useTranslation';
+import useCapabilities from 'web/utils/useCapabilities';
 
 import {WizardContent, WizardIcon} from './taskwizard';
 
 const ModifyTaskWizard = ({
   alert_email = '',
-  capabilities,
   reschedule,
   start_date,
   start_hour,
@@ -54,6 +54,8 @@ const ModifyTaskWizard = ({
   onClose,
   onSave,
 }) => {
+  const [_] = useTranslation();
+  const capabilities = useCapabilities();
   const data = {
     alert_email,
     start_date,
@@ -116,8 +118,8 @@ const ModifyTaskWizard = ({
               </div>
             </WizardContent>
           </Layout>
-          <Layout basis="0" grow="1" flex="column">
-            <FormGroup title={_('Task')} titleSize="3">
+          <Column>
+            <FormGroup title={_('Task')}>
               <Select
                 name="task_id"
                 value={state.task_id}
@@ -128,85 +130,72 @@ const ModifyTaskWizard = ({
 
             {capabilities.mayCreate('schedule') &&
               capabilities.mayAccess('schedules') && (
-                <FormGroup title={_('Start Time')} titleSize="3" flex="column">
-                  <FormGroup>
-                    <Radio
-                      title={_('Do not change')}
-                      value={NO_VALUE}
-                      checked={state.reschedule === NO_VALUE}
-                      convert={parseYesNo}
-                      name="reschedule"
-                      onChange={onValueChange}
-                    />
-                  </FormGroup>
-                  <FormGroup>
-                    <Radio
-                      title={_('Create Schedule')}
-                      value={YES_VALUE}
-                      checked={state.reschedule === YES_VALUE}
-                      convert={parseYesNo}
-                      name="reschedule"
-                      onChange={onValueChange}
-                    />
-                  </FormGroup>
-                  <FormGroup offset="1">
-                    <Datepicker
-                      name="start_date"
-                      timezone={state.start_timezone}
-                      value={state.start_date}
+                <FormGroup title={_('Start Time')}>
+                  <Radio
+                    title={_('Do not change')}
+                    value={NO_VALUE}
+                    checked={state.reschedule === NO_VALUE}
+                    convert={parseYesNo}
+                    name="reschedule"
+                    onChange={onValueChange}
+                  />
+                  <Radio
+                    title={_('Create Schedule')}
+                    value={YES_VALUE}
+                    checked={state.reschedule === YES_VALUE}
+                    convert={parseYesNo}
+                    name="reschedule"
+                    onChange={onValueChange}
+                  />
+                  <Datepicker
+                    name="start_date"
+                    timezone={state.start_timezone}
+                    value={state.start_date}
+                    onChange={onValueChange}
+                  />
+                  <Row>
+                    <span>{_('at')}</span>
+                    <Spinner
+                      type="int"
+                      min="0"
+                      max="23"
+                      name="start_hour"
+                      value={state.start_hour}
                       onChange={onValueChange}
                     />
-                  </FormGroup>
-                  <FormGroup offset="1">
-                    <Divider>
-                      <span>{_('at')}</span>
-                      <Spinner
-                        type="int"
-                        min="0"
-                        max="23"
-                        size="2"
-                        name="start_hour"
-                        value={state.start_hour}
-                        onChange={onValueChange}
-                      />
-                      <span>{_('h')}</span>
-                      <Spinner
-                        type="int"
-                        min="0"
-                        max="59"
-                        size="2"
-                        name="start_minute"
-                        value={state.start_minute}
-                        onChange={onValueChange}
-                        i
-                      />
-                      <span>{_('m')}</span>
-                    </Divider>
-                  </FormGroup>
-                  <FormGroup offset="1">
-                    <TimeZoneSelect
-                      name="start_timezone"
-                      value={state.start_timezone}
+                    <span>{_('h')}</span>
+                    <Spinner
+                      type="int"
+                      min="0"
+                      max="59"
+                      name="start_minute"
+                      value={state.start_minute}
                       onChange={onValueChange}
+                      i
                     />
-                  </FormGroup>
+                    <span>{_('m')}</span>
+                  </Row>
+                  <TimeZoneSelect
+                    name="start_timezone"
+                    value={state.start_timezone}
+                    onChange={onValueChange}
+                  />
                 </FormGroup>
               )}
 
             {capabilities.mayCreate('alert') &&
               capabilities.mayAccess('alerts') && (
-                <FormGroup title={_('Email report to')} titleSize="3">
+                <FormGroup title={_('Email report to')}>
                   <TextField
                     grow="1"
                     name="alert_email"
                     value={state.alert_email}
-                    size="30"
                     maxLength="80"
                     onChange={onValueChange}
                   />
                 </FormGroup>
               )}
-          </Layout>
+          </Column>
         </Layout>
       )}
     </SaveDialog>
@@ -215,7 +204,6 @@ const ModifyTaskWizard = ({
 
 ModifyTaskWizard.propTypes = {
   alert_email: PropTypes.string,
-  capabilities: PropTypes.capabilities.isRequired,
   reschedule: PropTypes.oneOf([NO_VALUE, YES_VALUE]),
   start_date: PropTypes.date,
   start_hour: PropTypes.number,
@@ -228,6 +216,6 @@ ModifyTaskWizard.propTypes = {
   onSave: PropTypes.func.isRequired,
 };
 
-export default withCapabilities(ModifyTaskWizard);
+export default ModifyTaskWizard;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/wizard/taskwizard.jsx b/src/web/wizard/taskwizard.jsx
index 776128e32b..253dcdec35 100644
--- a/src/web/wizard/taskwizard.jsx
+++ b/src/web/wizard/taskwizard.jsx
@@ -30,8 +30,8 @@ import TextField from 'web/components/form/textfield';
 import {default as WizIcon} from 'web/components/icon/wizardicon';
 import NewIcon from 'web/components/icon/newicon';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+import Column from 'web/components/layout/column';
+import Row from 'web/components/layout/row';
 
 export const WizardContent = styled.div`
   margin: 0 20px;
@@ -62,37 +62,35 @@ const TaskWizard = ({
     defaultValues={{hosts}}
   >
     {({values: state, onValueChange}) => (
-      <Layout>
+      <Row>
         <WizardIcon />
         <WizardContent>
-          <Divider flex="column">
+          <Column>
             <p>
               <b>{_('Quick start: Immediately scan an IP address')}</b>
             </p>
-            <Divider>
+            <Row>
               <span>{_('IP address or hostname:')}</span>
               <TextField
+                grow="1"
                 value={state.hosts}
                 name="hosts"
-                size="30"
                 maxLength="2000"
                 onChange={onValueChange}
               />
-            </Divider>
+            </Row>
             <div>
               {_(
                 'The default address is either your computer' +
                   ' or your network gateway.',
               )}
             </div>
-            <Layout flex="column">
-              {_('As a short-cut the following steps will be done for you:')}
-              <ol>
-                <li>{_('Create a new Target')}</li>
-                <li>{_('Create a new Task')}</li>
-                <li>{_('Start this scan task right away')}</li>
-              </ol>
-            </Layout>
+            {_('As a short-cut the following steps will be done for you:')}
+            <ol>
+              <li>{_('Create a new Target')}</li>
+              <li>{_('Create a new Task')}</li>
+              <li>{_('Start this scan task right away')}</li>
+            </ol>
             <p>
               {_(
                 'As soon as the scan progress is beyond 1%, you can already ' +
@@ -106,14 +104,14 @@ const TaskWizard = ({
                   ' as configured in "My Settings".',
               )}
             </p>
-            <Divider>
+            <Row>
               <span>{_('By clicking the New Task icon')}</span>
               <NewIcon title={_('New Task')} onClick={onNewClick} />
               <span>{_('you can create a new Task yourself.')}</span>
-            </Divider>
-          </Divider>
+            </Row>
+          </Column>
         </WizardContent>
-      </Layout>
+      </Row>
     )}
   </SaveDialog>
 );