From b6a9bbec12afaf43a12697fcfccb8a5eedcee62e 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     | 246 ++++++---------
 .../cards/SnapshotsCard/SnapshotItem.js       |  56 ++--
 .../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, 758 insertions(+), 870 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 37864c9fa7..ea1857cd30 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 a4d9f3b0f2..95c4c34588 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 4207c59190..eb63e00e41 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 c5a6d73558..7453866363 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 d307d64dea..b682b978d6 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 a04bf3deea..968a2055a8 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 0cc19fd4d6..78401cd893 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 f7fd69242f..d73d37d21d 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 93c03cde19..519f24c168 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 a48fc6e2b5..4ee0623abc 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 9874860c8e..54b7130055 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 231a4b5e05..97ab209129 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 7daff9e6cb..d84b373623 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 f3502540a5..371efac174 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 aec6450fa0..885f15dab5 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 5eb01f123c..d07c00e46e 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 6c2bc76713..73394fd6c8 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 e74e2ba650..8f4bd28eab 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 1bd4fe9e5c..6111c3b04a 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 7de4cd6596..0be0ba7afb 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 197e249adf..c8209a3985 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js
@@ -2,11 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import {
+  Label,
+  LabelGroup,
   Popover,
-  Icon,
-  OverlayTrigger,
-  Tooltip,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import Immutable from 'immutable'
 
 import style from './style.css'
@@ -17,10 +16,11 @@ import Selectors from '_/selectors'
 import { templateNameRenderer, getFormatedDateTime, userFormatOfBytes, localeCompare } from '_/helpers'
 import { getOsHumanName, sortDisksForDisplay } from '_/components/utils'
 
+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 = {
@@ -32,17 +32,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>
   )
 }
 
@@ -52,158 +52,106 @@ const statusMap = (msg) => ({
   ok: msg.ok(),
 })
 
-const SnapshotDetail = ({ snapshot, vmId, id, isPoolVm, msg, locale, ...otherProps }) => {
+const SnapshotDetail = ({ snapshot, vmId, 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>
+      {children}
     </Popover>
   )
 }
@@ -215,6 +163,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 c65142552c..3d19326c9d 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,29 +107,24 @@ 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}
-              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}
+          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) {
@@ -144,7 +138,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>
             )}
@@ -160,7 +154,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>
             )}
@@ -183,13 +177,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 c2735bb138..7bf1c1109d 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/index.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/index.js
@@ -10,6 +10,7 @@ import style from './style.css'
 import BaseCard from '../../BaseCard'
 import NewSnapshotModal from './NewSnapshotModal'
 import SnapshotItem from './SnapshotItem'
+import { VirtualMachineIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const DOWN_STATUS = 'down'
 const RUNNING_STATUS = 'up'
@@ -84,7 +85,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 0280cf134d..f37edc3678 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 6026fcebdc..5df85687d7 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 257f37ab2c..0866691da1 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 da8af844b8..bdfbae4439 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 860f234f3a..36a4937293 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 913537580e..626daa9ea8 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 c2f3bda29e..c56fbd3ef8 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 0000000000..e29bc388b2
--- /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 ea4599baf0..92435e7115 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 ae0c193771..2851cfd5f4 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 1358257816..31901694ab 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;
+  }
+}