From 2a87d100f9ef25c61d958e3d76288db5c078eb0c Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Wed, 24 Nov 2021 17:29:16 +0100
Subject: [PATCH] Migrate VM Details to PF4

Functional changes:
1. error handling on Create/Edit Disk modal is now handled via field
   level errors. Note that information about resizing disk was moved
   from tooltip to permanent helper text (as per PF4 guidelines)
2. New break-point for responsive resize was added for medium screens.
   PF4 uses bigger fonts so i.e. snapshot card was breaking during
   resizing
3. Overview card in edit mode does not show the OS icon - this saves
   space and prevents layout changes during editing i.e. when error
   message is shown.
---
 src/components/Grid/style.css                 |   4 +-
 src/components/VmDetails/BaseCard.js          |  47 ++-
 src/components/VmDetails/CardEditButton.js    |  14 +-
 .../DetailsCard/CloudInit/CloudInitForm.js    |  35 +--
 .../DetailsCard/CloudInit/SysprepForm.js      |  63 ++--
 .../VmDetails/cards/DetailsCard/FieldRow.js   |  25 +-
 .../VmDetails/cards/DetailsCard/index.js      |  58 ++--
 .../VmDetails/cards/DetailsCard/style.css     |  22 +-
 .../cards/DisksCard/DiskImageEditor.js        | 287 ++++++++----------
 .../VmDetails/cards/DisksCard/DiskListItem.js |  17 +-
 .../cards/DisksCard/DiskStateIcon.js          |  45 +--
 .../VmDetails/cards/DisksCard/index.js        |  11 +-
 .../VmDetails/cards/DisksCard/style.css       |  12 -
 .../VmDetails/cards/NicsCard/NicEditor.js     | 177 +++++------
 .../cards/NicsCard/NicLinkStateIcon.js        |  32 +-
 .../VmDetails/cards/NicsCard/NicListItem.js   |  14 +-
 .../VmDetails/cards/NicsCard/index.js         |   6 +-
 .../VmDetails/cards/OverviewCard/index.js     |  64 ++--
 .../VmDetails/cards/OverviewCard/style.css    |   1 +
 .../cards/SnapshotsCard/NewSnapshotModal.js   |  94 +++---
 .../cards/SnapshotsCard/SnapshotDetail.js     | 271 ++++++-----------
 .../cards/SnapshotsCard/SnapshotItem.js       |  58 ++--
 .../VmDetails/cards/SnapshotsCard/index.js    |   3 +-
 .../VmDetails/cards/SnapshotsCard/style.css   |  23 +-
 .../cards/UtilizationCard/CpuCharts.js        |  30 +-
 .../cards/UtilizationCard/DiskCharts.js       |  47 ++-
 .../cards/UtilizationCard/MemoryCharts.js     |  47 ++-
 .../cards/UtilizationCard/NetworkingCharts.js |  30 +-
 .../cards/UtilizationCard/NoHistoricData.js   |   4 +-
 .../cards/UtilizationCard/NoLiveData.js       |   4 +-
 .../UtilizationCard/UtilizationCardData.js    |  25 ++
 .../VmDetails/cards/UtilizationCard/style.css |  35 +++
 src/components/VmDetails/index.js             |  13 +-
 src/components/VmDetails/style.css            |  37 ++-
 34 files changed, 759 insertions(+), 896 deletions(-)
 create mode 100644 src/components/VmDetails/cards/UtilizationCard/UtilizationCardData.js

diff --git a/src/components/Grid/style.css b/src/components/Grid/style.css
index 37864c9fa..ea1857cd3 100644
--- a/src/components/Grid/style.css
+++ b/src/components/Grid/style.css
@@ -17,8 +17,8 @@
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 20px;
-  padding-left: 20px;
+  padding-right: 10px;
+  padding-left: 10px;
 
   flex: 1 1 0; /* grow shrink basis */
   max-width: 100%;
diff --git a/src/components/VmDetails/BaseCard.js b/src/components/VmDetails/BaseCard.js
index a4d9f3b0f..95c4c3458 100644
--- a/src/components/VmDetails/BaseCard.js
+++ b/src/components/VmDetails/BaseCard.js
@@ -4,18 +4,16 @@ import {
   Badge,
   Button,
   Card,
-  CardHeading,
+  CardHeader,
   CardTitle,
   CardBody,
   CardFooter,
-  Icon,
-  noop,
-  excludeKeys,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 
 import style from './style.css'
 import CardEditButton from './CardEditButton'
 import { Tooltip } from '_/components/tooltips'
+import { CheckIcon, TimesIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 /**
  * Base VM details card.  Support common layouts and view vs edit modes.
@@ -76,7 +74,7 @@ class BaseCard extends React.Component {
   }
 
   renderChildren (childProps) {
-    const children = this.props.children || noop
+    const children = this.props.children || (() => {})
     return typeof children === 'function'
       ? children(childProps)
       : React.isValidElement(children)
@@ -87,7 +85,7 @@ class BaseCard extends React.Component {
   render () {
     const {
       title = undefined,
-      icon = undefined,
+      icon: TheIcon = undefined,
       itemCount = undefined,
       editMode = undefined,
       editable = true,
@@ -101,13 +99,18 @@ class BaseCard extends React.Component {
     const editing = editMode === undefined ? this.state.edit : editMode
     const hasHeading = !!title
     const hasBadge = itemCount !== undefined
-    const hasIcon = icon && icon.type && icon.name
 
     const RenderChildren = this.renderChildren
     return (
-      <Card className={`${style['base-card']} ${className}`} id={`${idPrefix}-card`} {...excludeKeys(this.props, this.propTypeKeys)}>
+      <Card className={`${style['base-card']} ${className}`} id={`${idPrefix}-card` } isCompact>
         {hasHeading && (
-          <CardHeading className={style['base-card-heading']}>
+          <CardHeader className={style['base-card-heading']}>
+
+            <CardTitle>
+              {TheIcon && <TheIcon className={style['base-card-title-icon']} />}
+              {title}
+              {hasBadge && <Badge isRead>{itemCount}</Badge>}
+            </CardTitle>
             <CardEditButton
               tooltip={editTooltip}
               editable={editable}
@@ -117,12 +120,7 @@ class BaseCard extends React.Component {
               id={`${idPrefix}-button-edit`}
               placement={editTooltipPlacement}
             />
-            <CardTitle>
-              {hasIcon && <Icon type={icon.type} name={icon.name} className={style['base-card-title-icon']} />}
-              {title}
-              {hasBadge && <Badge className={style['base-card-item-count-badge']}>{itemCount}</Badge>}
-            </CardTitle>
-          </CardHeading>
+          </CardHeader>
         )}
 
         <CardBody className={style['base-card-body']}>
@@ -143,10 +141,8 @@ class BaseCard extends React.Component {
 
         {editing && (
           <CardFooter className={style['base-card-footer']}>
-            <Button disabled={disableSaveButton} bsStyle='primary' onClick={this.clickSave} id={`${idPrefix}-button-save`}>
-              <Icon type='fa' name='check' />
-            </Button>
-            <Button onClick={this.clickCancel} id={`${idPrefix}-button-cancel`}><Icon type='pf' name='close' /></Button>
+            <Button isDisabled={disableSaveButton} onClick={this.clickSave} id={`${idPrefix}-button-save`} icon={<CheckIcon />}/>
+            <Button onClick={this.clickCancel} id={`${idPrefix}-button-cancel`} icon={<TimesIcon />} variant='link'/>
           </CardFooter>
         )}
       </Card>
@@ -155,10 +151,7 @@ class BaseCard extends React.Component {
 }
 BaseCard.propTypes = {
   title: PropTypes.string,
-  icon: PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-  }),
+  icon: PropTypes.any,
   itemCount: PropTypes.number,
   idPrefix: PropTypes.string,
   className: PropTypes.string,
@@ -176,9 +169,9 @@ BaseCard.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
 }
 BaseCard.defaultProps = {
-  onStartEdit: noop,
-  onCancel: noop,
-  onSave: noop,
+  onStartEdit: () => {},
+  onCancel: () => {},
+  onSave: () => {},
 }
 
 export default BaseCard
diff --git a/src/components/VmDetails/CardEditButton.js b/src/components/VmDetails/CardEditButton.js
index 4207c5919..eb63e00e4 100644
--- a/src/components/VmDetails/CardEditButton.js
+++ b/src/components/VmDetails/CardEditButton.js
@@ -1,9 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  Icon,
-  noop,
-} from 'patternfly-react'
+
+import { PencilAltIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 import style from './style.css'
 
@@ -42,7 +40,7 @@ class CardEditButton extends React.Component {
     const { editEnabled } = this.state
 
     const classes = `${style['card-edit-button']} ${style[editEnabled ? 'card-edit-button-enabled' : 'card-edit-button-disabled']}`
-    const myClick = editEnabled ? noop : this.enableEditHandler
+    const myClick = editEnabled ? () => {} : this.enableEditHandler
 
     if (!editable && disableTooltip) {
       return (
@@ -52,7 +50,7 @@ class CardEditButton extends React.Component {
           id={`${id}-card-edit-button-tooltip`}
         >
           <a className={`${style['card-edit-button']} ${style['card-edit-button-disabled']}`} id={id}>
-            <Icon type='pf' name='edit' />
+            <PencilAltIcon/>
           </a>
         </Tooltip>
       )
@@ -64,7 +62,7 @@ class CardEditButton extends React.Component {
     return (
       <Tooltip id={`${id}-tooltip`} tooltip={tooltip} placement={placement}>
         <a id={id} className={classes} onClick={(e) => { e.preventDefault(); myClick() }}>
-          <Icon type='pf' name='edit' />
+          <PencilAltIcon/>
         </a>
       </Tooltip>
     )
@@ -82,7 +80,7 @@ CardEditButton.propTypes = {
 CardEditButton.defaultProps = {
   tooltip: '',
   editEnabled: false,
-  onClick: noop,
+  onClick: () => {},
 }
 
 export default CardEditButton
diff --git a/src/components/VmDetails/cards/DetailsCard/CloudInit/CloudInitForm.js b/src/components/VmDetails/cards/DetailsCard/CloudInit/CloudInitForm.js
index c5a6d7355..745386636 100644
--- a/src/components/VmDetails/cards/DetailsCard/CloudInit/CloudInitForm.js
+++ b/src/components/VmDetails/cards/DetailsCard/CloudInit/CloudInitForm.js
@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
-  FormControl,
-  ControlLabel,
   FormGroup,
-} from 'patternfly-react'
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core'
 import { MsgContext } from '_/intl'
 
 const CloudInitForm = ({ idPrefix, vm, onChange }) => {
@@ -13,24 +13,25 @@ const CloudInitForm = ({ idPrefix, vm, onChange }) => {
   const cloudInitSshAuthorizedKeys = vm.getIn(['cloudInit', 'sshAuthorizedKeys'])
   return (
     <>
-      <FormGroup controlId={`${idPrefix}-cloud-init-hostname`}>
-        <ControlLabel>
-          {msg.hostName()}
-        </ControlLabel>
-        <FormControl
-          type='text'
+      <FormGroup
+        label={msg.hostName()}
+        fieldId={`${idPrefix}-cloud-init-hostname`}
+      >
+        <TextInput
+          id={`${idPrefix}-cloud-init-hostname`}
+          type="text"
           value={cloudInitHostName}
-          onChange={e => onChange('cloudInitHostName', e.target.value)}
+          onChange={value => onChange('cloudInitHostName', value)}
         />
       </FormGroup>
-      <FormGroup controlId={`${idPrefix}-cloud-init-ssh`}>
-        <ControlLabel>
-          {msg.sshAuthorizedKeys()}
-        </ControlLabel>
-        <FormControl
-          componentClass='textarea'
+      <FormGroup
+        label={msg.sshAuthorizedKeys()}
+        fieldId={`${idPrefix}-cloud-init-ssh`}
+      >
+        <TextArea
+          id={`${idPrefix}-cloud-init-ssh`}
           value={cloudInitSshAuthorizedKeys}
-          onChange={e => onChange('cloudInitSshAuthorizedKeys', e.target.value)}
+          onChange={value => onChange('cloudInitSshAuthorizedKeys', value)}
         />
       </FormGroup>
     </>
diff --git a/src/components/VmDetails/cards/DetailsCard/CloudInit/SysprepForm.js b/src/components/VmDetails/cards/DetailsCard/CloudInit/SysprepForm.js
index d307d64de..b682b978d 100644
--- a/src/components/VmDetails/cards/DetailsCard/CloudInit/SysprepForm.js
+++ b/src/components/VmDetails/cards/DetailsCard/CloudInit/SysprepForm.js
@@ -2,10 +2,10 @@ import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
   Checkbox,
-  ControlLabel,
-  FormControl,
   FormGroup,
-} from 'patternfly-react'
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core'
 import { MsgContext } from '_/intl'
 import SelectBox from '../../../../SelectBox'
 import timezones from '_/components/utils/timezones.json'
@@ -19,40 +19,41 @@ const SysprepForm = ({ idPrefix, vm, onChange, lastInitTimezone }) => {
 
   return (
     <>
-      <FormGroup controlId={`${idPrefix}-cloud-init-hostname`}>
-        <ControlLabel>
-          {msg.hostName()}
-        </ControlLabel>
-        <FormControl
+      <FormGroup
+        label={msg.hostName()}
+        fieldId={`${idPrefix}-sysprep-hostname`}
+      >
+        <TextInput
+          id={`${idPrefix}-sysprep-hostname`}
           type='text'
           value={cloudInitHostName}
-          onChange={e => onChange('cloudInitHostName', e.target.value)}
+          onChange={value => onChange('cloudInitHostName', value)}
         />
       </FormGroup>
-      <FormGroup controlId={`${idPrefix}-cloud-init-hostname`}>
-        <ControlLabel>
-          {msg.password()}
-        </ControlLabel>
-        <FormControl
+      <FormGroup
+        label={msg.password()}
+        fieldId={`${idPrefix}-sysprep-password`}
+      >
+        <TextInput
+          id={`${idPrefix}-sysprep-password`}
           type='password'
           value={cloudInitPassword}
-          onChange={e => onChange('cloudInitPassword', e.target.value)}
+          onChange={value => onChange('cloudInitPassword', value)}
         />
       </FormGroup>
 
       {/*  Configure Timezone checkbox */}
       <Checkbox
         id={`${idPrefix}-sysprep-timezone-config`}
-        checked={enableInitTimezone}
-        onChange={e => onChange('enableInitTimezone', e.target.checked)}
-      >
-        {msg.sysPrepTimezoneConfigure()}
-      </Checkbox>
+        label={msg.sysPrepTimezoneConfigure()}
+        isChecked={enableInitTimezone}
+        onChange={checked => onChange('enableInitTimezone', checked)}
+      />
 
-      <FormGroup controlId={`${idPrefix}-cloud-init-timezone`}>
-        <ControlLabel>
-          {msg.timezone()}
-        </ControlLabel>
+      <FormGroup
+        label={msg.timezone()}
+        fieldId={`${idPrefix}-sysprep-timezone-select`}
+      >
         <SelectBox
           id={`${idPrefix}-sysprep-timezone-select`}
           items={timezones}
@@ -61,14 +62,14 @@ const SysprepForm = ({ idPrefix, vm, onChange, lastInitTimezone }) => {
           disabled={!enableInitTimezone}
         />
       </FormGroup>
-      <FormGroup controlId={`${idPrefix}-sysprep-custom-script`}>
-        <ControlLabel>
-          {msg.customScript()}
-        </ControlLabel>
-        <FormControl
-          componentClass='textarea'
+      <FormGroup
+        label={msg.customScript()}
+        fieldId={`${idPrefix}-sysprep-custom-script`}
+      >
+        <TextArea
+          id={`${idPrefix}-sysprep-custom-script`}
           value={cloudInitCustomScript}
-          onChange={e => onChange('cloudInitCustomScript', e.target.value)}
+          onChange={value => onChange('cloudInitCustomScript', value)}
         />
       </FormGroup>
     </>
diff --git a/src/components/VmDetails/cards/DetailsCard/FieldRow.js b/src/components/VmDetails/cards/DetailsCard/FieldRow.js
index a04bf3dee..968a2055a 100644
--- a/src/components/VmDetails/cards/DetailsCard/FieldRow.js
+++ b/src/components/VmDetails/cards/DetailsCard/FieldRow.js
@@ -3,19 +3,16 @@ import PropTypes from 'prop-types'
 
 import { Col } from '_/components/Grid'
 import { InfoTooltip, Tooltip } from '_/components/tooltips'
-import { FormGroup, ControlLabel } from 'patternfly-react'
+import { FormGroup } from '@patternfly/react-core'
 import classnames from 'classnames'
 
 import style from './style.css'
 import gridStyle from '_/components/Grid/style.css'
 
-const FieldRow = ({ label, children, id, tooltip, tooltipPosition, validationState = null }) => (
-  <FormGroup
-    className={classnames(gridStyle['grid-row'], style['field-row'])}
-    validationState={validationState}
-  >
+const FieldRow = ({ label, children, id, tooltip, tooltipPosition, validationState = 'default', useFormGroup }) => (
+  <div className={classnames(gridStyle['grid-row'], style['field-row'])}>
     <Col cols={5} className={style['col-label']}>
-      <ControlLabel>{label}</ControlLabel>
+      {label}
       {tooltip && (
         <span className={style.tooltip}>
           <InfoTooltip
@@ -26,8 +23,15 @@ const FieldRow = ({ label, children, id, tooltip, tooltipPosition, validationSta
         </span>
       )}
     </Col>
-    <Col cols={7} className={style['col-data']} id={id}>{children}</Col>
-  </FormGroup>
+    <Col cols={7} className={style['col-data']} id={id}>
+      {useFormGroup && (
+        <FormGroup validated={validationState}>
+          {children}
+        </FormGroup>
+      )}
+      {!useFormGroup && children}
+    </Col>
+  </div>
 )
 FieldRow.propTypes = {
   id: PropTypes.string.isRequired,
@@ -35,7 +39,8 @@ FieldRow.propTypes = {
   tooltip: PropTypes.oneOfType([Tooltip.propTypes.tooltip]),
   children: PropTypes.node.isRequired,
   tooltipPosition: Tooltip.propTypes.placement,
-  validationState: FormGroup.propTypes.validationState,
+  validationState: PropTypes.oneOf(['success', 'warning', 'error', 'default']),
+  useFormGroup: PropTypes.bool,
 }
 
 export default FieldRow
diff --git a/src/components/VmDetails/cards/DetailsCard/index.js b/src/components/VmDetails/cards/DetailsCard/index.js
index 0cc19fd4d..78401cd89 100644
--- a/src/components/VmDetails/cards/DetailsCard/index.js
+++ b/src/components/VmDetails/cards/DetailsCard/index.js
@@ -34,12 +34,13 @@ import {
 } from '_/components/utils'
 
 import {
-  ExpandCollapse,
-  FormControl,
-  Icon,
-} from 'patternfly-react'
+  Alert,
+  ExpandableSection,
+  NumberInput,
+  Switch,
+} from '@patternfly/react-core'
 
-import { Switch, Alert } from '@patternfly/react-core'
+import { OffIcon, OnIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 import SelectBox from '_/components/SelectBox'
 import BaseCard from '../../BaseCard'
@@ -804,13 +805,13 @@ class DetailsCard extends React.Component {
                     <Col className={style['fields-column']}>
                       <Grid>
                         { isAdmin && (
-                          <FieldRow label={msg.host()} id={`${idPrefix}-host`}>
+                          <FieldRow label={msg.host()} id={`${idPrefix}-host`} useFormGroup={false}>
                             {
                               <EllipsisValue tooltip={hostName}>{hostName}</EllipsisValue> || <NotAvailable tooltip={msg.notAvailableUntilRunning()} id={`${idPrefix}-host-not-available`} />
                             }
                           </FieldRow>
                         )}
-                        <FieldRow label={msg.ipAddress()} id={`${idPrefix}-ip`} >
+                        <FieldRow label={msg.ipAddress()} id={`${idPrefix}-ip`} useFormGroup={false} >
                           <>
                             { ip4Addresses.length === 0 && ip6Addresses.length === 0 && (
                               <NotAvailable tooltip={msg.notAvailableUntilRunningAndGuestAgent()} id={`${idPrefix}-ip-not-available`} />
@@ -827,7 +828,7 @@ class DetailsCard extends React.Component {
                             ))}
                           </>
                         </FieldRow>
-                        <FieldRow label={msg.fqdn()} id={`${idPrefix}-fqdn`}>
+                        <FieldRow label={msg.fqdn()} id={`${idPrefix}-fqdn`} useFormGroup={false}>
                           { <EllipsisValue tooltip={fqdn}>{fqdn}</EllipsisValue> || <NotAvailable tooltip={msg.notAvailableUntilRunningAndGuestAgent()} id={`${idPrefix}-fqdn-not-available`} /> }
                         </FieldRow>
                         <FieldRow label={msg.cluster()} id={`${idPrefix}-cluster`} tooltip={isFullEdit && !canChangeCluster && msg.clusterCanOnlyChangeWhenVmStopped()} >
@@ -856,7 +857,12 @@ class DetailsCard extends React.Component {
                         <FieldRow label={msg.template()} id={`${idPrefix}-template`}>
                           { templateName }
                         </FieldRow>
-                        <FieldRow label={msg.cd()} id={`${idPrefix}-cdrom`} tooltip={isEditing && !canChangeCd && msg.cdCanOnlyChangeWhenVmRunning()} >
+                        <FieldRow
+                          label={msg.cd()}
+                          id={`${idPrefix}-cdrom`}
+                          tooltip={isEditing && !canChangeCd && msg.cdCanOnlyChangeWhenVmRunning()}
+                          useFormGroup={isEditing && canChangeCd}
+                        >
                           { !isEditing && <EllipsisValue tooltip={cdImageName}>{cdImageName}</EllipsisValue> }
                           { isEditing && !canChangeCd && (
                             <div>
@@ -880,13 +886,13 @@ class DetailsCard extends React.Component {
                         </FieldRow>
                         <FieldRow label={isOsWindows ? msg.sysprep() : msg.cloudInit()} id={`${idPrefix}-cloud-init`}>
                           <div className={style['cloud-init-field']}>
-                            {cloudInitEnabled ? <Icon type='pf' name='on' /> : <Icon type='pf' name='off' />}
+                            {cloudInitEnabled ? <OnIcon/> : <OffIcon/>}
                             {enumMsg('Switch', cloudInitEnabled ? 'on' : 'off', msg)}
                           </div>
                         </FieldRow>
                         <FieldRow label={msg.bootMenu()} id={`${idPrefix}-boot-menu-readonly`}>
                           <div className={style['boot-menu-field']}>
-                            {bootMenuEnabled ? <Icon type='pf' name='on' /> : <Icon type='pf' name='off' />}
+                            {bootMenuEnabled ? <OnIcon/> : <OffIcon/>}
                             {enumMsg('Switch', bootMenuEnabled ? 'on' : 'off', msg)}
                           </div>
                         </FieldRow>
@@ -913,14 +919,15 @@ class DetailsCard extends React.Component {
                           { !isFullEdit && vCpuCount }
                           { isFullEdit && (
                             <div>
-                              <FormControl
+                              <NumberInput
                                 id={`${idPrefix}-cpus-edit`}
-                                className={style['cpu-input']}
-                                type='number'
                                 min={1}
                                 max={MAX_VM_VCPU_EDIT}
                                 value={vCpuCount}
+                                widthChars={5}
                                 onChange={e => this.handleChange('cpu', e.target.value)}
+                                onPlus={() => this.handleChange('cpu', vCpuCount + 1)}
+                                onMinus={() => this.handleChange('cpu', vCpuCount - 1)}
                               />
                               { !vCpuCountIsValid && (
                                 <div className={style['cpu-input-error']}>
@@ -938,16 +945,15 @@ class DetailsCard extends React.Component {
                         <FieldRow label={msg.memory()} id={`${idPrefix}-memory`}>
                           { !isFullEdit && `${userFormatOfBytes(memorySize).str}` }
                           { isFullEdit && (
-                            <div>
-                              <FormControl
-                                id={`${idPrefix}-memory-edit`}
-                                className={style['memory-input']}
-                                type='number'
-                                value={(memorySize / (1024 ** 2))}
-                                onChange={e => this.handleChange('memory', e.target.value)}
-                              />
-                              MiB
-                            </div>
+                            <NumberInput
+                              id={`${idPrefix}-memory-edit`}
+                              value={(memorySize / (1024 ** 2))}
+                              onChange={e => this.handleChange('memory', e.target.value)}
+                              unit='MiB'
+                              widthChars={5}
+                              onPlus={() => this.handleChange('memory', (memorySize / (1024 ** 2)) + 1)}
+                              onMinus={() => this.handleChange('memory', (memorySize / (1024 ** 2)) - 1)}
+                            />
                           )}
                         </FieldRow>
                       </Grid>
@@ -957,7 +963,7 @@ class DetailsCard extends React.Component {
 
                 {/* Advanced options */}
                 { isFullEdit && (
-                  <ExpandCollapse id={`${idPrefix}-advanced-options`} textCollapsed={msg.advancedOptions()} textExpanded={msg.advancedOptions()}>
+                  <ExpandableSection id={`${idPrefix}-advanced-options`} toggleText={msg.advancedOptions()}>
                     <Grid className={style['details-container']}>
                       <Row>
                         {/* First column */}
@@ -1089,7 +1095,7 @@ class DetailsCard extends React.Component {
                         </Col>
                       </Row>
                     </Grid>
-                  </ExpandCollapse>
+                  </ExpandableSection>
                 ) }
 
                 { correlatedMessages && correlatedMessages.size > 0 && correlatedMessages.map((message, key) => (
diff --git a/src/components/VmDetails/cards/DetailsCard/style.css b/src/components/VmDetails/cards/DetailsCard/style.css
index f7fd69242..d73d37d21 100644
--- a/src/components/VmDetails/cards/DetailsCard/style.css
+++ b/src/components/VmDetails/cards/DetailsCard/style.css
@@ -17,8 +17,8 @@
   margin-top: 5px;
 }
 
-.field-row:global(.form-group) {
-  margin-bottom: 0;
+.field-row .col-label {
+  font-weight: 600;
 }
 
 .field-row-divide {
@@ -39,11 +39,6 @@
   vertical-align: top;
 }
 
-.col-label :global(.control-label) {
-  margin-bottom: 0;
-  vertical-align: top;
-}
-
 .col-label .tooltip {
   flex-grow: 0;
 }
@@ -59,8 +54,8 @@
 /*
  * For cloud-init and boot-menu on/off icons
  */
-.cloud-init-field > span:global(.pficon),
-.boot-menu-field > span:global(.pficon) {
+.cloud-init-field > svg,
+.boot-menu-field > svg {
   margin-right: 5px;
 }
 
@@ -76,15 +71,6 @@
   margin-top: 3px;
 }
 
-.memory-input {
-  width: 40%;
-  margin-right: 5px;
-  display: inline-block;
-}
-
-button.field-level-help:global(.popover-pf-info) {
-  flex-grow: 0;
-}
 
 /**
  * CPU tooltip list
diff --git a/src/components/VmDetails/cards/DisksCard/DiskImageEditor.js b/src/components/VmDetails/cards/DisksCard/DiskImageEditor.js
index 93c03cde1..519f24c16 100644
--- a/src/components/VmDetails/cards/DisksCard/DiskImageEditor.js
+++ b/src/components/VmDetails/cards/DisksCard/DiskImageEditor.js
@@ -7,23 +7,22 @@ import { createDiskTypeList, createStorageDomainList, isDiskNameValid } from '_/
 import { withMsg } from '_/intl'
 
 import {
+  Button,
   Checkbox,
-  Col,
-  ControlLabel,
   Form,
-  FormControl,
   FormGroup,
-  HelpBlock,
-} from 'patternfly-react'
-import {
-  Alert,
-  Button,
+  FormSelect,
+  FormSelectOption,
+  HelperText,
+  HelperTextItem,
   Modal,
   ModalVariant,
+  NumberInput,
+  TextInput,
 } from '@patternfly/react-core'
-import SelectBox from '_/components/SelectBox'
 import style from './style.css'
-import { Tooltip, InfoTooltip } from '_/components/tooltips'
+import { InfoTooltip } from '_/components/tooltips'
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const DISK_DEFAULTS = {
   bootable: false,
@@ -31,17 +30,6 @@ const DISK_DEFAULTS = {
   provisionedSize: 1 * 1024 ** 3,
 }
 
-const LabelCol = ({ children, ...props }) => {
-  return (
-    <Col componentClass={ControlLabel} {...props}>
-      { children }
-    </Col>
-  )
-}
-LabelCol.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
 /**
  * Collect required information required to create a new or edit an existing Disk Image
  * for a VM.
@@ -255,7 +243,7 @@ class DiskImageEditor extends Component {
     this.close()
   }
 
-  changeAlias ({ target: { value } }) {
+  changeAlias (value) {
     this.setState(
       (state) => ({ values: { ...state.values, alias: value }, errors: { ...state.errors, alias: '' } }),
       () => {
@@ -264,16 +252,14 @@ class DiskImageEditor extends Component {
     this.changesMade = true
   }
 
-  changeSize ({ target: { value } }) {
+  changeSize (value) {
     if (isNumber(value) && value >= 0) {
       this.setState((state) => ({ values: { ...state.values, size: value } }))
       this.changesMade = true
     }
   }
 
-  changeBootable (event) {
-    const target = event.target
-    const bootable = target.type === 'checkbox' ? target.checked : target.value
+  changeBootable (bootable) {
     this.setState((state) => ({ values: { ...state.values, bootable } }))
     this.changesMade = true
   }
@@ -336,7 +322,7 @@ class DiskImageEditor extends Component {
               key='ok'
               variant='primary'
               onClick={this.handleSave}
-              disabled={!this.isFormValid()}
+              isDisabled={!this.isFormValid()}
             >
               { msg.ok() }
             </Button>,
@@ -351,79 +337,62 @@ class DiskImageEditor extends Component {
           ]}
         >
           <Form
-            horizontal
-            onSubmit={e => { e.preventDefault() }}
+            isHorizontal
             id={`${idPrefix}-modal-form`}
           >
             {/* Alias */}
-            <FormGroup controlId={`${idPrefix}-alias`} validationState={this.state.errors.alias ? 'error' : null}>
-              <LabelCol sm={3}>
-                { msg.diskEditorAliasLabel() }
-              </LabelCol>
-              <Col sm={9}>
-                <FormControl
-                  type='text'
-                  defaultValue={this.state.values.alias}
-                  onChange={this.changeAlias}
-                />
-                {this.state.errors.alias && <HelpBlock>{this.state.errors.alias}</HelpBlock>}
-              </Col>
+            <FormGroup
+              label={ msg.diskEditorAliasLabel() }
+              fieldId={`${idPrefix}-alias`}
+              validated={this.state.errors.alias ? 'error' : null}
+              helperTextInvalid={this.state.errors.alias}
+              helperTextInvalidIcon={<ExclamationCircleIcon />}
+            >
+              <TextInput
+                id={`${idPrefix}-alias`}
+                type='text'
+                defaultValue={this.state.values.alias}
+                onChange={this.changeAlias}
+              />
             </FormGroup>
 
             {/* Size Display (for edit mode) */}
             { !createMode && (
-              <FormGroup controlId={`${idPrefix}-size`}>
-                <LabelCol sm={3}>
-                  { msg.diskEditorSizeEditLabel() }
-                  { !isImage &&
-                    <InfoTooltip id={`${idPrefix}-size-tooltip`} tooltip={msg.diskEditorSizeCantChangeHelp()} />
-                }
-                </LabelCol>
-                <Col sm={9}>
-                  <div id={`${idPrefix}-size`} className={style['editor-field-read-only']}>
-                    { diskSize / 1024 ** 3 }
-                  </div>
-                </Col>
+              <FormGroup
+                label={ msg.diskEditorSizeEditLabel() }
+                labelIcon={!isImage &&
+                  <InfoTooltip id={`${idPrefix}-size-tooltip`} tooltip={msg.diskEditorSizeCantChangeHelp()} />}
+                fieldId={`${idPrefix}-size`}
+              >
+                <div id={`${idPrefix}-size`} className={style['editor-field-read-only']}>
+                  { diskSize / 1024 ** 3 }
+                </div>
               </FormGroup>
             )}
 
             {/* Size Editor (initial size for create, expand by size for edit) */}
             { (createMode || isImage) && (
-              <FormGroup controlId={`${idPrefix}-size-edit`}>
-                <LabelCol sm={3}>
-                  { createMode && (
-                    <>
-                      {msg.diskEditorSizeLabel()}
-                      <InfoTooltip id={`${idPrefix}-size-edit-tooltip`} tooltip={msg.diskEditorSizeCreateInfoTooltip()} />
-                    </>
-                  )}
-                  { !createMode && msg.diskEditorResizeLabel() }
-                </LabelCol>
-                <Col sm={2}>
-                  { createMode && (
-                    <FormControl
-                      type='number'
-                      value={this.state.values.size}
-                      onChange={this.changeSize}
-                    />
-                  )}
-                  { !createMode && (
-                    <Tooltip id={`${idPrefix}-form-tooltip`} tooltip={msg.diskEditorResizeNote()} placement='right'>
-                      <FormControl
-                        type='number'
-                        value={this.state.values.size}
-                        onChange={this.changeSize}
-                      />
-                    </Tooltip>
-                  )}
-                </Col>
+              <FormGroup
+                label={createMode ? msg.diskEditorSizeLabel() : msg.diskEditorResizeLabel()}
+                labelIcon={createMode && <InfoTooltip id={`${idPrefix}-size-edit-tooltip`} tooltip={msg.diskEditorSizeCreateInfoTooltip()} />}
+                fieldId={`${idPrefix}-size-edit`}
+                helperText={!createMode && msg.diskEditorResizeNote()}
+              >
+                <NumberInput
+                  id={`${idPrefix}-size-edit`}
+                  value={this.state.values.size}
+                  onChange={({ target: { value } }) => this.changeSize(value)}
+                  onMinus={() => this.changeSize(this.state.values.size - 1)}
+                  onPlus={() => this.changeSize(this.state.values.size + 1)}
+                  min={0}
+                />
               </FormGroup>
             )}
 
             {/* Storage Domain */}
-            <FormGroup controlId={`${idPrefix}-storage-domain`}>
-              <LabelCol sm={3}>
-                { msg.diskEditorStorageDomainLabel() }
+            <FormGroup
+              label={ msg.diskEditorStorageDomainLabel() }
+              labelIcon={(
                 <InfoTooltip
                   id={`${idPrefix}-storage-domain-edit-tooltip`}
                   tooltip={
@@ -432,36 +401,39 @@ class DiskImageEditor extends Component {
                       : msg.diskEditorStorageDomainCantChangeHelp()
                   }
                 />
-              </LabelCol>
-              <Col sm={9}>
-                { createMode && (
-                  <SelectBox
-                    id={`${idPrefix}-storage-domain`}
-                    items={this.state.storageDomainSelectList}
-                    selected={this.state.values.storageDomain}
-                    onChange={this.changeStorageDomain}
-                  />
-                )}
-                { !createMode && !isDirectLUN && (
-                  <div id={`${idPrefix}-storage-domain`} className={style['editor-field-read-only']}>
-                    {
+              )}
+              fieldId={`${idPrefix}-storage-domain`}
+            >
+              { createMode && !isDirectLUN && (
+                <FormSelect
+                  id={`${idPrefix}-storage-domain`}
+                  value={this.state.values.storageDomain}
+                  onChange={this.changeStorageDomain}
+                >
+                  {this.state.storageDomainSelectList.map((option, index) => (
+                    <FormSelectOption key={index} value={option.id} label={option.value} />
+                  ))}
+                </FormSelect>
+              )}
+              { !createMode && !isDirectLUN && (
+                <div id={`${idPrefix}-storage-domain`} className={style['editor-field-read-only']}>
+                  {
                       this.props.storageDomains.getIn([this.state.values.storageDomain, 'name']) ||
                       msg.diskEditorStorageDomainNotAvailable()
                     }
-                  </div>
-                )}
-                { isDirectLUN && (
-                  <div id={`${idPrefix}-storage-domain`} className={style['editor-field-read-only']}>
-                    { msg.diskEditorStorageDomainNotAvailable() }
-                  </div>
-                )}
-              </Col>
+                </div>
+              )}
+              { isDirectLUN && (
+                <div id={`${idPrefix}-storage-domain`} className={style['editor-field-read-only']}>
+                  { msg.diskEditorStorageDomainNotAvailable() }
+                </div>
+              )}
             </FormGroup>
 
             {/* Disk Type (thin vs preallocated) */}
-            <FormGroup controlId={`${idPrefix}-format`}>
-              <LabelCol sm={3}>
-                { msg.diskEditorDiskTypeLabel() }
+            <FormGroup
+              label={ msg.diskEditorDiskTypeLabel() }
+              labelIcon={(
                 <InfoTooltip
                   id={`${idPrefix}-format-tooltip`}
                   tooltip={
@@ -470,63 +442,58 @@ class DiskImageEditor extends Component {
                       : msg.diskEditorDiskTypeCantChangeHelp()
                   }
                 />
-              </LabelCol>
-              <Col sm={9}>
-                { createMode && (
-                  <SelectBox
-                    id={`${idPrefix}-format`}
-                    items={DISK_TYPES}
-                    selected={this.state.values.diskType}
-                    onChange={this.changeDiskType}
-                  />
-                )}
-                { !createMode && !isDirectLUN && (
-                  <div id={`${idPrefix}-format`} className={style['editor-field-read-only']}>
-                    { this.state.values.diskType === 'pre' && msg.diskEditorDiskTypeOptionPre() }
-                    { this.state.values.diskType === 'thin' && msg.diskEditorDiskTypeOptionThin() }
-                  </div>
-                )}
-                { isDirectLUN && (
-                  <div id={`${idPrefix}-format`} className={style['editor-field-read-only']}>
-                    { msg.diskEditorDiskTypeNotAvailable() }
-                  </div>
-                )}
-              </Col>
+              )}
+              fieldId={`${idPrefix}-format`}
+            >
+              { createMode && !isDirectLUN && (
+                <FormSelect
+                  id={`${idPrefix}-format`}
+                  value={this.state.values.diskType}
+                  onChange={this.changeDiskType}
+                >
+                  {DISK_TYPES.map((option, index) => (
+                    <FormSelectOption key={index} value={option.id} label={option.value} />
+                  ))}
+                </FormSelect>
+              )}
+              { !createMode && !isDirectLUN && (
+                <div id={`${idPrefix}-format`} className={style['editor-field-read-only']}>
+                  { this.state.values.diskType === 'pre' && msg.diskEditorDiskTypeOptionPre() }
+                  { this.state.values.diskType === 'thin' && msg.diskEditorDiskTypeOptionThin() }
+                </div>
+              )}
+              { isDirectLUN && (
+                <div id={`${idPrefix}-format`} className={style['editor-field-read-only']}>
+                  { msg.diskEditorDiskTypeNotAvailable() }
+                </div>
+              )}
             </FormGroup>
 
             {/* Disk Bootable */}
-            <FormGroup controlId={`${idPrefix}-bootable`}>
-              <LabelCol sm={3}>
-                { msg.diskEditorBootableLabel() }
-                {!vmIsDown && (
-                  <InfoTooltip
-                    id={`${idPrefix}-bootable-edit-tooltip`}
-                    tooltip={msg.bootableEditTooltip()}
-                  />
-                )}
-              </LabelCol>
-              <Col sm={9}>
-                <Checkbox
-                  checked={this.state.values.bootable}
-                  onChange={this.changeBootable}
-                  id={`${idPrefix}-bootable`}
-                  disabled={!vmIsDown}
+            <FormGroup
+              label={ msg.diskEditorBootableLabel() }
+              labelIcon={!vmIsDown && (
+                <InfoTooltip
+                  id={`${idPrefix}-bootable-edit-tooltip`}
+                  tooltip={msg.bootableEditTooltip()}
                 />
-              </Col>
+              )}
+              fieldId={`${idPrefix}-bootable`}
+              helperText={showBootableChangeAlert && (
+                <HelperText>
+                  <HelperTextItem variant="warning" hasIcon>
+                    {msg.diskEditorBootableChangeMessage({ diskName: currentBootableDisk.get('name') }) }
+                  </HelperTextItem>
+                </HelperText>
+              )}
+            >
+              <Checkbox
+                isChecked={this.state.values.bootable}
+                onChange={this.changeBootable}
+                id={`${idPrefix}-bootable`}
+                isDisabled={!vmIsDown}
+              />
             </FormGroup>
-            { showBootableChangeAlert && (
-              <FormGroup controlId={`${idPrefix}-bootable`} className={style['editor-bootable-alert-container']}>
-                <Col sm={3} />
-                <Col sm={9}>
-                  <Alert
-                    className={style['editor-bootable-alert']}
-                    isInline
-                    variant='warning'
-                    title={msg.diskEditorBootableChangeMessage({ diskName: currentBootableDisk.get('name') })}
-                  />
-                </Col>
-              </FormGroup>
-            )}
           </Form>
         </Modal>
       </>
diff --git a/src/components/VmDetails/cards/DisksCard/DiskListItem.js b/src/components/VmDetails/cards/DisksCard/DiskListItem.js
index a48fc6e2b..4ee0623ab 100644
--- a/src/components/VmDetails/cards/DisksCard/DiskListItem.js
+++ b/src/components/VmDetails/cards/DisksCard/DiskListItem.js
@@ -10,11 +10,12 @@ import { escapeHtml } from '../../../utils'
 import itemStyle from '../../itemListStyle.css'
 import style from './style.css'
 
-import { Icon, Label } from 'patternfly-react'
+import { Label } from '@patternfly/react-core'
 import DeleteConfirmationModal from '../../../VmModals/DeleteConfirmationModal'
 import DiskStateIcon from './DiskStateIcon'
 import DiskImageEditor from './DiskImageEditor'
 import { Tooltip } from '_/components/tooltips'
+import { PencilAltIcon, TrashIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 function isDiskBeingDeleted (diskId, pendingTasks) {
   return !!pendingTasks.find(
@@ -78,7 +79,7 @@ const DiskListItem = ({
           ({view.size.value} {view.size.unit})
         </span>
         { view.bootable && (
-          <Label id={`${idPrefix}-bootable`} className={style['disk-label']} bsStyle='info'>
+          <Label id={`${idPrefix}-bootable`} className={style['disk-label']} color="blue">
             { msg.diskLabelBootable() }
           </Label>
         )}
@@ -97,7 +98,7 @@ const DiskListItem = ({
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-action-edit-tooltip`} tooltip={msg.diskEditTooltip()}>
                   <a id={`${idPrefix}-action-edit`} className={itemStyle['item-action']} onClick={onClick} >
-                    <Icon type='pf' name='edit' />
+                    <PencilAltIcon/>
                   </a>
                 </Tooltip>
               )}
@@ -105,9 +106,7 @@ const DiskListItem = ({
           )}
           { !canEdit && (
             <Tooltip id={`${idPrefix}-action-edit-tooltip-disabled`} tooltip={msg.diskEditDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='edit'
+              <PencilAltIcon
                 id={`${idPrefix}-action-edit-disabled`}
                 className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
               />
@@ -122,7 +121,7 @@ const DiskListItem = ({
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-action-delete-tooltip`} tooltip={msg.diskDeleteTooltip()}>
                   <a id={`${idPrefix}-action-delete`} className={itemStyle['item-action']} onClick={onClick}>
-                    <Icon type='pf' name='delete' />
+                    <TrashIcon style={{ color: 'red' }}/>
                   </a>
                 </Tooltip>
               )}
@@ -139,9 +138,7 @@ const DiskListItem = ({
           )}
           { !canDelete && (
             <Tooltip id={`${idPrefix}-action-delete-tooltip-disabled`} tooltip={msg.diskDeleteDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='delete'
+              <TrashIcon
                 id={`${idPrefix}-action-delete-disabled`}
                 className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
               />
diff --git a/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js b/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
index 9874860c8..54b713005 100644
--- a/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
+++ b/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
@@ -1,48 +1,33 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 
-import { Icon } from 'patternfly-react'
-
 import { MsgContext } from '_/intl'
 import style from './style.css'
 import { Tooltip } from '_/components/tooltips'
+import { ArrowCircleUpIcon, ArrowCircleDownIcon, LockIcon, UnknownIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const diskStateSettings = (msg) => ({
-  active: {
-    type: 'fa',
-    name: 'arrow-circle-o-up',
-    className: style['state-icon-active'],
-    tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateActiveTooltip() }),
-  },
-  inactive: {
-    type: 'fa',
-    name: 'arrow-circle-o-down',
-    className: style['state-icon-inactive'],
-    tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateInactiveTooltip() }),
-  },
-  locked: {
-    type: 'pf',
-    name: 'locked',
-    className: style['state-icon-locked'],
-    tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateLockedTooltip() }),
-  },
+  active: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateActiveTooltip() }),
+  inactive: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateInactiveTooltip() }),
+  locked: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateLockedTooltip() }),
 })
 
 const DiskStateIcon = ({ idPrefix, diskState, showTooltip = true }) => {
   const { msg } = useContext(MsgContext)
-  const diskInfo = diskStateSettings(msg)[diskState]
-  const theIcon = (
-    <Icon
-      id={`${idPrefix}-state-icon`}
-      type={diskInfo.type}
-      name={diskInfo.name}
-      className={`${style['state-icon']} ${diskInfo.className}`}
-    />
-  )
+  const id = `${idPrefix}-state-icon`
+  const [Icon, iconStyle] = diskState === 'active'
+    ? [ArrowCircleUpIcon, style['state-icon-active']]
+    : diskState === 'inactive'
+      ? [ArrowCircleDownIcon, style['state-icon-inactive']]
+      : diskState === 'locked'
+        ? [LockIcon, style['state-icon-locked']]
+        : [UnknownIcon, '']
+
+  const theIcon = <Icon id={id} className={`${style['state-icon']} ${iconStyle}`}/>
 
   if (showTooltip) {
     return (
-      <Tooltip id={`${idPrefix}-state-icon-tooltip`} tooltip={diskInfo.tooltip}>
+      <Tooltip id={`${idPrefix}-state-icon-tooltip`} tooltip={diskStateSettings(msg)[diskState]}>
         {theIcon}
       </Tooltip>
     )
diff --git a/src/components/VmDetails/cards/DisksCard/index.js b/src/components/VmDetails/cards/DisksCard/index.js
index 231a4b5e0..97ab20912 100644
--- a/src/components/VmDetails/cards/DisksCard/index.js
+++ b/src/components/VmDetails/cards/DisksCard/index.js
@@ -7,7 +7,6 @@ import { createDiskForVm, editDiskOnVm, removeDisk } from '_/actions'
 import { withMsg } from '_/intl'
 import { maskForElementId, suggestDiskName, sortDisksForDisplay } from '_/components/utils'
 
-import { Icon } from 'patternfly-react'
 import { Grid, Row, Col } from '_/components/Grid'
 import BaseCard from '../../BaseCard'
 import DiskImageEditor from './DiskImageEditor'
@@ -17,6 +16,7 @@ import itemStyle from '../../itemListStyle.css'
 import baseStyle from '../../style.css'
 import style from './style.css'
 import { localeCompare } from '_/helpers'
+import { PlusIcon, StorageDomainIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 function filterStorageDomains (vm, clusters, storageDomains) {
   const clusterId = vm.getIn(['cluster', 'id'])
@@ -113,7 +113,7 @@ class DisksCard extends React.Component {
   }
 
   render () {
-    const { vm, onEditChange, msg, locale } = this.props
+    const { vm, onEditChange, msg, locale, className = '' } = this.props
     const { suggestedDiskName, suggestedStorageDomain, filteredStorageDomainList } = this.state
 
     const idPrefix = 'vmdetail-disks'
@@ -129,11 +129,11 @@ class DisksCard extends React.Component {
     return (
       <BaseCard
         idPrefix={idPrefix}
-        icon={{ type: 'pf', name: 'storage-domain' }}
+        icon={StorageDomainIcon}
         title={msg.disks()}
         editTooltip={msg.edit()}
         itemCount={diskList.size}
-        className={baseStyle['cell-card']}
+        className={`${baseStyle['cell-card']} ${className}`}
         editable={canEditTheCard}
         onStartEdit={() => { onEditChange(true) }}
         onCancel={() => { onEditChange(false) }}
@@ -154,7 +154,7 @@ class DisksCard extends React.Component {
                     trigger={({ onClick }) => (
                       <div className={itemStyle['create-block']}>
                         <a href='#' id={`${idPrefix}-new-disk-action`} onClick={onClick}>
-                          <Icon className={itemStyle['create-icon']} type='fa' name='plus' />
+                          <PlusIcon className={itemStyle['create-icon']}/>
                           <span className={itemStyle['create-text']} >{msg.diskActionCreateNew()}</span>
                         </a>
                       </div>
@@ -197,6 +197,7 @@ class DisksCard extends React.Component {
 }
 
 DisksCard.propTypes = {
+  className: PropTypes.string,
   vm: PropTypes.object.isRequired,
   onEditChange: PropTypes.func.isRequired,
 
diff --git a/src/components/VmDetails/cards/DisksCard/style.css b/src/components/VmDetails/cards/DisksCard/style.css
index 7daff9e6c..d84b37362 100644
--- a/src/components/VmDetails/cards/DisksCard/style.css
+++ b/src/components/VmDetails/cards/DisksCard/style.css
@@ -43,19 +43,7 @@
   font-size: 75%;
 }
 
-/* for DiskImageEditor */
-.editor-field-help {
-  margin-right: -7px;
-}
-
 .editor-field-read-only {
   padding-top: 5px;
 }
 
-.editor-bootable-alert-container {
-  margin-top: -10px;
-}
-
-.editor-bootable-alert {
-  --pf-c-alert__title--FontSize: 15px;
-}
diff --git a/src/components/VmDetails/cards/NicsCard/NicEditor.js b/src/components/VmDetails/cards/NicsCard/NicEditor.js
index f3502540a..371efac17 100644
--- a/src/components/VmDetails/cards/NicsCard/NicEditor.js
+++ b/src/components/VmDetails/cards/NicsCard/NicEditor.js
@@ -2,20 +2,18 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import {
-  Col,
-  ControlLabel,
-  ExpandCollapse,
+  Button,
   Form,
-  FormControl,
+  FormFieldGroupExpandable,
+  FormFieldGroupHeader,
   FormGroup,
-  Radio,
-} from 'patternfly-react'
-import {
-  Button,
+  FormSelect,
+  FormSelectOption,
   Modal,
   ModalVariant,
+  TextInput,
+  Radio,
 } from '@patternfly/react-core'
-import SelectBox from '../../../SelectBox'
 import NicLinkStateIcon from './NicLinkStateIcon'
 
 import { withMsg } from '_/intl'
@@ -27,17 +25,6 @@ import { InfoTooltip } from '_/components/tooltips'
 const NIC_INTERFACE_DEFAULT = 'virtio'
 const NIC_INTERFACE_CANT_CHANGE = ['pci_passthrough']
 
-const LabelCol = ({ children, ...props }) => {
-  return (
-    <Col componentClass={ControlLabel} {...props}>
-      { children }
-    </Col>
-  )
-}
-LabelCol.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
 /**
  * Collect required information required to create a new NIC for a VM.
  *
@@ -124,7 +111,7 @@ class NicEditor extends Component {
     return nic
   }
 
-  changeName ({ target: { value } }) {
+  changeName (value) {
     this.setState((state) => ({ values: { ...state.values, name: value } }))
   }
 
@@ -202,88 +189,88 @@ class NicEditor extends Component {
           ]}
         >
           <Form
-            horizontal
-            onSubmit={e => { e.preventDefault() }}
+            isHorizontal
             id={`${modalId}-form`}
           >
-            <FormGroup controlId={`${modalId}-name`}>
-              <LabelCol sm={3}>
-                { msg.nicEditorNameLabel() }
-              </LabelCol>
-              <Col sm={9}>
-                <FormControl
-                  type='text'
-                  defaultValue={this.state.values.name}
-                  onChange={this.changeName}
-                />
-              </Col>
+            <FormGroup label={ msg.nicEditorNameLabel() } fieldId={`${modalId}-name`} >
+              <TextInput
+                id={`${modalId}-name`}
+                type='text'
+                value={this.state.values.name}
+                onChange={this.changeName}
+              />
             </FormGroup>
 
-            <FormGroup controlId={`${modalId}-vnic-profile`}>
-              <LabelCol sm={3}>
-                { msg.vnicProfile() }
-              </LabelCol>
-              <Col sm={9}>
-                <SelectBox
-                  id={`${modalId}-vnic-profile`}
-                  items={vnicList}
-                  selected={this.state.values.vnicProfileId}
-                  onChange={this.changeVnicProfile}
-                />
-              </Col>
+            <FormGroup fieldId={`${modalId}-vnic-profile`} label={ msg.vnicProfile() }>
+              <FormSelect
+                id={`${modalId}-vnic-profile`}
+                value={this.state.values.vnicProfileId}
+                onChange={this.changeVnicProfile}
+              >
+                {vnicList.map((option, index) => (
+                  <FormSelectOption key={index} value={option.id} label={option.value} />
+                ))}
+              </FormSelect>
             </FormGroup>
 
-            <ExpandCollapse id='nic-edit-advanced-options' textCollapsed={msg.advancedOptions()} textExpanded={msg.advancedOptions()}>
-              <FormGroup controlId={`${modalId}-interface`}>
-                <LabelCol sm={3}>
-                  { msg.nicEditorInterfaceLabel() }
-                  { !canChangeInterface && (
-                    <InfoTooltip
-                      id={`${modalId}-interface-edit-tooltip`}
-                      tooltip={msg.nicEditorInterfaceCantEditHelp()}
-                    />
-                  )}
-                </LabelCol>
-                <Col sm={9}>
-                  { !canChangeInterface && (
-                    <div className={style['editor-value-text']} id={`${modalId}-interface`}>
-                      { nicInterface ? nicInterface.value : 'N/A' }
-                    </div>
-                  )}
-                  { canChangeInterface && (
-                    <SelectBox
-                      id={`${modalId}-interface`}
-                      items={NIC_INTERFACES}
-                      selected={this.state.values.interface}
-                      onChange={this.changeInterface}
-                    />
-                  )}
-                </Col>
-              </FormGroup>
-              <FormGroup controlId='nic-link-state-group'>
-                <LabelCol sm={3}>
-                  { msg.nicEditorLinkStateLabel() }
-                </LabelCol>
-                <Col sm={9}>
-                  <Radio
-                    id={`${modalId}-link-state-on`}
-                    name='nic-link-state-group'
-                    defaultChecked={this.state.values.linked}
-                    onChange={() => { this.changeLinked(true) }}
-                  >
-                    { msg.nicEditorLinkStateUp() } <NicLinkStateIcon linkState idSuffix='up' showTooltip={false} />
-                  </Radio>
-                  <Radio
-                    id={`${modalId}-link-state-off`}
-                    name='nic-link-state-group'
-                    defaultChecked={!this.state.values.linked}
-                    onChange={() => { this.changeLinked(false) }}
+            <FormFieldGroupExpandable
+              header={ <FormFieldGroupHeader titleText={{ text: msg.advancedOptions(), id: 'nic-edit-advanced-options' }} />}
+            >
+              <FormGroup
+                label={ msg.nicEditorInterfaceLabel() }
+                labelIcon={!canChangeInterface && (
+                  <InfoTooltip
+                    id={`${modalId}-interface-edit-tooltip`}
+                    tooltip={msg.nicEditorInterfaceCantEditHelp()}
+                  />
+                )}
+                fieldId={`${modalId}-interface`}
+              >
+                { !canChangeInterface && (
+                  <div className={style['editor-value-text']} id={`${modalId}-interface`}>
+                    { nicInterface ? nicInterface.value : 'N/A' }
+                  </div>
+                )}
+                { canChangeInterface && (
+                  <FormSelect
+                    id={`${modalId}-interface`}
+                    value={this.state.values.interface}
+                    onChange={this.changeInterface}
                   >
-                    { msg.nicEditorLinkStateDown() } <NicLinkStateIcon idSuffix='down' showTooltip={false} />
-                  </Radio>
-                </Col>
+                    {NIC_INTERFACES.map((option, index) => (
+                      <FormSelectOption key={index} value={option.id} label={option.value} />
+                    ))}
+                  </FormSelect>
+
+                )}
+              </FormGroup>
+              <FormGroup fieldId='nic-link-state-group' label={ msg.nicEditorLinkStateLabel() }>
+                <Radio
+                  id={`${modalId}-link-state-on`}
+                  name='nic-link-state-group'
+                  isChecked={this.state.values.linked}
+                  onChange={() => { this.changeLinked(true) }}
+                  label={ (
+                    <>
+                      {msg.nicEditorLinkStateUp()}
+                      <NicLinkStateIcon linkState idSuffix='up' showTooltip={false} />
+                    </>
+                  ) }
+                />
+                <Radio
+                  id={`${modalId}-link-state-off`}
+                  name='nic-link-state-group'
+                  isChecked={!this.state.values.linked}
+                  onChange={() => { this.changeLinked(false) }}
+                  label={ (
+                    <>
+                      { msg.nicEditorLinkStateDown() }
+                      <NicLinkStateIcon idSuffix='down' showTooltip={false} />
+                    </>
+                  ) }
+                />
               </FormGroup>
-            </ExpandCollapse>
+            </FormFieldGroupExpandable>
           </Form>
         </Modal>
       </>
diff --git a/src/components/VmDetails/cards/NicsCard/NicLinkStateIcon.js b/src/components/VmDetails/cards/NicsCard/NicLinkStateIcon.js
index aec6450fa..885f15dab 100644
--- a/src/components/VmDetails/cards/NicsCard/NicLinkStateIcon.js
+++ b/src/components/VmDetails/cards/NicsCard/NicLinkStateIcon.js
@@ -1,42 +1,20 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 
-import { Icon } from 'patternfly-react'
-
 import { MsgContext } from '_/intl'
 import style from './style.css'
 import { Tooltip } from '_/components/tooltips'
-
-const nicLinkInfoSettings = (msg) => ({
-  true: {
-    type: 'fa',
-    name: 'arrow-circle-o-up',
-    className: style['link-icon-up'],
-    tooltip: msg.nicLinkStatusUp(),
-  },
-  false: {
-    type: 'fa',
-    name: 'arrow-circle-o-down',
-    className: style['link-icon-down'],
-    tooltip: msg.nicLinkStatusDown(),
-  },
-})
+import { ArrowCircleUpIcon, ArrowCircleDownIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const NicLinkStateIcon = ({ linkState = false, showTooltip = true, idSuffix }) => {
   const { msg } = useContext(MsgContext)
-  const linkInfo = nicLinkInfoSettings(msg)[linkState]
-  const theIcon = (
-    <Icon
-      id={`nic-link-icon-${idSuffix || linkState}`}
-      type={linkInfo.type}
-      name={linkInfo.name}
-      className={`${style['link-icon']} ${linkInfo.className}`}
-    />
-  )
+  const id = `nic-link-icon-${idSuffix || linkState}`
+  const [Icon, iconStyle] = linkState ? [ArrowCircleUpIcon, style['link-icon-up']] : [ArrowCircleDownIcon, style['link-icon-down']]
+  const theIcon = <Icon id={id} className={`${style['link-icon']} ${iconStyle}`}/>
 
   if (showTooltip) {
     return (
-      <Tooltip id={`nic-link-icon-tooltip-${idSuffix || linkState}`} tooltip={linkInfo.tooltip}>
+      <Tooltip id={`nic-link-icon-tooltip-${idSuffix || linkState}`} tooltip={linkState ? msg.nicLinkStatusUp() : msg.nicLinkStatusDown() }>
         {theIcon}
       </Tooltip>
     )
diff --git a/src/components/VmDetails/cards/NicsCard/NicListItem.js b/src/components/VmDetails/cards/NicsCard/NicListItem.js
index 5eb01f123..d07c00e46 100644
--- a/src/components/VmDetails/cards/NicsCard/NicListItem.js
+++ b/src/components/VmDetails/cards/NicsCard/NicListItem.js
@@ -6,13 +6,13 @@ import { escapeHtml } from '../../../utils'
 import itemStyle from '../../itemListStyle.css'
 import style from './style.css'
 
-import { Icon } from 'patternfly-react'
 import { Grid, Row, Col } from '_/components/Grid'
 import DeleteConfirmationModal from '../../../VmModals/DeleteConfirmationModal'
 import NicEditor from './NicEditor'
 import NicLinkStateIcon from './NicLinkStateIcon'
 import { Tooltip } from '_/components/tooltips'
 import EllipsisValue from '_/components/EllipsisValue'
+import { PencilAltIcon, TrashIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 /**
  * Render a single NIC in the list of Nics on the Nics Card.
@@ -88,7 +88,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-edit-tooltip`} tooltip={msg.nicEditTooltip()}>
                   <a id={`${idPrefix}-edit-action`} className={itemStyle['item-action']} onClick={onClick}>
-                    <Icon type='pf' name='edit' />
+                    <PencilAltIcon/>
                   </a>
                 </Tooltip>
               )}
@@ -96,9 +96,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
           )}
           { !canEdit && (
             <Tooltip id={`${idPrefix}-edit-tooltip-disabled`} tooltip={msg.nicEditDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='edit'
+              <PencilAltIcon
                 id={`${idPrefix}-edit-action-disabled`}
                 className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
               />
@@ -112,7 +110,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-delete-tooltip`} tooltip={msg.nicDeleteTooltip()}>
                   <a id={`${idPrefix}-delete-action`} className={itemStyle['item-action']} onClick={onClick}>
-                    <Icon type='pf' name='delete' />
+                    <TrashIcon style={{ color: 'red' }} />
                   </a>
                 </Tooltip>
               )}
@@ -128,9 +126,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
           )}
           { !canDelete && (
             <Tooltip id={`${idPrefix}-delete-tooltip-disabled`} tooltip={msg.nicDeleteDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='delete'
+              <TrashIcon
                 id={`${idPrefix}-delete-action-disabled`}
                 className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
               />
diff --git a/src/components/VmDetails/cards/NicsCard/index.js b/src/components/VmDetails/cards/NicsCard/index.js
index 6c2bc7671..73394fd6c 100644
--- a/src/components/VmDetails/cards/NicsCard/index.js
+++ b/src/components/VmDetails/cards/NicsCard/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Icon } from 'patternfly-react'
 
 import { withMsg } from '_/intl'
 import { addVmNic, deleteVmNic, editVmNic } from '_/actions'
@@ -16,6 +15,7 @@ import style from './style.css'
 import NicEditor from './NicEditor'
 import NicListItem from './NicListItem'
 import { localeCompare } from '_/helpers'
+import { PlusIcon, NetworkIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 /*
  * Filter the set of vNIC profiles to display to the user such that:
@@ -128,7 +128,7 @@ class NicsCard extends React.Component {
 
     return (
       <BaseCard
-        icon={{ type: 'pf', name: 'network' }}
+        icon={NetworkIcon}
         title={msg.nic()}
         editTooltip={msg.edit()}
         editable={canEditTheCard}
@@ -152,7 +152,7 @@ class NicsCard extends React.Component {
                     trigger={({ onClick }) => (
                       <div className={itemStyle['create-block']}>
                         <a href='#' id={`${idPrefix}-new-button`} onClick={onClick}>
-                          <Icon className={itemStyle['create-icon']} type='fa' name='plus' />
+                          <PlusIcon className={itemStyle['create-icon']}/>
                           <span className={itemStyle['create-text']} >{msg.nicActionCreateNew()}</span>
                         </a>
                       </div>
diff --git a/src/components/VmDetails/cards/OverviewCard/index.js b/src/components/VmDetails/cards/OverviewCard/index.js
index e74e2ba65..8f4bd28ea 100644
--- a/src/components/VmDetails/cards/OverviewCard/index.js
+++ b/src/components/VmDetails/cards/OverviewCard/index.js
@@ -9,8 +9,14 @@ import { generateUnique, buildMessageFromRecord } from '_/helpers'
 import { formatUptimeDuration } from '_/utils'
 import { editVm } from '_/actions'
 
-import { FormControl, FormGroup, HelpBlock, Checkbox } from 'patternfly-react'
-import { Alert } from '@patternfly/react-core'
+import {
+  Alert,
+  Checkbox,
+  Form,
+  FormGroup,
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core'
 
 import BaseCard from '../../BaseCard'
 import VmIcon from '../../../VmIcon'
@@ -233,40 +239,43 @@ class OverviewCard extends React.Component {
 
               {isPoolVm && pool && <span className={style['pool-vm-label']} style={{ backgroundColor: pool.get('color') }}>{ pool.get('name') }</span>}
               <div className={style.container}>
-                <div className={style['os-icon']}>
-                  <VmIcon icon={icon} missingIconClassName='pficon pficon-virtual-machine' />
-                </div>
+                {!isEditing && (
+                  <div className={style['os-icon']}>
+                    <VmIcon icon={icon} missingIconClassName='pficon pficon-virtual-machine' />
+                  </div>
+                )}
                 <div className={style['vm-info']}>
                   <div className={style['vm-name']}>
                     { !isEditing && <span id={`${idPrefix}-name`}>{vm.get('name')}</span> }
                     { isEditing && (
-                      <FormGroup controlId={`${idPrefix}-name-edit`} validationState={nameError ? 'error' : null}>
-                        <FormControl
-                          type='text'
-                          value={this.state.vm.get('name')}
-                          onChange={e => this.handleChange('name', e.target.value)}
-                        />
-                        { nameError && (
-                          <HelpBlock>
-                            {msg.pleaseEnterValidVmName()}
-                          </HelpBlock>
-                        )}
-                      </FormGroup>
+                      <Form>
+                        <FormGroup
+                          fieldId={`${idPrefix}-name-edit`}
+                          validated={nameError ? 'error' : null}
+                          helperTextInvalid={msg.pleaseEnterValidVmName()}
+                        >
+                          <TextInput
+                            id={`${idPrefix}-name-edit`}
+                            type='text'
+                            value={this.state.vm.get('name')}
+                            onChange={value => this.handleChange('name', value)}
+                            validated={nameError ? 'error' : null}
+                          />
+                        </FormGroup>
+                      </Form>
                     )}
                     {
                       showCloudInitCheckbox && (
                         <div className={style['vm-checkbox']}>
                           <Checkbox
                             id={`${idPrefix}-cloud-init`}
-                            checked={updateCloudInit}
-                            onChange={(e) => this.setState({ updateCloudInit: e.target.checked })}
-                            disabled={disableHostnameToggle}
-                          >
-                            { !disableHostnameToggle
+                            isChecked={updateCloudInit}
+                            onChange={value => this.setState({ updateCloudInit: value })}
+                            isDisabled={disableHostnameToggle}
+                            label={!disableHostnameToggle
                               ? msg.updateCloudInit()
-                              : msg.cannotUpdateCloudInitHostname()
-                          }
-                          </Checkbox>
+                              : msg.cannotUpdateCloudInitHostname()}
+                          />
                         </div>
                       )}
                   </div>
@@ -285,12 +294,11 @@ class OverviewCard extends React.Component {
                       <div id={`${idPrefix}-description`} className={style['vm-description']}>{vm.get('description')}</div>
                     }
                     { isEditing && (
-                      <FormControl
+                      <TextArea
                         id={`${idPrefix}-description-edit`}
-                        componentClass='textarea'
                         rows='5'
                         value={this.state.vm.get('description')}
-                        onChange={e => this.handleChange('description', e.target.value)}
+                        onChange={value => this.handleChange('description', value)}
                       />
                     )}
                   </div>
diff --git a/src/components/VmDetails/cards/OverviewCard/style.css b/src/components/VmDetails/cards/OverviewCard/style.css
index 1bd4fe9e5..6111c3b04 100644
--- a/src/components/VmDetails/cards/OverviewCard/style.css
+++ b/src/components/VmDetails/cards/OverviewCard/style.css
@@ -11,6 +11,7 @@
 
 .vm-info {
   padding: 15px;
+  flex-grow: 1
 }
 
 .vm-name {
diff --git a/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js b/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js
index 7de4cd659..0be0ba7af 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js
@@ -5,22 +5,18 @@ import { connect } from 'react-redux'
 import { addVmSnapshot } from './actions'
 
 import {
-  Col,
+  Button,
+  Checkbox,
   Form,
-  FormControl,
   FormGroup,
-  HelpBlock,
-  Checkbox,
-  Icon,
-  noop,
-} from 'patternfly-react'
-import {
-  Alert,
-  Button,
+  Hint,
+  HintBody,
   Modal,
   ModalVariant,
+  TextInput,
 } from '@patternfly/react-core'
 import { withMsg } from '_/intl'
+import { PlusIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 class NewSnapshotModal extends Component {
   constructor (props) {
@@ -46,12 +42,12 @@ class NewSnapshotModal extends Component {
     this.setState({ showModal: false, description: '', emptyDescription: false })
   }
 
-  handleDescriptionChange (e) {
-    this.setState({ description: e.target.value })
+  handleDescriptionChange (value) {
+    this.setState({ description: value })
   }
 
-  handleSaveMemoryChange (e) {
-    this.setState({ saveMemory: e.target.checked })
+  handleSaveMemoryChange (checked) {
+    this.setState({ saveMemory: checked })
   }
 
   handleSave (e) {
@@ -70,13 +66,12 @@ class NewSnapshotModal extends Component {
 
   render () {
     const { idPrefix, msg } = this.props
-
     const modalId = `${idPrefix}-modal`
 
     return (
       <div>
-        <a onClick={this.props.disabled ? noop : this.open} id={`${idPrefix}-button`} className={`${this.props.disabled && 'disabled'}`}>
-          <Icon type='fa' name='plus' />
+        <a onClick={this.props.disabled ? () => {} : this.open} id={`${idPrefix}-button`} className={`${this.props.disabled && 'disabled'}`}>
+          <PlusIcon/>
           { msg.createSnapshot() }
         </a>
 
@@ -102,49 +97,36 @@ class NewSnapshotModal extends Component {
 
           ]}
         >
-          <Form onSubmit={this.handleSave} horizontal>
-            <Col sm={12}>
-              <Alert
-                variant='info'
-                isInline
-                title={msg.details()}
-                style={{ 'margin-bottom': '10px' }}
-              >
+          <Form onSubmit={this.handleSave} isHorizontal>
+            <Hint >
+              <HintBody>
                 {msg.snapshotInfo() }
-              </Alert>
-            </Col>
-            <FormGroup bsClass='form-group col-sm-12 required' validationState={this.state.emptyDescription ? 'error' : null}>
-              <label className='col-sm-3 control-label'>
-                { msg.name() }
-              </label>
-              <div className='col-sm-9'>
-                <FormControl
-                  type='text'
-                  value={this.state.description}
-                  onChange={this.handleDescriptionChange}
-                  id={`${modalId}-description-edit`}
-                />
-                {
-                    this.state.emptyDescription && (
-                      <HelpBlock>
-                        {msg.emptySnapshotDescription()}
-                      </HelpBlock>
-                    )}
-              </div>
+              </HintBody>
+            </Hint>
+            <FormGroup
+              label={ msg.name() }
+              validated={this.state.emptyDescription ? 'error' : null}
+              helperTextInvalid={msg.emptySnapshotDescription()}
+              fieldId={`${modalId}-description-edit`}
+            >
+              <TextInput
+                type='text'
+                value={this.state.description}
+                onChange={this.handleDescriptionChange}
+                id={`${modalId}-description-edit`}
+              />
             </FormGroup>
             {
                 this.props.isVmRunning && (
-                  <FormGroup bsClass='form-group col-sm-12'>
-                    <label className='col-sm-3 control-label'>
-                      {msg.saveMemory()}
-                    </label>
-                    <div className='col-sm-9'>
-                      <Checkbox
-                        id={`${idPrefix}-snapshot-save-memory`}
-                        checked={this.state.saveMemory}
-                        onChange={this.handleSaveMemoryChange}
-                      />
-                    </div>
+                  <FormGroup
+                    label={msg.saveMemory()}
+                    fieldId={`${idPrefix}-snapshot-save-memory`}
+                  >
+                    <Checkbox
+                      id={`${idPrefix}-snapshot-save-memory`}
+                      isChecked={this.state.saveMemory}
+                      onChange={this.handleSaveMemoryChange}
+                    />
                   </FormGroup>
                 )}
           </Form>
diff --git a/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js b/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js
index affc547b2..856a56d4c 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js
@@ -2,12 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import {
+  Label,
+  LabelGroup,
   Popover,
-  Icon,
-  Button,
-  OverlayTrigger,
-  Tooltip,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import Immutable from 'immutable'
 
 import style from './style.css'
@@ -18,12 +16,12 @@ import Selectors from '_/selectors'
 import { templateNameRenderer, getFormatedDateTime, userFormatOfBytes, localeCompare } from '_/helpers'
 import { getOsHumanName, sortDisksForDisplay } from '_/components/utils'
 
-import RestoreConfirmationModal from './RestoreConfirmationModal'
+import { OffIcon, RunningIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const Status = ({ status, msg }) => {
   return status
-    ? <span className={style['status-icon']}><Icon type='pf' name='on-running' className={style.green} />{msg.on()}</span>
-    : <span className={style['status-icon']}><Icon type='pf' name='off' />{msg.off()}</span>
+    ? <span className={style['status-icon']}><RunningIcon className={style.green} />{msg.on()}</span>
+    : <span className={style['status-icon']}><OffIcon/>{msg.off()}</span>
 }
 
 Status.propTypes = {
@@ -35,17 +33,17 @@ const diskRender = (idPrefix, disk, index) => {
   const provSize = userFormatOfBytes(disk.get('provisionedSize'))
   const actSize = userFormatOfBytes(disk.get('actualSize'), provSize.suffix)
   return (
-    <div key={disk.get('id')} id={`${idPrefix}-${disk.get('name')}-${index}`}>
+    <Label key={disk.get('id')} id={`${idPrefix}-${disk.get('name')}-${index}`}>
       {`${disk.get('name')} (${actSize.str} used / ${provSize.str})`}
-    </div>
+    </Label>
   )
 }
 
 const nicRender = (idPrefix, nic) => {
   return (
-    <div key={nic.get('id')} id={`${idPrefix}-${nic.get('name')}`}>
+    <Label key={nic.get('id')} id={`${idPrefix}-${nic.get('name')}`}>
       {nic.get('name')}
-    </div>
+    </Label>
   )
 }
 
@@ -55,181 +53,106 @@ const statusMap = (msg) => ({
   ok: msg.ok(),
 })
 
-const SnapshotDetail = ({ snapshot, vmId, restoreDisabled, id, isPoolVm, msg, locale, ...otherProps }) => {
+const SnapshotDetail = ({ snapshot, vmId, restoreDisabled, id, isPoolVm, msg, locale, position, children }) => {
   const template = Selectors.getTemplateById(snapshot.getIn(['vm', 'template', 'id']))
   const time = getFormatedDateTime(snapshot.get('date'))
 
   const snapshotMemoryState = snapshot.get('persistMemoryState') && msg.memoryIncluded()
 
   const disksToRender = sortDisksForDisplay(snapshot.get('disks', Immutable.fromJS([])), locale)
-  const showMoreDisks = disksToRender.size > 2
-  const diskToShow = disksToRender.slice(0, 2)
-  const additionalDisk = disksToRender.slice(2)
 
   const nicsToRender = snapshot.get('nics', Immutable.fromJS([])).sort((a, b) => localeCompare(a.get('name'), b.get('name'), locale))
-  const showMoreNics = nicsToRender.size > 2
-  const nicsToShow = nicsToRender.slice(0, 2)
-  const additionalNics = nicsToRender.slice(2)
 
   return (
     <Popover
       id={id}
-      title={(
-        <div>
-          {snapshot.get('description')}
-          <button
-            id={`${id}-close`}
-            type='button'
-            className='close'
-            aria-label='Close'
-            onClick={() => document.body.click()}
-          >
-            <span aria-hidden='true'>&times;</span>
-          </button>
-        </div>
+      position={position}
+      headerContent={snapshot.get('description')}
+      hasAutoWidth
+      bodyContent={(
+        <>
+          <div className={style['snapshot-detail-container']}>
+            <dl className={style['snapshot-properties']}>
+              <dt>
+                {msg.created()}
+              </dt>
+              <dd id={`${id}-created`}>
+                {`${time.time} ${time.date}`}
+              </dd>
+              <dt>
+                {msg.operatingSystem()}
+              </dt>
+              <dd id={`${id}-os`}>
+                {getOsHumanName(snapshot.getIn(['vm', 'os', 'type']))}
+              </dd>
+              <dt>
+                {msg.memory()}
+              </dt>
+              <dd id={`${id}-memory`}>
+                {userFormatOfBytes(snapshot.getIn(['vm', 'memory', 'total'])).str} {snapshotMemoryState}
+              </dd>
+              <dt>
+                {msg.cpus()}
+              </dt>
+              <dd id={`${id}-cpus`}>
+                {snapshot.getIn(['vm', 'cpu', 'vCPUs'])}
+              </dd>
+              <dt>
+                {msg.status()}
+              </dt>
+              <dd id={`${id}-status`}>
+                {statusMap(msg)[snapshot.get('status')]}
+              </dd>
+            </dl>
+            <dl className={style['snapshot-properties']}>
+              <dt>
+                {msg.template()}
+              </dt>
+              <dd id={`${id}-template`}>
+                {template && templateNameRenderer(template)}
+              </dd>
+              <dt>
+                {msg.cdromBoot()}
+              </dt>
+              <dd id={`${id}-cdrom`}>
+                {snapshot.getIn(['vm', 'cdrom', 'file', 'id']) ? snapshot.getIn(['cdrom', 'file', 'id']) : msg.empty() }
+              </dd>
+              <dt>
+                {msg.nic()}
+              </dt>
+              <dd id={`${id}-nics`}>
+                { nicsToRender.size === 0 &&
+                  <div className={style['no-nics']} id={`${id}-no-nics`}>{msg.noNics()}</div>
+          }
+                { nicsToRender.size > 0 && (
+                  <LabelGroup isVertical numLabels={2}>
+                    {nicsToRender.map(nicRender.bind(null, `${id}-nics`))}
+                  </LabelGroup>
+                )}
+              </dd>
+              <dt>
+                {msg.bootMenu()}
+              </dt>
+              <dd id={`${id}-boot-menu`}>
+                <Status msg={msg} status={snapshot.getIn(['vm', 'bootMenuEnabled'])} />
+              </dd>
+              <dt>
+                {msg.disks()}
+              </dt>
+              <dd id={`${id}-disks`}>
+                { disksToRender.size === 0 && <div className={style['no-disks']} id={`${id}-no-disks`}>{msg.noDisks()}</div> }
+                { disksToRender.size > 0 && (
+                  <LabelGroup isVertical numLabels={2}>
+                    {disksToRender.map(diskRender.bind(null, `${id}-disks`))}
+                  </LabelGroup>
+                )}
+              </dd>
+            </dl>
+          </div>
+        </>
       )}
-      bsClass={`${style.popover} popover`}
-      {...otherProps}
     >
-      <div className={style['snapshot-detail-container']}>
-        <dl className={style['snapshot-properties']}>
-          <dt>
-            {msg.created()}
-          </dt>
-          <dd id={`${id}-created`}>
-            {`${time.time} ${time.date}`}
-          </dd>
-          <dt>
-            {msg.operatingSystem()}
-          </dt>
-          <dd id={`${id}-os`}>
-            {getOsHumanName(snapshot.getIn(['vm', 'os', 'type']))}
-          </dd>
-          <dt>
-            {msg.memory()}
-          </dt>
-          <dd id={`${id}-memory`}>
-            {userFormatOfBytes(snapshot.getIn(['vm', 'memory', 'total'])).str} {snapshotMemoryState}
-          </dd>
-          <dt>
-            {msg.cpus()}
-          </dt>
-          <dd id={`${id}-cpus`}>
-            {snapshot.getIn(['vm', 'cpu', 'vCPUs'])}
-          </dd>
-          <dt>
-            {msg.status()}
-          </dt>
-          <dd id={`${id}-status`}>
-            {statusMap(msg)[snapshot.get('status')]}
-          </dd>
-        </dl>
-        <dl className={style['snapshot-properties']}>
-          <dt>
-            {msg.template()}
-          </dt>
-          <dd id={`${id}-template`}>
-            {template && templateNameRenderer(template)}
-          </dd>
-          <dt>
-            {msg.cdromBoot()}
-          </dt>
-          <dd id={`${id}-cdrom`}>
-            {snapshot.getIn(['vm', 'cdrom', 'file', 'id']) ? snapshot.getIn(['cdrom', 'file', 'id']) : msg.empty() }
-          </dd>
-          <dt>
-            {msg.nic()}
-          </dt>
-          <dd id={`${id}-nics`}>
-            { nicsToRender.size === 0 &&
-              <div className={style['no-nics']} id={`${id}-no-nics`}>{msg.noNics()}</div>
-          }
-            { nicsToRender.size > 0 && (
-              <div className={style['snapshot-disk-list']}>
-                {nicsToShow && nicsToShow.map(nicRender.bind(null, `${id}-nics`))}
-                {
-              showMoreNics && (
-                <OverlayTrigger
-                  overlay={(
-                    <Tooltip id={`snapshot-nic-tooltip-${snapshot.get('id')}`}>
-                      {
-                    additionalNics && additionalNics.map(nicRender.bind(null, `${id}-nics`))
-                  }
-                    </Tooltip>
-                  )}
-                  placement='bottom'
-                  trigger='click'
-                  rootClose
-                  key='info'
-                >
-                  <a>Show more</a>
-                </OverlayTrigger>
-              )}
-              </div>
-            )}
-          </dd>
-          <dt>
-            {msg.bootMenu()}
-          </dt>
-          <dd id={`${id}-boot-menu`}>
-            <Status msg={msg} status={snapshot.getIn(['vm', 'bootMenuEnabled'])} />
-          </dd>
-          <dt>
-            {msg.disks()}
-          </dt>
-          <dd id={`${id}-disks`}>
-            { disksToRender.size === 0 &&
-              <div className={style['no-disks']} id={`${id}-no-disks`}>{msg.noDisks()}</div>
-          }
-            { disksToRender.size > 0 && (
-              <div className={style['snapshot-disk-list']}>
-                {diskToShow && diskToShow.map(diskRender.bind(null, `${id}-disks`))}
-                {
-              showMoreDisks && (
-                <OverlayTrigger
-                  overlay={(
-                    <Tooltip id={`snapshot-disk-tooltip-${snapshot.get('id')}`}>
-                      {
-                    additionalDisk && additionalDisk.map(diskRender.bind(null, `${id}-disks`))
-                  }
-                    </Tooltip>
-                  )}
-                  placement='bottom'
-                  trigger='click'
-                  rootClose
-                  key='info'
-                >
-                  <a>Show more</a>
-                </OverlayTrigger>
-              )}
-              </div>
-            )}
-          </dd>
-        </dl>
-      </div>
-      <div style={{ textAlign: 'left' }}>
-        <RestoreConfirmationModal
-          id={`${id}-restore-modal`}
-          snapshot={snapshot}
-          vmId={vmId}
-          msg={msg}
-          trigger={({ onClick }) => (
-            isPoolVm
-              ? (
-                <OverlayTrigger placement='top' overlay={<Tooltip id={`${id}-restore-tt`}>{ msg.vmPoolSnapshotRestoreUnavailable() }</Tooltip>}>
-                  <span>
-                    <Button bsStyle='default' id={`${id}-restore`} disabled style={{ pointerEvents: 'none' }}>{ msg.snapshotRestore() }</Button>
-                  </span>
-                </OverlayTrigger>
-              )
-              : (
-                <Button bsStyle='default' id={`${id}-restore`} onClick={onClick} disabled={restoreDisabled}>
-                  { msg.snapshotRestore() }
-                </Button>
-              )
-          )}
-        />
-      </div>
+      {children}
     </Popover>
   )
 }
@@ -242,6 +165,8 @@ SnapshotDetail.propTypes = {
   isPoolVm: PropTypes.bool,
   msg: PropTypes.object.isRequired,
   locale: PropTypes.string.isRequired,
+  position: PropTypes.oneOf(['auto', 'top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end']),
+  children: PropTypes.object,
 }
 
 export default withMsg(SnapshotDetail)
diff --git a/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js b/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js
index 38f89cdfe..a9faadbc7 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js
@@ -4,11 +4,8 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import {
-  Icon,
-  OverlayTrigger,
   Tooltip as PFTooltip,
-  noop,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 
 import style from './style.css'
 
@@ -20,13 +17,14 @@ import { deleteVmSnapshot } from './actions'
 import { formatHowLongAgo } from '_/utils/format'
 import { getMinimizedString, escapeHtml } from '../../../utils'
 import { Tooltip, InfoTooltip } from '_/components/tooltips'
+import { CheckCircleIcon, EyeIcon, LockIcon, PlayIcon, TrashIcon } from '@patternfly/react-icons/dist/esm/icons'
 const MAX_DESCRIPTION_SIZE = 50
 
 const SnapshotAction = ({ children, className, disabled, id, onClick }) => {
   return (
     <a
       id={id}
-      onClick={disabled ? noop : onClick}
+      onClick={disabled ? () => {} : onClick}
       className={`${className} ${disabled && 'disabled'}`}
     >
       {children}
@@ -41,18 +39,19 @@ SnapshotAction.propTypes = {
   onClick: PropTypes.func,
 }
 
-const StatusTooltip = ({ icon, text, id, placement }) => {
+const StatusTooltip = ({ icon: TheIcon, text, id, placement, className }) => {
   return (
-    <OverlayTrigger overlay={<PFTooltip id={id}>{text}</PFTooltip>} placement={placement} trigger={['hover', 'focus']}>
-      <a>{icon}</a>
-    </OverlayTrigger>
+    <PFTooltip id={id} content={text} position={placement}>
+      <a className={className}><TheIcon/></a>
+    </PFTooltip>
   )
 }
 StatusTooltip.propTypes = {
-  icon: PropTypes.node.isRequired,
+  icon: PropTypes.func.isRequired,
   text: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   placement: PropTypes.string.isRequired,
+  className: PropTypes.string,
 }
 
 class SnapshotItem extends React.Component {
@@ -108,30 +107,25 @@ class SnapshotItem extends React.Component {
     if (!this.props.snapshot.get('isActive')) {
       // Info popover
       buttons.push(
-        <OverlayTrigger
-          overlay={(
-            <SnapshotDetail key='detail'
-              id={`${this.props.id}-info-popover`}
-              snapshot={this.props.snapshot}
-              vmId={this.props.vmId}
-              restoreDisabled={isRestoreDisabled}
-              isPoolVm={this.props.isPoolVm}
-              msg={msg}
-              locale={locale}
-            />
-          )}
-          placement={this.state.isMobile || this.state.isTablet ? 'top' : 'left'}
-          trigger='click'
-          rootClose
-          key='info'
+        <SnapshotDetail
+          key='detail'
+          id={`${this.props.id}-info-popover`}
+          snapshot={this.props.snapshot}
+          vmId={this.props.vmId}
+          restoreDisabled={isRestoreDisabled}
+          isPoolVm={this.props.isPoolVm}
+          msg={msg}
+          locale={locale}
+          position={this.state.isMobile || this.state.isTablet ? 'top' : 'left'}
         >
           <a id={`${this.props.id}-info`}>
             <InfoTooltip
               id={`${this.props.id}-info-tt`}
               tooltip={msg.details()}
+              className={style.black}
             />
           </a>
-        </OverlayTrigger>
+        </SnapshotDetail >
       )
 
       if (!this.props.hideActions) {
@@ -145,7 +139,7 @@ class SnapshotItem extends React.Component {
             trigger={({ onClick }) => (
               <SnapshotAction key='restore' id={`${this.props.id}-restore`} onClick={onClick} disabled={isRestoreDisabled}>
                 <Tooltip id={`${this.props.id}-restore-tt`} tooltip={msg.snapshotRestore()}>
-                  <Icon type='fa' name='play-circle' />
+                  <PlayIcon className={isRestoreDisabled ? '' : style.black}/>
                 </Tooltip>
               </SnapshotAction>
             )}
@@ -161,7 +155,7 @@ class SnapshotItem extends React.Component {
             trigger={({ onClick }) => (
               <SnapshotAction key='delete' id={`${this.props.id}-delete`} disabled={isActionsDisabled} onClick={onClick}>
                 <Tooltip id={`${this.props.id}-delete-tt`} tooltip={msg.snapshotDelete()}>
-                  <Icon type='pf' name='delete' />
+                  <TrashIcon className={isActionsDisabled ? '' : style.red}/>
                 </Tooltip>
               </SnapshotAction>
             )}
@@ -184,13 +178,13 @@ class SnapshotItem extends React.Component {
       const status = `${msg.status()}:`
       switch (this.props.snapshot.get('status')) {
         case 'locked':
-          statusIcon = <StatusTooltip icon={<Icon type='pf' name='locked' />} text={`${status} ${msg.locked()}`} id={tooltipId} placement={tooltipPlacement} />
+          statusIcon = <StatusTooltip icon={LockIcon} text={`${status} ${msg.locked()}`} id={tooltipId} placement={tooltipPlacement} />
           break
         case 'in_preview':
-          statusIcon = <StatusTooltip icon={<Icon type='fa' name='eye' />} text={`${status} ${msg.inPreview()}`} id={tooltipId} placement={tooltipPlacement} />
+          statusIcon = <StatusTooltip icon={EyeIcon} text={`${status} ${msg.inPreview()}`} id={tooltipId} placement={tooltipPlacement} />
           break
         case 'ok':
-          statusIcon = <StatusTooltip icon={<Icon type='pf' name='ok' />} text={`${status} ${msg.ok()}`} id={tooltipId} placement={tooltipPlacement} />
+          statusIcon = <StatusTooltip icon={CheckCircleIcon} text={`${status} ${msg.ok()}`} className={style.green} id={tooltipId} placement={tooltipPlacement} />
           break
       }
     }
diff --git a/src/components/VmDetails/cards/SnapshotsCard/index.js b/src/components/VmDetails/cards/SnapshotsCard/index.js
index 46591fb7b..e1fa5c56b 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/index.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/index.js
@@ -9,6 +9,7 @@ import style from './style.css'
 import NewSnapshotModal from './NewSnapshotModal'
 import SnapshotItem from './SnapshotItem'
 import { PendingTaskTypes } from '_/reducers/pendingTasks'
+import { VirtualMachineIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const DOWN_STATUS = 'down'
 const RUNNING_STATUS = 'up'
@@ -80,7 +81,7 @@ const SnapshotsCard = ({ vm }) => {
 
   return (
     <BaseCard
-      icon={{ type: 'pf', name: 'virtual-machine' }}
+      icon={VirtualMachineIcon}
       title={msg.snapshot()}
       itemCount={snapshots.size}
       idPrefix={idPrefix}
diff --git a/src/components/VmDetails/cards/SnapshotsCard/style.css b/src/components/VmDetails/cards/SnapshotsCard/style.css
index 0280cf134..f37edc367 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/style.css
+++ b/src/components/VmDetails/cards/SnapshotsCard/style.css
@@ -67,10 +67,18 @@ div.popover {
 }
 
 .green {
-  color: #3B9D2E;
+  color: #3f9c35;
 }
 
-.status-icon span {
+.black {
+  color: black;
+}
+
+.red {
+  color: red;
+}
+
+.status-icon svg {
   margin-right: 5px;
 }
 
@@ -84,18 +92,9 @@ div.popover {
 
 .snapshot-item a {
   cursor: pointer;
-  color: black;
   font-size: 14px;
 }
 
-.snapshot-item a :global(.fa-play-circle) {
-  font-size: 16px;
-}
-
-.snapshot-item > a {
-  margin-right: 5px;
-}
-
 .snapshot-item-status {
   display: table-cell;
 }
@@ -122,7 +121,7 @@ div.popover {
   margin-left: 5px;
 }
 
-.snapshot-create a span {
+.snapshot-create a svg {
   margin-right: 5px;
 }
 
diff --git a/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js b/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
index 6026fcebd..5df85687d 100644
--- a/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
@@ -1,15 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
-  CardTitle,
+  Card,
   CardBody,
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import DonutChart from './UtilizationCharts/DonutChart'
 import AreaChart from './UtilizationCharts/AreaChart'
 
@@ -19,6 +13,7 @@ import style from './style.css'
 
 import NoHistoricData from './NoHistoricData'
 import NoLiveData from './NoLiveData'
+import UtilizationCardData from './UtilizationCardData'
 
 /**
  * Render current CPU % utilization as a donut chart and historic % utilization values
@@ -34,19 +29,18 @@ const CpuCharts = ({ cpuStats, isRunning, id, vcpus }) => {
   const history = ((cpuStats['usage.history'] && cpuStats['usage.history'].datum) || []).reverse()
 
   return (
-    <UtilizationCard className={style['chart-card']} id={id}>
-      <CardTitle>{msg.utilizationCardTitleCpu()}</CardTitle>
+    <Card className={style['chart-card']} id={id}>
       <CardBody>
+        {msg.utilizationCardTitleCpu()}
         { !isRunning && <NoLiveData id={`${id}-no-live-data`} /> }
         { isRunning && (
           <>
-            <UtilizationCardDetails>
-              <UtilizationCardDetailsCount id={`${id}-available`}>{cpuAvailable}%</UtilizationCardDetailsCount>
-              <UtilizationCardDetailsDesc>
-                <UtilizationCardDetailsLine1>{msg.utilizationCardAvailable()}</UtilizationCardDetailsLine1>
-                <UtilizationCardDetailsLine2 id={`${id}-total`}>{msg.utilizationCardOf100()}</UtilizationCardDetailsLine2>
-              </UtilizationCardDetailsDesc>
-            </UtilizationCardDetails>
+            <UtilizationCardData
+              available={`${cpuAvailable}%`}
+              line1={msg.utilizationCardAvailable()}
+              line2={msg.utilizationCardOf100()}
+              idPrefix={id}
+            />
 
             <DonutChart
               id={`${id}-donut-chart`}
@@ -77,7 +71,7 @@ const CpuCharts = ({ cpuStats, isRunning, id, vcpus }) => {
           </>
         )}
       </CardBody>
-    </UtilizationCard>
+    </Card>
   )
 }
 CpuCharts.propTypes = {
diff --git a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
index 76422dc05..6dbf3ce46 100644
--- a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
@@ -1,15 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
+  Card,
   CardBody,
-  CardTitle,
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import BarChart from './UtilizationCharts/BarChart'
 import DonutChart from './UtilizationCharts/DonutChart'
 
@@ -21,6 +15,7 @@ import style from './style.css'
 
 import NoHistoricData from './NoHistoricData'
 import NoLiveData from './NoLiveData'
+import UtilizationCardData from './UtilizationCardData'
 
 const EmptyBlock = () => (
   <div className={style['no-history-chart']} />
@@ -62,31 +57,27 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
   const isVmWindows = isWindows(vm.getIn(['os', 'type']))
 
   return (
-    <UtilizationCard className={style['chart-card']} id={id}>
-      <CardTitle>{msg.utilizationCardTitleDisk()}</CardTitle>
+    <Card className={style['chart-card']} id={id}>
       <CardBody>
+        {msg.utilizationCardTitleDisk()}
         { vm.get('disks').size === 0 &&
           <NoLiveData id={`${id}-no-live-data`} message={msg.utilizationCardNoAttachedDisks()} />
         }
         { vm.get('disks').size > 0 && (
           <>
-            <UtilizationCardDetails>
-              <UtilizationCardDetailsCount id={`${id}-available`}>
-                {msg.utilizationCardUnitNumber({
-                  number: floor(availableFormated.number, availableMemoryPercision),
-                  storageUnits: availableFormated.suffix !== totalFormated.suffix && availableFormated.suffix,
-                })}
-              </UtilizationCardDetailsCount>
-              <UtilizationCardDetailsDesc>
-                <UtilizationCardDetailsLine1>{msg.utilizationCardUnallocated()}</UtilizationCardDetailsLine1>
-                <UtilizationCardDetailsLine2 id={`${id}-total`}>
-                  {msg.utilizationCardOfProvisioned({
-                    number: round(totalFormated.number, 1),
-                    storageUnits: totalFormated.suffix,
-                  })}
-                </UtilizationCardDetailsLine2>
-              </UtilizationCardDetailsDesc>
-            </UtilizationCardDetails>
+            <UtilizationCardData
+              available={msg.utilizationCardUnitNumber({
+                number: floor(availableFormated.number, availableMemoryPercision),
+                storageUnits: availableFormated.suffix !== totalFormated.suffix && availableFormated.suffix,
+              })}
+              line1={msg.utilizationCardUnallocated()}
+              line2={msg.utilizationCardOfProvisioned({
+                number: round(totalFormated.number, 1),
+                storageUnits: totalFormated.suffix,
+              })}
+              idPrefix={id}
+            />
+
             { !hasDiskDetails && (
               <DonutChart
                 id={`${id}-donut-chart`}
@@ -143,7 +134,7 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
           </>
         )}
       </CardBody>
-    </UtilizationCard>
+    </Card>
   )
 }
 DiskCharts.propTypes = {
diff --git a/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js b/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
index da8af844b..bdfbae443 100644
--- a/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
@@ -1,15 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
+  Card,
   CardBody,
-  CardTitle,
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import DonutChart from './UtilizationCharts/DonutChart'
 import AreaChart from './UtilizationCharts/AreaChart'
 import { MsgContext } from '_/intl'
@@ -20,6 +14,7 @@ import style from './style.css'
 
 import NoHistoricData from './NoHistoricData'
 import NoLiveData from './NoLiveData'
+import UtilizationCardData from './UtilizationCardData'
 
 /**
  * Render current Memory use (free vs available) as a donut chart and historic use values
@@ -47,29 +42,25 @@ const MemoryCharts = ({ memoryStats, isRunning, id }) => {
     : 2
 
   return (
-    <UtilizationCard className={style['chart-card']} id={id}>
-      <CardTitle>{msg.utilizationCardTitleMemory()}</CardTitle>
+    <Card className={style['chart-card']} id={id}>
       <CardBody>
+        {msg.utilizationCardTitleMemory()}
         { !isRunning && <NoLiveData id={`${id}-no-live-data`} /> }
         { isRunning && (
           <>
-            <UtilizationCardDetails>
-              <UtilizationCardDetailsCount id={`${id}-available`}>
-                {msg.utilizationCardUnitNumber({
-                  number: floor(availableFormated.number, availableMemoryPercision),
-                  storageUnits: availableFormated.suffix !== totalFormated.suffix && availableFormated.suffix,
-                })}
-              </UtilizationCardDetailsCount>
-              <UtilizationCardDetailsDesc>
-                <UtilizationCardDetailsLine1>{msg.utilizationCardAvailable()}</UtilizationCardDetailsLine1>
-                <UtilizationCardDetailsLine2 id={`${id}-total`}>
-                  {msg.utilizationCardOf({
-                    number: round(totalFormated.number, 0),
-                    storageUnits: totalFormated.suffix,
-                  })}
-                </UtilizationCardDetailsLine2>
-              </UtilizationCardDetailsDesc>
-            </UtilizationCardDetails>
+            <UtilizationCardData
+              available={msg.utilizationCardUnitNumber({
+                number: floor(availableFormated.number, availableMemoryPercision),
+                storageUnits: availableFormated.suffix !== totalFormated.suffix && availableFormated.suffix,
+              })}
+              line1={msg.utilizationCardAvailable()}
+              line2={msg.utilizationCardOf({
+                number: round(totalFormated.number, 0),
+                storageUnits: totalFormated.suffix,
+              })}
+              idPrefix={id}
+            />
+
             <DonutChart
               id={`${id}-donut-chart`}
               data={[
@@ -98,7 +89,7 @@ const MemoryCharts = ({ memoryStats, isRunning, id }) => {
           </>
         )}
       </CardBody>
-    </UtilizationCard>
+    </Card>
   )
 }
 MemoryCharts.propTypes = {
diff --git a/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js b/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
index 860f234f3..36a493729 100644
--- a/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
@@ -1,15 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
-  CardTitle,
+  Card,
   CardBody,
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import DonutChart from './UtilizationCharts/DonutChart'
 import AreaChart from './UtilizationCharts/AreaChart'
 
@@ -19,6 +13,7 @@ import style from './style.css'
 
 import NoHistoricData from './NoHistoricData'
 import NoLiveData from './NoLiveData'
+import UtilizationCardData from './UtilizationCardData'
 
 /**
  * Render current Network % utilization as a donut chart and historic % utilization values
@@ -39,22 +34,21 @@ const NetworkingCharts = ({ netStats, isRunning, id }) => {
   const history = ((netStats['usage.history'] && netStats['usage.history'].datum) || []).reverse()
 
   return (
-    <UtilizationCard className={style['chart-card']} id={id}>
-      <CardTitle>{msg.utilizationCardTitleNetworking()}</CardTitle>
+    <Card className={style['chart-card']} id={id}>
       <CardBody>
+        {msg.utilizationCardTitleNetworking()}
         { !isRunning && <NoLiveData id={`${id}-no-live-data`} /> }
         { isRunning && !haveNetworkStats &&
           <NoLiveData id={`${id}-no-live-data`} message={msg.utilizationNoNetStats()} />
         }
         { isRunning && haveNetworkStats && (
           <>
-            <UtilizationCardDetails>
-              <UtilizationCardDetailsCount id={`${id}-available`}>{available}%</UtilizationCardDetailsCount>
-              <UtilizationCardDetailsDesc>
-                <UtilizationCardDetailsLine1>{msg.utilizationCardAvailable()}</UtilizationCardDetailsLine1>
-                <UtilizationCardDetailsLine2>{msg.utilizationCardOf100()}</UtilizationCardDetailsLine2>
-              </UtilizationCardDetailsDesc>
-            </UtilizationCardDetails>
+            <UtilizationCardData
+              available={`${available}%`}
+              line1={msg.utilizationCardAvailable()}
+              line2={msg.utilizationCardOf100()}
+              idPrefix={id}
+            />
             <DonutChart
               id={`${id}-donut-chart`}
               data={[
@@ -83,7 +77,7 @@ const NetworkingCharts = ({ netStats, isRunning, id }) => {
           </>
         )}
       </CardBody>
-    </UtilizationCard>
+    </Card>
   )
 }
 NetworkingCharts.propTypes = {
diff --git a/src/components/VmDetails/cards/UtilizationCard/NoHistoricData.js b/src/components/VmDetails/cards/UtilizationCard/NoHistoricData.js
index 913537580..626daa9ea 100644
--- a/src/components/VmDetails/cards/UtilizationCard/NoHistoricData.js
+++ b/src/components/VmDetails/cards/UtilizationCard/NoHistoricData.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { Icon } from 'patternfly-react'
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons'
 import { MsgContext } from '_/intl'
 
 import style from './style.css'
@@ -13,7 +13,7 @@ const NoHistoricData = ({ message, id }) => {
   return (
     <div className={style['no-history-chart']} id={id}>
       <div className={style['no-history-chart-icon']}>
-        <Icon type='pf' name='info' />
+        <InfoCircleIcon />
       </div>
       <div className={style['no-history-chart-message']}>
         { message || msg.utilizationNoHistoricData() }
diff --git a/src/components/VmDetails/cards/UtilizationCard/NoLiveData.js b/src/components/VmDetails/cards/UtilizationCard/NoLiveData.js
index c2f3bda29..c56fbd3ef 100644
--- a/src/components/VmDetails/cards/UtilizationCard/NoLiveData.js
+++ b/src/components/VmDetails/cards/UtilizationCard/NoLiveData.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { Icon } from 'patternfly-react'
+import { ChartBarIcon } from '@patternfly/react-icons/dist/esm/icons'
 import { MsgContext } from '_/intl'
 
 import style from './style.css'
@@ -15,7 +15,7 @@ const NoLiveData = ({ title, message, id }) => {
   return (
     <div className={style['no-data-card-body']} id={id}>
       <div className={style['no-data-icon']}>
-        <Icon type='fa' name='bar-chart' />
+        <ChartBarIcon/>
       </div>
       <div className={style['no-data-title']}>
         { title || msg.utilizationNoDataAvailableTitle() }
diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCardData.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCardData.js
new file mode 100644
index 000000000..e29bc388b
--- /dev/null
+++ b/src/components/VmDetails/cards/UtilizationCard/UtilizationCardData.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import style from './style.css'
+
+const UtilizationCardData = ({ available, line1, line2, idPrefix }) => {
+  return (
+    <p className={style['utilization-card-details']}>
+      <span id={`${idPrefix}-available`} className={style['utilization-card-details-count']}>{available}</span>
+      <span className={style['utilization-card-details-description']}>
+        <span className={style['utilization-card-details-line-1']}>{line1}</span>
+        <span>{line2}</span>
+      </span>
+    </p>
+  )
+}
+
+UtilizationCardData.propTypes = {
+  idPrefix: PropTypes.string,
+  available: PropTypes.string,
+  line1: PropTypes.string,
+  line2: PropTypes.string,
+}
+
+export default UtilizationCardData
diff --git a/src/components/VmDetails/cards/UtilizationCard/style.css b/src/components/VmDetails/cards/UtilizationCard/style.css
index ea4599baf..92435e711 100644
--- a/src/components/VmDetails/cards/UtilizationCard/style.css
+++ b/src/components/VmDetails/cards/UtilizationCard/style.css
@@ -1,3 +1,38 @@
+.utilization-card-details {
+    border-bottom: 1px solid #d1d1d1;
+    display: table;
+    margin: 12px 0 15px;
+    padding: 0 0 15px;
+    width: 100%; 
+}
+
+.utilization-card-details-count {
+    font-size: 26px;
+    font-weight: 300;
+    margin-right: 10px;
+    float: left;
+    line-height: 1;
+}
+
+.utilization-card-details-description {
+    float: left;
+    line-height: 1;
+}
+
+.utilization-card-details-line-1 {
+    font-size: 10px;
+    margin-bottom: 2px;
+    display: block;
+}
+
+.chart-card :global(.pf-c-card__body) {
+  padding: 0;
+  flex-grow: 1;
+
+  display: flex;
+  flex-direction: column;
+}
+
 .utilization-card .chart-card {
   box-shadow: none;
   margin-left: -20px;
diff --git a/src/components/VmDetails/index.js b/src/components/VmDetails/index.js
index ae0c19377..2851cfd5f 100644
--- a/src/components/VmDetails/index.js
+++ b/src/components/VmDetails/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Card, CardBody } from 'patternfly-react'
-import { Alert } from '@patternfly/react-core'
+import { Hint, HintBody, Card, CardBody } from '@patternfly/react-core'
 import { withMsg } from '_/intl'
 
 import styles from './style.css'
@@ -62,9 +61,13 @@ class VmDetailsContainer extends React.Component {
         {vm.get('nextRunExists') && (
           <Row>
             <Col>
-              <Card>
+              <Card style={{ marginBottom: '20px' }}>
                 <CardBody>
-                  <Alert variant='info' isInline title={msg.vmHasPendingConfigurationChanges()}/>
+                  <Hint >
+                    <HintBody>
+                      {msg.vmHasPendingConfigurationChanges()}
+                    </HintBody>
+                  </Hint>
                 </CardBody>
               </Card>
             </Col>
@@ -80,7 +83,7 @@ class VmDetailsContainer extends React.Component {
           <Col cols={9} className={styles['col-utilization']}><UtilizationCard vm={vm} /></Col>
           <Col cols={3} className={styles['col-nics-disks']}>
             <NicsCard vm={vm} onEditChange={(isEdit, isDirty) => this.handleEditChange('nic', isEdit, isDirty)} />
-            <DisksCard vm={vm} onEditChange={(isEdit, isDirty) => this.handleEditChange('disk', isEdit, isDirty)} />
+            <DisksCard className={styles['col-disks']} vm={vm} onEditChange={(isEdit, isDirty) => this.handleEditChange('disk', isEdit, isDirty)} />
           </Col>
         </Row>
       </Grid>
diff --git a/src/components/VmDetails/style.css b/src/components/VmDetails/style.css
index 135825781..31901694a 100644
--- a/src/components/VmDetails/style.css
+++ b/src/components/VmDetails/style.css
@@ -6,7 +6,6 @@
 /* ---> CardEditButton styles */
 .card-edit-button {
   float: right;
-  margin-top: 15px;
   width: 25px;
   height: 25px;
   border: none;
@@ -33,14 +32,17 @@
 }
 
 /* ---> BaseCard styles */
-.base-card {
+:global(.pf-c-card).base-card {
   display: flex;
   flex-direction: column;
+  margin-bottom: 20px;
 }
 
 .base-card-heading {
   flex-shrink: 0;
   margin-bottom: 0;
+  justify-content: space-between;
+  border-bottom: 1px solid #d1d1d1;
 }
 
 .base-card-title-icon {
@@ -54,6 +56,7 @@
 
 .base-card-body {
   flex: 1 0 0;
+  margin-top: 15px;
 }
 
 .base-card-footer {
@@ -64,10 +67,38 @@ div.base-card.cell-card {
   flex-basis: auto;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 800px) {
   .col-overview, .col-details, .col-snapshots, 
   .col-utilization, .col-nics-disks
   {
     min-width: 100%;
   }
 }
+
+@media only screen and (max-width: 1200px) and (min-width: 801px) {
+  .col-overview, .col-utilization
+  {
+    min-width: 100%;
+  }
+
+  .col-snapshots
+  {
+    min-width: 40%;
+  }
+
+  .col-details
+  {
+    min-width: 60%;
+  }
+ 
+  .col-nics-disks
+  {
+    min-width: 100%;
+    flex-direction: row;
+  }
+
+  .col-disks 
+  {
+    margin-left: 20px;
+  }
+}