From 6a99d3435602cb17c38c1accb913ec6b138bb8f2 Mon Sep 17 00:00:00 2001
From: Scott Dickerson <sdickers@redhat.com>
Date: Jun 03 2022 13:08:12 +0000
Subject: Merge pull request #1540 from rszwajko/vmDetailsPF4


Migrate VM Details to PF4
---

diff --git a/src/components/Grid/style.css b/src/components/Grid/style.css
index 37864c9..ea1857c 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 a4d9f3b..9f36c7d 100644
--- a/src/components/VmDetails/BaseCard.js
+++ b/src/components/VmDetails/BaseCard.js
@@ -4,18 +4,18 @@ 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'
+
+import { withMsg } from '_/intl'
 
 /**
  * Base VM details card.  Support common layouts and view vs edit modes.
@@ -76,7 +76,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 +87,7 @@ class BaseCard extends React.Component {
   render () {
     const {
       title = undefined,
-      icon = undefined,
+      icon: TheIcon = undefined,
       itemCount = undefined,
       editMode = undefined,
       editable = true,
@@ -97,17 +97,23 @@ class BaseCard extends React.Component {
       disableSaveButton = false,
       disableTooltip = undefined,
       editTooltipPlacement = 'top',
+      msg,
     } = this.props
     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 className={style['base-card-item-count-badge']}>{itemCount}</Badge>}
+            </CardTitle>
             <CardEditButton
               tooltip={editTooltip}
               editable={editable}
@@ -117,12 +123,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 +144,22 @@ 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
+              isDisabled={disableSaveButton}
+              onClick={this.clickSave}
+              id={`${idPrefix}-button-save`}
+              aria-label={msg.save()}
+            >
+              <CheckIcon />
+            </Button>
+            <Button
+              onClick={this.clickCancel}
+              id={`${idPrefix}-button-cancel`}
+              aria-label={msg.cancel()}
+              variant='link'
+            >
+              <TimesIcon />
             </Button>
-            <Button onClick={this.clickCancel} id={`${idPrefix}-button-cancel`}><Icon type='pf' name='close' /></Button>
           </CardFooter>
         )}
       </Card>
@@ -155,10 +168,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,
@@ -174,11 +184,13 @@ BaseCard.propTypes = {
   onCancel: PropTypes.func,
   onSave: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+
+  msg: PropTypes.object.isRequired,
 }
 BaseCard.defaultProps = {
-  onStartEdit: noop,
-  onCancel: noop,
-  onSave: noop,
+  onStartEdit: () => {},
+  onCancel: () => {},
+  onSave: () => {},
 }
 
-export default BaseCard
+export default withMsg(BaseCard)
diff --git a/src/components/VmDetails/CardEditButton.js b/src/components/VmDetails/CardEditButton.js
index 4207c59..eb63e00 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 c5a6d73..7453866 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 d307d64..b682b97 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 a04bf3d..082be53 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} className={style.maxWidth100}>
+          {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 0cc19fd..78401cd 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 f7fd692..0404b0d 100644
--- a/src/components/VmDetails/cards/DetailsCard/style.css
+++ b/src/components/VmDetails/cards/DetailsCard/style.css
@@ -13,12 +13,16 @@
   max-width: 100%;
 }
 
+.maxWidth100 {
+  max-width: 100%;
+}
+
 .field-row + .field-row {
   margin-top: 5px;
 }
 
-.field-row:global(.form-group) {
-  margin-bottom: 0;
+.field-row .col-label {
+  font-weight: 600;
 }
 
 .field-row-divide {
@@ -39,11 +43,6 @@
   vertical-align: top;
 }
 
-.col-label :global(.control-label) {
-  margin-bottom: 0;
-  vertical-align: top;
-}
-
 .col-label .tooltip {
   flex-grow: 0;
 }
@@ -59,8 +58,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 +75,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 93c03cd..519f24c 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 683f165..cfc764b 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(
@@ -25,13 +26,12 @@ function isDiskBeingDeleted (diskId, pendingTasks) {
 /**
  * Render a single Disk in the list of Disks on the Disks Card.
  *
- * If _isEditing_ then render the appropriate action buttons linked to provided
- * handler functions.  If the action callbacks are not defined, they are assumed to
+ * If the action callbacks are not defined, they are assumed to
  * be disabled/disallowed and will be rendered as such.
  */
 const DiskListItem = ({
   idPrefix, vm, disk, storageDomainList,
-  isEditing, isDiskBeingDeleted, canDeleteDisks,
+  isDiskBeingDeleted, canDeleteDisks,
   onEdit, onDelete,
 }) => {
   const { msg } = useContext(MsgContext)
@@ -74,82 +74,76 @@ const DiskListItem = ({
             {view.name}
           </span>
         )}
-        <span id={`${idPrefix}-size`} className={style['size-info']}>
+        <span id={`${idPrefix}-size`} className={itemStyle['item-extra_info']}>
           ({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>
         )}
       </div>
 
-      {/* Actions Column (if edit) - content width, no wrapping */}
-      { isEditing && (
-        <div id={`${idPrefix}-actions`} className={itemStyle['item-row-actions']}>
-          { canEdit && (
-            <DiskImageEditor
-              idPrefix={`${idPrefix}-edit-disk`}
-              vm={vm}
-              disk={disk}
-              storageDomainList={storageDomainList}
-              onSave={onEdit}
-              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' />
-                  </a>
-                </Tooltip>
-              )}
+      {/* Actions Column - content width, no wrapping */}
+      <div id={`${idPrefix}-actions`} className={itemStyle['item-row-actions']}>
+        { canEdit && (
+          <DiskImageEditor
+            idPrefix={`${idPrefix}-edit-disk`}
+            vm={vm}
+            disk={disk}
+            storageDomainList={storageDomainList}
+            onSave={onEdit}
+            trigger={({ onClick }) => (
+              <Tooltip id={`${idPrefix}-action-edit-tooltip`} tooltip={msg.diskEditTooltip()}>
+                <a id={`${idPrefix}-action-edit`} className={itemStyle['item-action']} onClick={onClick} >
+                  <PencilAltIcon/>
+                </a>
+              </Tooltip>
+            )}
+          />
+        )}
+        { !canEdit && (
+          <Tooltip id={`${idPrefix}-action-edit-tooltip-disabled`} tooltip={msg.diskEditDisabledTooltip()}>
+            <PencilAltIcon
+              id={`${idPrefix}-action-edit-disabled`}
+              className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
             />
-          )}
-          { !canEdit && (
-            <Tooltip id={`${idPrefix}-action-edit-tooltip-disabled`} tooltip={msg.diskEditDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='edit'
-                id={`${idPrefix}-action-edit-disabled`}
-                className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
-              />
-            </Tooltip>
-          )}
+          </Tooltip>
+        )}
 
-          { canDelete && (
-            <DeleteConfirmationModal
-              id={`${idPrefix}-delete-modal`}
-              title={msg.permanentlyDeleteDisk()}
-              severity='danger'
-              onDelete={() => { onDelete(vm.get('id'), view.id) }}
-              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' />
-                  </a>
-                </Tooltip>
-              )}
-            >
-              <span
-                dangerouslySetInnerHTML={{
-                  __html: msg.areYouSureYouWantToDeleteDisk({
-                    diskName: `"<strong>${escapeHtml(view.name)}</strong>"`,
-                  }),
-                }}
-              />
-              <div>{msg.thisOperationCantBeUndone()}</div>
-            </DeleteConfirmationModal>
-          )}
-          { !canDelete && (
-            <Tooltip id={`${idPrefix}-action-delete-tooltip-disabled`} tooltip={msg.diskDeleteDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='delete'
-                id={`${idPrefix}-action-delete-disabled`}
-                className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
-              />
-            </Tooltip>
-          )}
-        </div>
-      )}
+        { canDelete && (
+          <DeleteConfirmationModal
+            id={`${idPrefix}-delete-modal`}
+            title={msg.permanentlyDeleteDisk()}
+            severity='danger'
+            onDelete={() => { onDelete(vm.get('id'), view.id) }}
+            trigger={({ onClick }) => (
+              <Tooltip id={`${idPrefix}-action-delete-tooltip`} tooltip={msg.diskDeleteTooltip()}>
+                <a id={`${idPrefix}-action-delete`} className={itemStyle['item-action']} onClick={onClick}>
+                  <TrashIcon style={{ color: 'red' }}/>
+                </a>
+              </Tooltip>
+            )}
+          >
+            <span
+              dangerouslySetInnerHTML={{
+                __html: msg.areYouSureYouWantToDeleteDisk({
+                  diskName: `"<strong>${escapeHtml(view.name)}</strong>"`,
+                }),
+              }}
+            />
+            <div>{msg.thisOperationCantBeUndone()}</div>
+          </DeleteConfirmationModal>
+        )}
+        { !canDelete && (
+          <Tooltip id={`${idPrefix}-action-delete-tooltip-disabled`} tooltip={msg.diskDeleteDisabledTooltip()}>
+            <TrashIcon
+              id={`${idPrefix}-action-delete-disabled`}
+              className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
+            />
+          </Tooltip>
+        )}
+      </div>
     </div>
   )
 }
@@ -159,7 +153,6 @@ DiskListItem.propTypes = {
   disk: PropTypes.object.isRequired, // ImmutableJS Map
   storageDomainList: PropTypes.object.isRequired,
 
-  isEditing: PropTypes.bool.isRequired,
   isDiskBeingDeleted: PropTypes.bool.isRequired,
   canDeleteDisks: PropTypes.bool.isRequired,
 
diff --git a/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js b/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
index 9874860..9fd7ef0 100644
--- a/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
+++ b/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
@@ -1,28 +1,24 @@
 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',
+    Icon: ArrowCircleUpIcon,
     className: style['state-icon-active'],
     tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateActiveTooltip() }),
   },
   inactive: {
-    type: 'fa',
-    name: 'arrow-circle-o-down',
+    Icon: ArrowCircleDownIcon,
     className: style['state-icon-inactive'],
     tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateInactiveTooltip() }),
   },
   locked: {
-    type: 'pf',
-    name: 'locked',
+    Icon: LockIcon,
     className: style['state-icon-locked'],
     tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateLockedTooltip() }),
   },
@@ -30,19 +26,18 @@ const diskStateSettings = (msg) => ({
 
 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,
+    className: iconStyle,
+    tooltip,
+  } = diskStateSettings(msg)[diskState] || { Icon: UnknownIcon, className: '' }
+
+  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={tooltip}>
         {theIcon}
       </Tooltip>
     )
diff --git a/src/components/VmDetails/cards/DisksCard/index.js b/src/components/VmDetails/cards/DisksCard/index.js
index 231a4b5..7d2dc34 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,74 +129,73 @@ 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']}
-        editable={canEditTheCard}
+        className={`${baseStyle['cell-card']} ${className}`}
+        editable={false}
         onStartEdit={() => { onEditChange(true) }}
         onCancel={() => { onEditChange(false) }}
         onSave={() => { onEditChange(false) }}
       >
-        {({ isEditing }) => (
-          <Grid className={style['disks-container']}>
-            { isEditing && canCreateDisks && (
-              <Row key={`${vm.get('id')}-disk-add`}>
-                <Col>
-                  <DiskImageEditor
-                    idPrefix={`${idPrefix}-new-disk`}
-                    vm={vm}
-                    suggestedName={suggestedDiskName}
-                    suggestedStorageDomain={suggestedStorageDomain}
-                    storageDomainList={filteredStorageDomainList}
-                    onSave={this.onCreateConfirm}
-                    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' />
-                          <span className={itemStyle['create-text']} >{msg.diskActionCreateNew()}</span>
-                        </a>
-                      </div>
-                    )}
-                  />
-                </Col>
-              </Row>
-            )}
-
-            { diskList.size === 0 && (
-              <Row>
-                <Col>
-                  <div className={itemStyle['no-items']} id={`${idPrefix}-no-disks`}>{msg.noDisks()}</div>
-                </Col>
-              </Row>
-            )}
-
-            { diskList.size > 0 && diskList.map(disk => (
-              <Row key={disk.get('id')}>
-                <Col style={{ display: 'block' }}>
-                  <DiskListItem
-                    idPrefix={`${idPrefix}-${maskForElementId(disk.get('name'))}`}
-                    vm={vm}
-                    disk={disk}
-                    storageDomainList={filteredStorageDomainList}
-                    isEditing={isEditing}
-                    canDeleteDisks={canDeleteDisks}
-                    onEdit={this.onEditConfirm}
-                    onDelete={this.onDeleteConfirm}
-                  />
-                </Col>
-              </Row>
-            )
-            )}
-          </Grid>
-        )}
+        <Grid className={style['disks-container']}>
+          { canEditTheCard && canCreateDisks && (
+            <Row key={`${vm.get('id')}-disk-add`}>
+              <Col>
+                <DiskImageEditor
+                  idPrefix={`${idPrefix}-new-disk`}
+                  vm={vm}
+                  suggestedName={suggestedDiskName}
+                  suggestedStorageDomain={suggestedStorageDomain}
+                  storageDomainList={filteredStorageDomainList}
+                  onSave={this.onCreateConfirm}
+                  trigger={({ onClick }) => (
+                    <div className={itemStyle['create-block']}>
+                      <a href='#' id={`${idPrefix}-new-disk-action`} onClick={onClick}>
+                        <PlusIcon className={itemStyle['create-icon']}/>
+                        <span className={itemStyle['create-text']} >{msg.diskActionCreateNew()}</span>
+                      </a>
+                    </div>
+                  )}
+                />
+              </Col>
+            </Row>
+          )}
+
+          { diskList.size === 0 && (
+            <Row>
+              <Col>
+                <div className={itemStyle['no-items']} id={`${idPrefix}-no-disks`}>{msg.noDisks()}</div>
+              </Col>
+            </Row>
+          )}
+
+          { diskList.size > 0 && diskList.map(disk => (
+            <Row key={disk.get('id')}>
+              <Col style={{ display: 'block' }}>
+                <DiskListItem
+                  idPrefix={`${idPrefix}-${maskForElementId(disk.get('name'))}`}
+                  vm={vm}
+                  disk={disk}
+                  storageDomainList={filteredStorageDomainList}
+                  isEditing={canEditTheCard}
+                  canDeleteDisks={canDeleteDisks}
+                  onEdit={this.onEditConfirm}
+                  onDelete={this.onDeleteConfirm}
+                />
+              </Col>
+            </Row>
+          )
+          )}
+        </Grid>
       </BaseCard>
     )
   }
 }
 
 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 7daff9e..0befdf0 100644
--- a/src/components/VmDetails/cards/DisksCard/style.css
+++ b/src/components/VmDetails/cards/DisksCard/style.css
@@ -23,7 +23,6 @@
 }
 
 .name-info {
-  max-width: 250px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -34,28 +33,12 @@
   font-style: italic;
 }
 
-.size-info {
-  margin-left: 5px;
-}
-
 .disk-label {
   margin-left: 5px;
   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 39e7f29..c830cf3 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 aec6450..885f15d 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 d775c3a..42e1ddf 100644
--- a/src/components/VmDetails/cards/NicsCard/NicListItem.js
+++ b/src/components/VmDetails/cards/NicsCard/NicListItem.js
@@ -6,21 +6,19 @@ 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.
  *
- * If _edit_ then render the appropriate action buttons linked to provided
- * handler functions.
  */
-const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEdit, onDelete, showNicIPs }) => {
+const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, onEdit, onDelete, showNicIPs }) => {
   const { msg } = useContext(MsgContext)
   const canEdit = !!onEdit
   const canDelete = !!onDelete
@@ -36,7 +34,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
       <span className={itemStyle['item-row-info']}>
         <div className={style['nics-title']}>
           <span id={`${idPrefix}-name`}>{nic.name}</span>
-          <span className={style['vnic-info']} id={`${idPrefix}-vnic-info`}>
+          <span className={itemStyle['item-extra_info']} id={`${idPrefix}-vnic-info`}>
             { nic.vnicProfile.id
               ? `(${nic.vnicProfile.name}/${nic.vnicProfile.network})`
               : `[${msg.nicNoVnicAssigned()}]`
@@ -75,71 +73,65 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
         </Grid>
       </span>
 
-      {/* Actions Column (if edit) - content width, no wrapping */}
-      { isEditing && (
-        <span className={itemStyle['item-row-actions']} id={`${idPrefix}-actions`}>
-          { canEdit && (
-            <NicEditor
-              idPrefix={`${idPrefix}-edit`}
-              nic={nic}
-              vmStatus={vmStatus}
-              vnicProfileList={vnicProfileList}
-              onSave={onEdit}
-              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' />
-                  </a>
-                </Tooltip>
-              )}
+      {/* Actions Column - content width, no wrapping */}
+      <span className={itemStyle['item-row-actions']} id={`${idPrefix}-actions`}>
+        { canEdit && (
+          <NicEditor
+            idPrefix={`${idPrefix}-edit`}
+            nic={nic}
+            vmStatus={vmStatus}
+            vnicProfileList={vnicProfileList}
+            onSave={onEdit}
+            trigger={({ onClick }) => (
+              <Tooltip id={`${idPrefix}-edit-tooltip`} tooltip={msg.nicEditTooltip()}>
+                <a id={`${idPrefix}-edit-action`} className={itemStyle['item-action']} onClick={onClick}>
+                  <PencilAltIcon/>
+                </a>
+              </Tooltip>
+            )}
+          />
+        )}
+        { !canEdit && (
+          <Tooltip id={`${idPrefix}-edit-tooltip-disabled`} tooltip={msg.nicEditDisabledTooltip()}>
+            <PencilAltIcon
+              id={`${idPrefix}-edit-action-disabled`}
+              className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
             />
-          )}
-          { !canEdit && (
-            <Tooltip id={`${idPrefix}-edit-tooltip-disabled`} tooltip={msg.nicEditDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='edit'
-                id={`${idPrefix}-edit-action-disabled`}
-                className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
-              />
-            </Tooltip>
-          )}
+          </Tooltip>
+        )}
 
-          { canDelete && (
-            <DeleteConfirmationModal
-              id={`${idPrefix}-delete-modal`}
-              severity='danger'
-              title={msg.permanentlyDeleteNic()}
-              onDelete={() => { onDelete(nic.id) }}
-              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' />
-                  </a>
-                </Tooltip>
-              )}
-            >
-              <span
-                dangerouslySetInnerHTML={{
-                  __html: msg.areYouSureYouWantToDeleteNic({
-                    nicName: `"<strong>${escapeHtml(nic.name)}</strong>"`,
-                  }),
-                }}
-              />
-            </DeleteConfirmationModal>
-          )}
-          { !canDelete && (
-            <Tooltip id={`${idPrefix}-delete-tooltip-disabled`} tooltip={msg.nicDeleteDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='delete'
-                id={`${idPrefix}-delete-action-disabled`}
-                className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
-              />
-            </Tooltip>
-          )}
-        </span>
-      )}
+        { canDelete && (
+          <DeleteConfirmationModal
+            id={`${idPrefix}-delete-modal`}
+            severity='danger'
+            title={msg.permanentlyDeleteNic()}
+            onDelete={() => { onDelete(nic.id) }}
+            trigger={({ onClick }) => (
+              <Tooltip id={`${idPrefix}-delete-tooltip`} tooltip={msg.nicDeleteTooltip()}>
+                <a id={`${idPrefix}-delete-action`} className={itemStyle['item-action']} onClick={onClick}>
+                  <TrashIcon style={{ color: 'red' }} />
+                </a>
+              </Tooltip>
+            )}
+          >
+            <span
+              dangerouslySetInnerHTML={{
+                __html: msg.areYouSureYouWantToDeleteNic({
+                  nicName: `"<strong>${escapeHtml(nic.name)}</strong>"`,
+                }),
+              }}
+            />
+          </DeleteConfirmationModal>
+        )}
+        { !canDelete && (
+          <Tooltip id={`${idPrefix}-delete-tooltip-disabled`} tooltip={msg.nicDeleteDisabledTooltip()}>
+            <TrashIcon
+              id={`${idPrefix}-delete-action-disabled`}
+              className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
+            />
+          </Tooltip>
+        )}
+      </span>
     </div>
   )
 }
@@ -148,7 +140,6 @@ NicListItem.propTypes = {
   nic: PropTypes.object.isRequired,
   vmStatus: PropTypes.string.isRequired,
   vnicProfileList: PropTypes.object.isRequired,
-  isEditing: PropTypes.bool.isRequired,
   showNicIPs: PropTypes.bool.isRequired,
 
   onEdit: PropTypes.func,
diff --git a/src/components/VmDetails/cards/NicsCard/index.js b/src/components/VmDetails/cards/NicsCard/index.js
index 6c2bc76..e814aaa 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,10 +128,10 @@ class NicsCard extends React.Component {
 
     return (
       <BaseCard
-        icon={{ type: 'pf', name: 'network' }}
+        icon={NetworkIcon}
         title={msg.nic()}
         editTooltip={msg.edit()}
-        editable={canEditTheCard}
+        editable={false}
         idPrefix={idPrefix}
         className={baseStyle['cell-card']}
         itemCount={vm.get('nics').size}
@@ -139,55 +139,53 @@ class NicsCard extends React.Component {
         onCancel={() => { onEditChange(false) }}
         onSave={() => { onEditChange(false) }}
       >
-        {({ isEditing }) => (
-          <Grid className={style['nics-container']}>
-            { isEditing && canCreateNic && (
-              <Row key={`${idPrefix}-new`} id={`${idPrefix}-new`}>
-                <Col>
-                  <NicEditor
-                    idPrefix={`${idPrefix}-new`}
-                    nextNicName={this.state.nextNicName}
-                    vnicProfileList={this.state.filteredVnicList}
-                    onSave={this.onCreateConfirm}
-                    trigger={({ onClick }) => (
-                      <div className={itemStyle['create-block']}>
-                        <a href='#' id={`${idPrefix}-new-button`} onClick={onClick}>
-                          <Icon className={itemStyle['create-icon']} type='fa' name='plus' />
-                          <span className={itemStyle['create-text']} >{msg.nicActionCreateNew()}</span>
-                        </a>
-                      </div>
-                    )}
-                  />
-                </Col>
-              </Row>
-            )}
-
-            { nicList.length === 0 && (
-              <Row>
-                <Col>
-                  <div className={itemStyle['no-items']} id={`${idPrefix}-no-nics`}>{msg.noNics()}</div>
-                </Col>
-              </Row>
-            )}
-            { nicList.length > 0 && nicList.map(nic => (
-              <Row key={nic.id} id={`${idPrefix}-${nic.name}`}>
-                <Col style={{ display: 'block' }}>
-                  <NicListItem
-                    showNicIPs={showNicIPs}
-                    idPrefix={`${idPrefix}-${nic.name}`}
-                    nic={nic}
-                    vmStatus={vmStatus}
-                    vnicProfileList={this.state.filteredVnicList}
-                    isEditing={isEditing}
-                    onEdit={nic.canEdit ? this.onEditConfirm : undefined}
-                    onDelete={nic.canDelete ? this.onDeleteConfirm : undefined}
-                  />
-                </Col>
-              </Row>
-            )
-            )}
-          </Grid>
-        )}
+        <Grid className={style['nics-container']}>
+          { canEditTheCard && canCreateNic && (
+            <Row key={`${idPrefix}-new`} id={`${idPrefix}-new`}>
+              <Col>
+                <NicEditor
+                  idPrefix={`${idPrefix}-new`}
+                  nextNicName={this.state.nextNicName}
+                  vnicProfileList={this.state.filteredVnicList}
+                  onSave={this.onCreateConfirm}
+                  trigger={({ onClick }) => (
+                    <div className={itemStyle['create-block']}>
+                      <a href='#' id={`${idPrefix}-new-button`} onClick={onClick}>
+                        <PlusIcon className={itemStyle['create-icon']}/>
+                        <span className={itemStyle['create-text']} >{msg.nicActionCreateNew()}</span>
+                      </a>
+                    </div>
+                  )}
+                />
+              </Col>
+            </Row>
+          )}
+
+          { nicList.length === 0 && (
+            <Row>
+              <Col>
+                <div className={itemStyle['no-items']} id={`${idPrefix}-no-nics`}>{msg.noNics()}</div>
+              </Col>
+            </Row>
+          )}
+          { nicList.length > 0 && nicList.map(nic => (
+            <Row key={nic.id} id={`${idPrefix}-${nic.name}`}>
+              <Col style={{ display: 'block' }}>
+                <NicListItem
+                  showNicIPs={showNicIPs}
+                  idPrefix={`${idPrefix}-${nic.name}`}
+                  nic={nic}
+                  vmStatus={vmStatus}
+                  vnicProfileList={this.state.filteredVnicList}
+                  isEditing={canEditTheCard}
+                  onEdit={nic.canEdit ? this.onEditConfirm : undefined}
+                  onDelete={nic.canDelete ? this.onDeleteConfirm : undefined}
+                />
+              </Col>
+            </Row>
+          )
+          )}
+        </Grid>
       </BaseCard>
     )
   }
diff --git a/src/components/VmDetails/cards/NicsCard/style.css b/src/components/VmDetails/cards/NicsCard/style.css
index 13e7487..2e8112a 100644
--- a/src/components/VmDetails/cards/NicsCard/style.css
+++ b/src/components/VmDetails/cards/NicsCard/style.css
@@ -18,10 +18,6 @@
   color: red;
 }
 
-.vnic-info {
-  padding-left: 5px;
-}
-
 .ip4-container,
 .ip6-container {
   padding: 0 5px 3px 5px;
diff --git a/src/components/VmDetails/cards/OverviewCard/index.js b/src/components/VmDetails/cards/OverviewCard/index.js
index e74e2ba..8f4bd28 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 1bd4fe9..6111c3b 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 20f9d15..c4bf3da 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js
@@ -5,22 +5,19 @@ 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'
+import itemStyle from '../../itemListStyle.css'
 
 class NewSnapshotModal extends Component {
   constructor (props) {
@@ -46,12 +43,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,14 +67,13 @@ 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' />
-          { msg.createSnapshot() }
+      <div className={itemStyle['create-block']}>
+        <a onClick={this.props.disabled ? () => {} : this.open} id={`${idPrefix}-button`} className={`${this.props.disabled && 'disabled'}`}>
+          <PlusIcon className={itemStyle['create-icon']}/>
+          <span className={itemStyle['create-text']}>{ msg.createSnapshot() }</span>
         </a>
 
         <Modal
@@ -102,49 +98,36 @@ class NewSnapshotModal extends Component {
 
           ]}
         >
-          <Form onSubmit={this.handleSave} horizontal>
-            <Col sm={12}>
-              <Alert
-                variant='info'
-                isInline
-                title={msg.details()}
-                style={{ marginBottom: '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 197e249..c8209a3 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 30e2fd0..b216eda 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js
@@ -4,12 +4,10 @@ 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 itemStyle from '../../itemListStyle.css'
 import style from './style.css'
 
 import { withMsg } from '_/intl'
@@ -20,13 +18,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 +40,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 +108,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`}>
+          <a id={`${this.props.id}-info`} className={itemStyle['item-action']}>
             <InfoTooltip
               id={`${this.props.id}-info-tt`}
               tooltip={msg.details()}
+              className={style.black}
             />
           </a>
-        </OverlayTrigger>
+        </SnapshotDetail >
       )
 
       if (!this.props.hideActions) {
@@ -142,9 +137,9 @@ class SnapshotItem extends React.Component {
             snapshot={this.props.snapshot}
             vmId={this.props.vmId}
             trigger={({ onClick }) => (
-              <SnapshotAction key='restore' id={`${this.props.id}-restore`} onClick={onClick} disabled={isRestoreDisabled}>
+              <SnapshotAction key='restore' id={`${this.props.id}-restore`} onClick={onClick} disabled={isRestoreDisabled} className={itemStyle['item-action']}>
                 <Tooltip id={`${this.props.id}-restore-tt`} tooltip={msg.snapshotRestore()}>
-                  <Icon type='fa' name='play-circle' />
+                  <PlayIcon className={isRestoreDisabled ? '' : style.black}/>
                 </Tooltip>
               </SnapshotAction>
             )}
@@ -160,9 +155,9 @@ class SnapshotItem extends React.Component {
             title={msg.permanentlyDeleteSnapshot()}
             onDelete={this.props.onSnapshotDelete}
             trigger={({ onClick }) => (
-              <SnapshotAction key='delete' id={`${this.props.id}-delete`} disabled={isActionsDisabled} onClick={onClick}>
+              <SnapshotAction key='delete' id={`${this.props.id}-delete`} disabled={isActionsDisabled} onClick={onClick} className={itemStyle['item-action']}>
                 <Tooltip id={`${this.props.id}-delete-tt`} tooltip={msg.snapshotDelete()}>
-                  <Icon type='pf' name='delete' />
+                  <TrashIcon className={isActionsDisabled ? '' : style.red}/>
                 </Tooltip>
               </SnapshotAction>
             )}
@@ -185,25 +180,25 @@ 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
       }
     }
 
     return (
-      <div className={style['snapshot-item']} id={this.props.id}>
-        <span className={style['snapshot-item-status']} id={`${this.props.id}-status-icon`}>{statusIcon}</span>
-        <span className={style['snapshot-item-name']} id={`${this.props.id}-description`}>
-          {getMinimizedString(this.props.snapshot.get('description'), MAX_DESCRIPTION_SIZE)}
-          <span className={style['snapshot-item-time']} id={`${this.props.id}-time`}>{`(${formatHowLongAgo(this.props.snapshot.get('date'))})`}</span>
+      <div className={itemStyle['item-row']} id={this.props.id}>
+        <span className={itemStyle['item-row-status']} id={`${this.props.id}-status-icon`}>{statusIcon}</span>
+        <span className={itemStyle['item-row-info']} id={`${this.props.id}-description`}>
+          <span className={style['snapshot-name-info']}>{getMinimizedString(this.props.snapshot.get('description'), MAX_DESCRIPTION_SIZE)}</span>
+          <span className={itemStyle['item-extra_info']} id={`${this.props.id}-time`}>{`(${formatHowLongAgo(this.props.snapshot.get('date'))})`}</span>
         </span>
-        <span className={style['snapshot-item-actions']} id={`${this.props.id}-actions`}>{ buttons }</span>
+        <span className={itemStyle['item-row-actions']} id={`${this.props.id}-actions`}>{ buttons }</span>
       </div>
     )
   }
diff --git a/src/components/VmDetails/cards/SnapshotsCard/index.js b/src/components/VmDetails/cards/SnapshotsCard/index.js
index c2735bb..b7b1dd6 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/index.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/index.js
@@ -2,14 +2,17 @@ import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
-import { MsgContext } from '_/intl'
+import { MsgContext, withMsg } from '_/intl'
 import { PendingTaskTypes } from '_/reducers/pendingTasks'
 
 import style from './style.css'
+import itemStyle from '../../itemListStyle.css'
 
 import BaseCard from '../../BaseCard'
 import NewSnapshotModal from './NewSnapshotModal'
 import SnapshotItem from './SnapshotItem'
+import { VirtualMachineIcon } from '@patternfly/react-icons/dist/esm/icons'
+import { Grid, Row, Col } from '_/components/Grid'
 
 const DOWN_STATUS = 'down'
 const RUNNING_STATUS = 'up'
@@ -24,31 +27,46 @@ const Snapshots = ({
   isVmDown,
   canUserManipulateSnapshot,
   isVmRunning,
+  msg,
 }) => {
   const isVmInPreview = !!snapshots.find(snapshot => snapshot.get('status') === 'in_preview')
   const isVmLocked = !!snapshots.find(snapshot => snapshot.get('status') === 'locked')
   const isActionDisabled = isVmInPreview || beingCreated || beingRestored || beingDeleted || isVmLocked || !canUserManipulateSnapshot
   return (
-    <>
+    <Grid className={style['snapshot-container']}>
       { canUserManipulateSnapshot && (
-        <div className={style['snapshot-create']}>
-          <NewSnapshotModal vmId={vmId} disabled={isActionDisabled} idPrefix={`${idPrefix}-new-snapshot`} isVmRunning={isVmRunning} />
-        </div>
+        <Row key={`${idPrefix}-snapshot-add`}>
+          <Col>
+            <NewSnapshotModal vmId={vmId} disabled={isActionDisabled} idPrefix={`${idPrefix}-new-snapshot`} isVmRunning={isVmRunning} />
+          </Col>
+        </Row>
       ) }
-      {
-        snapshots.sort((a, b) => b.get('date') - a.get('date')).map((snapshot) => (
-          <SnapshotItem
-            key={snapshot.get('id')}
-            id={`${idPrefix}-${snapshot.get('description').replace(/[\s]+/g, '_')}`}
-            snapshot={snapshot}
-            vmId={vmId}
-            isEditing={!isActionDisabled}
-            hideActions={!canUserManipulateSnapshot}
-            isVmDown={isVmDown}
-          />
-        ))
+
+      { snapshots.size === 0 && (
+        <Row key={`${idPrefix}-no-snapshot`}>
+          <Col>
+            <div className={itemStyle['no-items']} id={`${idPrefix}-no-snapshots`}>{msg.noSnapshots()}</div>
+          </Col>
+        </Row>
+      )}
+
+      { snapshots.size > 0 && snapshots.sort((a, b) => b.get('date') - a.get('date')).map((snapshot) => (
+        <Row key={`${idPrefix}-${snapshot.get('description').replace(/[\s]+/g, '_')}`}>
+          <Col style={{ display: 'block' }}>
+            <SnapshotItem
+              key={snapshot.get('id')}
+              id={`${idPrefix}-${snapshot.get('description').replace(/[\s]+/g, '_')}`}
+              snapshot={snapshot}
+              vmId={vmId}
+              isEditing={!isActionDisabled}
+              hideActions={!canUserManipulateSnapshot}
+              isVmDown={isVmDown}
+            />
+          </Col>
+        </Row>
+      ))
       }
-    </>
+    </Grid>
   )
 }
 Snapshots.propTypes = {
@@ -61,6 +79,7 @@ Snapshots.propTypes = {
   isVmDown: PropTypes.bool,
   isVmRunning: PropTypes.bool,
   canUserManipulateSnapshot: PropTypes.bool,
+  msg: PropTypes.object.isRequired,
 }
 
 const ConnectedSnapshots = connect(
@@ -72,7 +91,7 @@ const ConnectedSnapshots = connect(
       beingDeleted: !!vmTasks.find(task => task.type === PendingTaskTypes.SNAPSHOT_REMOVAL),
     }
   }
-)(Snapshots)
+)(withMsg(Snapshots))
 
 /**
  * List of Snapshots taken of a VM
@@ -84,7 +103,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 0280cf1..e83595c 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/style.css
+++ b/src/components/VmDetails/cards/SnapshotsCard/style.css
@@ -1,3 +1,15 @@
+.snapshot-container {
+  width: auto;
+  margin-left: -15px; /* max is -20px to edge of the containing card */
+  margin-right: -15px;
+}
+
+.snapshot-name-info {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .snapshot-detail-container {
     display: flex;
     width: 100%;
@@ -67,68 +79,23 @@ div.popover {
 }
 
 .green {
-  color: #3B9D2E;
-}
-
-.status-icon span {
-  margin-right: 5px;
+  color: #3f9c35;
 }
 
-.snapshot-disk-list {
-  display: table;
-}
-
-.snapshot-item {
-  display: table-row;
-}
-
-.snapshot-item a {
-  cursor: pointer;
+.black {
   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;
-}
-
-.snapshot-item-name {
-  display: table-cell;
-  padding-left: 5px;
-  padding-right: 5px;
 }
 
-.snapshot-item-time {
-  color: #808080;
-  display: inline-block;
-  overflow-wrap: break-word;
+.red {
+  color: red;
 }
 
-.snapshot-item-actions {
-  display: table-cell;
-  white-space: nowrap;
-  padding-left: 5px;
-}
-
-.snapshot-item-actions a + a {
-  margin-left: 5px;
-}
-
-.snapshot-create a span {
+.status-icon svg {
   margin-right: 5px;
 }
 
-.snapshot-create a {
-  cursor: pointer;
-  font-size: 14px;
+.snapshot-disk-list {
+  display: table;
 }
 
 .no-nics, .no-disks {
diff --git a/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js b/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
index 6026fce..5df8568 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 257f37a..0866691 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 da8af84..bdfbae4 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 860f234..36a4937 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 9135375..626daa9 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 c2f3bda..c56fbd3 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 0000000..e29bc38
--- /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 ea4599b..92435e7 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 ae0c193..2851cfd 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/itemListStyle.css b/src/components/VmDetails/itemListStyle.css
index 9467f63..6e6352a 100644
--- a/src/components/VmDetails/itemListStyle.css
+++ b/src/components/VmDetails/itemListStyle.css
@@ -41,6 +41,7 @@
   align-items: baseline;
 
   max-width: 100%;
+  overflow: hidden;
 }
 
 .item-row .item-row-info.no-status {
@@ -61,9 +62,16 @@
 }
 
 .item-row .item-row-actions .item-action + .item-action {
-  padding-left: 5px;
+  margin-left: 5px;
 }
 
 .item-row .item-row-actions .item-action-disabled {
   color: #8B8D8F;
 }
+
+.item-extra_info {
+  margin-left: 5px;
+  color: #808080;
+  display: inline-block;
+  overflow-wrap: break-word;
+}
diff --git a/src/components/VmDetails/style.css b/src/components/VmDetails/style.css
index 1358257..7effead 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,27 +32,31 @@
 }
 
 /* ---> 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 {
   margin-right: 6px; /* match the left margin on .badge */
-  vertical-align: top;
 }
 
 .base-card-item-count-badge {
-  vertical-align: top;
+  margin-left: 6px;
+  vertical-align: text-bottom;
 }
 
 .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;
+  }
+}