diff --git a/src/account-settings/EditableField.jsx b/src/account-settings/EditableField.jsx
index 725f7ad2a..fac1fe85d 100644
--- a/src/account-settings/EditableField.jsx
+++ b/src/account-settings/EditableField.jsx
@@ -3,10 +3,9 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Button, Form, StatefulButton,
+  ActionRow, Button, Card, Form, StatefulButton,
 } from '@openedx/paragon';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { EditOutline } from '@openedx/paragon/icons';
 
 import SwitchContent from './SwitchContent';
 import messages from './AccountSettingsPage.messages';
@@ -94,83 +93,95 @@ const EditableField = (props) => {
   };
 
   return (
-    <SwitchContent
-      expression={isEditing ? 'editing' : 'default'}
-      cases={{
-        editing: (
-          <>
-            <form onSubmit={handleSubmit} data-testid="editable-field-form">
-              <Form.Group
-                controlId={id}
-                isInvalid={error != null}
-              >
-                <Form.Label size="sm" className="h6 d-block" htmlFor={id}>{label}</Form.Label>
-                <Form.Control
-                  data-hj-suppress
-                  name={name}
-                  id={id}
-                  type={type}
-                  value={value}
-                  onChange={handleChange}
-                  data-testid="editable-field-textbox"
-                  {...others}
-                />
-                {!!helpText && <Form.Text>{helpText}</Form.Text>}
-                {error != null && <Form.Control.Feedback hasIcon={false} data-testid="editable-field-error">{error}</Form.Control.Feedback>}
-                {others.children}
-              </Form.Group>
-              <p>
-                <StatefulButton
-                  type="submit"
-                  className="mr-2"
-                  state={saveState}
-                  labels={{
-                    default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
-                  }}
-                  onClick={(e) => {
-                    // Swallow clicks if the state is pending.
-                    // We do this instead of disabling the button to prevent
-                    // it from losing focus (disabled elements cannot have focus).
-                    // Disabling it would causes upstream issues in focus management.
-                    // Swallowing the onSubmit event on the form would be better, but
-                    // we would have to add that logic for every field given our
-                    // current structure of the application.
-                    if (saveState === 'pending') { e.preventDefault(); }
-                  }}
-                  disabledStates={[]}
-                  data-testid="editable-field-save"
-                />
-                <Button
-                  variant="outline-primary"
-                  onClick={handleCancel}
-                  data-testid="editable-field-cancel"
-                  data-clicked="cancel"
-                >
-                  {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
-                </Button>
-              </p>
-            </form>
-            {['name', 'verified_name'].includes(name) && (
-              <CertificatePreference fieldName={name} data-testid="editable-field-certificate-preference" />
-            )}
-          </>
-        ),
-        default: (
-          <div className="form-group">
-            <div className="d-flex align-items-start">
-              <h6 aria-level="3">{label}</h6>
-              {isEditable ? (
-                <Button variant="link" onClick={handleEdit} className="ml-3" data-testid="editable-field-edit" data-clicked="edit">
-                  <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />{intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
-                </Button>
-              ) : null}
-            </div>
-            <p data-hj-suppress className={classNames('text-truncate', { 'grayed-out': isGrayedOut })}>{renderValue(value)}</p>
-            <p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
-          </div>
-        ),
-      }}
-    />
+    <Card className="mb-4">
+      <SwitchContent
+        expression={isEditing ? 'editing' : 'default'}
+        cases={{
+          editing: (
+            <Card.Body>
+              <Card.Section>
+                <Form onSubmit={handleSubmit} data-testid="editable-field-form">
+                  <Form.Group
+                    controlId={id}
+                    isInvalid={error != null}
+                  >
+                    <Form.Label size="sm" className="h6 d-block" htmlFor={id}>{label}</Form.Label>
+                    <Form.Control
+                      data-hj-suppress
+                      name={name}
+                      id={id}
+                      type={type}
+                      value={value}
+                      onChange={handleChange}
+                      data-testid="editable-field-textbox"
+                      {...others}
+                    />
+                    {!!helpText && <Form.Text>{helpText}</Form.Text>}
+                    {error != null && <Form.Control.Feedback hasIcon={false} data-testid="editable-field-error">{error}</Form.Control.Feedback>}
+                    {others.children}
+                  </Form.Group>
+                  <p>
+                    <StatefulButton
+                      type="submit"
+                      className="mr-2"
+                      state={saveState}
+                      labels={{
+                        default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
+                      }}
+                      onClick={(e) => {
+                      // Swallow clicks if the state is pending.
+                      // We do this instead of disabling the button to prevent
+                      // it from losing focus (disabled elements cannot have focus).
+                      // Disabling it would causes upstream issues in focus management.
+                      // Swallowing the onSubmit event on the form would be better, but
+                      // we would have to add that logic for every field given our
+                      // current structure of the application.
+                        if (saveState === 'pending') { e.preventDefault(); }
+                      }}
+                      disabledStates={[]}
+                      data-testid="editable-field-save"
+                    />
+                    <Button
+                      variant="outline-primary"
+                      onClick={handleCancel}
+                      data-testid="editable-field-cancel"
+                      data-clicked="cancel"
+                    >
+                      {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
+                    </Button>
+                  </p>
+                </Form>
+                {['name', 'verified_name'].includes(name) && (
+                <CertificatePreference fieldName={name} data-testid="editable-field-certificate-preference" />
+                )}
+              </Card.Section>
+            </Card.Body>
+          ),
+          default: (
+            <>
+              <Card.Header
+                title={label}
+                subtitle={<p data-hj-suppress className={classNames('text-truncate', { 'grayed-out': isGrayedOut })}>{renderValue(value)}</p>}
+                actions={isEditable && (
+                <ActionRow>
+                  <Button variant="outline-primary" onClick={handleEdit} data-testid="editable-field-edit" data-clicked="edit" iconBefore={EditOutline}>
+                    {intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
+                  </Button>
+                </ActionRow>
+                )}
+              />
+              {(renderConfirmationMessage() || helpText) && (
+                <Card.Body>
+                  <Card.Section>
+                    <p className="small text-muted mt-n2 mb-0">{renderConfirmationMessage() || helpText}</p>
+                  </Card.Section>
+                </Card.Body>
+              )}
+            </>
+          ),
+        }}
+      />
+    </Card>
   );
 };
 
diff --git a/src/account-settings/EditableSelectField.jsx b/src/account-settings/EditableSelectField.jsx
index 1044c272a..eb4043288 100644
--- a/src/account-settings/EditableSelectField.jsx
+++ b/src/account-settings/EditableSelectField.jsx
@@ -2,10 +2,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Button, Form, StatefulButton,
+  ActionRow, Button, Card, Form, StatefulButton,
 } from '@openedx/paragon';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { EditOutline } from '@openedx/paragon/icons';
 
 import SwitchContent from './SwitchContent';
 import messages from './AccountSettingsPage.messages';
@@ -122,80 +121,92 @@ const EditableSelectField = (props) => {
   });
 
   return (
-    <SwitchContent
-      expression={isEditing ? 'editing' : 'default'}
-      cases={{
-        editing: (
-          <>
-            <form onSubmit={handleSubmit}>
-              <Form.Group
-                controlId={id}
-                isInvalid={error != null}
-              >
-                <Form.Label size="sm" className="h6 d-block" htmlFor={id}>{label}</Form.Label>
-                <Form.Control
-                  data-hj-suppress
-                  name={name}
-                  id={id}
-                  type={type}
-                  as={type}
-                  value={value}
-                  onChange={handleChange}
-                  {...others}
-                >
-                  {options.length > 0 && selectOptions}
-                </Form.Control>
-                {!!helpText && <Form.Text>{helpText}</Form.Text>}
-                {error != null && <Form.Control.Feedback>{error}</Form.Control.Feedback>}
-                {others.children}
-              </Form.Group>
-              <p>
-                <StatefulButton
-                  type="submit"
-                  className="mr-2"
-                  state={saveState}
-                  labels={{
-                    default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
-                  }}
-                  onClick={(e) => {
-                    // Swallow clicks if the state is pending.
-                    // We do this instead of disabling the button to prevent
-                    // it from losing focus (disabled elements cannot have focus).
-                    // Disabling it would causes upstream issues in focus management.
-                    // Swallowing the onSubmit event on the form would be better, but
-                    // we would have to add that logic for every field given our
-                    // current structure of the application.
-                    if (saveState === 'pending') { e.preventDefault(); }
-                  }}
-                  disabledStates={[]}
-                />
-                <Button
-                  variant="outline-primary"
-                  onClick={handleCancel}
-                >
-                  {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
-                </Button>
-              </p>
-            </form>
-            {['name', 'verified_name'].includes(name) && <CertificatePreference fieldName={name} />}
-          </>
-        ),
-        default: (
-          <div className="form-group">
-            <div className="d-flex align-items-start">
-              <h6 aria-level="3">{label}</h6>
-              {isEditable ? (
-                <Button variant="link" onClick={handleEdit} className="ml-3">
-                  <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />{intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
-                </Button>
-              ) : null}
-            </div>
-            <p data-hj-suppress className={isGrayedOut ? 'grayed-out' : null}>{renderValue(value)}</p>
-            <p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
-          </div>
-        ),
-      }}
-    />
+    <Card className="mb-4">
+      <SwitchContent
+        expression={isEditing ? 'editing' : 'default'}
+        cases={{
+          editing: (
+            <Card.Body>
+              <Card.Section>
+                <Form onSubmit={handleSubmit}>
+                  <Form.Group
+                    controlId={id}
+                    isInvalid={error != null}
+                  >
+                    <Form.Label size="sm" className="h6 d-block" htmlFor={id}>{label}</Form.Label>
+                    <Form.Control
+                      data-hj-suppress
+                      name={name}
+                      id={id}
+                      type={type}
+                      as={type}
+                      value={value}
+                      onChange={handleChange}
+                      {...others}
+                    >
+                      {options.length > 0 && selectOptions}
+                    </Form.Control>
+                    {!!helpText && <Form.Text>{helpText}</Form.Text>}
+                    {error != null && <Form.Control.Feedback>{error}</Form.Control.Feedback>}
+                    {others.children}
+                  </Form.Group>
+                  <p>
+                    <StatefulButton
+                      type="submit"
+                      className="mr-2"
+                      state={saveState}
+                      labels={{
+                        default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
+                      }}
+                      onClick={(e) => {
+                      // Swallow clicks if the state is pending.
+                      // We do this instead of disabling the button to prevent
+                      // it from losing focus (disabled elements cannot have focus).
+                      // Disabling it would causes upstream issues in focus management.
+                      // Swallowing the onSubmit event on the form would be better, but
+                      // we would have to add that logic for every field given our
+                      // current structure of the application.
+                        if (saveState === 'pending') { e.preventDefault(); }
+                      }}
+                      disabledStates={[]}
+                    />
+                    <Button
+                      variant="outline-primary"
+                      onClick={handleCancel}
+                    >
+                      {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
+                    </Button>
+                  </p>
+                </Form>
+                {['name', 'verified_name'].includes(name) && <CertificatePreference fieldName={name} />}
+              </Card.Section>
+            </Card.Body>
+          ),
+          default: (
+            <>
+              <Card.Header
+                title={label}
+                subtitle={<p data-hj-suppress className={isGrayedOut ? 'grayed-out' : null}>{renderValue(value)}</p>}
+                actions={isEditable && (
+                <ActionRow>
+                  <Button variant="outline-primary" onClick={handleEdit} data-testid="editable-field-edit" data-clicked="edit" iconBefore={EditOutline}>
+                    {intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
+                  </Button>
+                </ActionRow>
+                )}
+              />
+              {(renderConfirmationMessage() || helpText) && (
+                <Card.Body>
+                  <Card.Section>
+                    <p className="small text-muted mt-n2 mb-0">{renderConfirmationMessage() || helpText}</p>
+                  </Card.Section>
+                </Card.Body>
+              )}
+            </>
+          ),
+        }}
+      />
+    </Card>
   );
 };
 
diff --git a/src/account-settings/EmailField.jsx b/src/account-settings/EmailField.jsx
index c2402701c..f0afe907f 100644
--- a/src/account-settings/EmailField.jsx
+++ b/src/account-settings/EmailField.jsx
@@ -2,10 +2,11 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
-  Button, StatefulButton, Form, Tooltip, OverlayTrigger,
+  ActionRow, Button, Card, StatefulButton, Form, Tooltip, OverlayTrigger,
 } from '@openedx/paragon';
+import { EditOutline } from '@openedx/paragon/icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationTriangle, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 import Alert from './Alert';
 import SwitchContent from './SwitchContent';
@@ -100,82 +101,97 @@ const EmailField = (props) => {
   };
 
   return (
-    <SwitchContent
-      expression={isEditing ? 'editing' : 'default'}
-      cases={{
-        editing: (
-          <form onSubmit={handleSubmit}>
-            <Form.Group
-              controlId={id}
-              isInvalid={error != null}
-            >
-              <Form.Label className="h6 d-block" htmlFor={id}>{label}</Form.Label>
-              <Form.Control
-                data-hj-suppress
-                name={name}
-                id={id}
-                type="email"
-                value={value}
-                onChange={handleChange}
-              />
-              {!!helpText && <Form.Text>{helpText}</Form.Text>}
-              {error != null && <Form.Control.Feedback hasIcon={false}>{error}</Form.Control.Feedback>}
-            </Form.Group>
-            <p>
-              <StatefulButton
-                type="submit"
-                className="mr-2"
-                state={saveState}
-                labels={{
-                  default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
-                }}
-                onClick={(e) => {
-                  // Swallow clicks if the state is pending.
-                  // We do this instead of disabling the button to prevent
-                  // it from losing focus (disabled elements cannot have focus).
-                  // Disabling it would causes upstream issues in focus management.
-                  // Swallowing the onSubmit event on the form would be better, but
-                  // we would have to add that logic for every field given our
-                  // current structure of the application.
-                  if (saveState === 'pending') { e.preventDefault(); }
-                }}
-                disabledStates={[]}
+    <Card className="mb-4">
+      <SwitchContent
+        expression={isEditing ? 'editing' : 'default'}
+        cases={{
+          editing: (
+            <Card.Body>
+              <Card.Section>
+                <Form onSubmit={handleSubmit}>
+                  <Form.Group
+                    controlId={id}
+                    isInvalid={error != null}
+                  >
+                    <Form.Label className="h6 d-block" htmlFor={id}>{label}</Form.Label>
+                    <Form.Control
+                      data-hj-suppress
+                      name={name}
+                      id={id}
+                      type="email"
+                      value={value}
+                      onChange={handleChange}
+                    />
+                    {!!helpText && <Form.Text>{helpText}</Form.Text>}
+                    {error != null && <Form.Control.Feedback hasIcon={false}>{error}</Form.Control.Feedback>}
+                  </Form.Group>
+                  <p>
+                    <StatefulButton
+                      type="submit"
+                      className="mr-2"
+                      state={saveState}
+                      labels={{
+                        default: intl.formatMessage(messages['account.settings.editable.field.action.save']),
+                      }}
+                      onClick={(e) => {
+                      // Swallow clicks if the state is pending.
+                      // We do this instead of disabling the button to prevent
+                      // it from losing focus (disabled elements cannot have focus).
+                      // Disabling it would causes upstream issues in focus management.
+                      // Swallowing the onSubmit event on the form would be better, but
+                      // we would have to add that logic for every field given our
+                      // current structure of the application.
+                        if (saveState === 'pending') { e.preventDefault(); }
+                      }}
+                      disabledStates={[]}
+                    />
+                    <Button
+                      variant="outline-primary"
+                      onClick={handleCancel}
+                    >
+                      {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
+                    </Button>
+                  </p>
+                </Form>
+              </Card.Section>
+            </Card.Body>
+          ),
+          default: (
+            <>
+              <Card.Header
+                title={label}
+                subtitle={(
+                  <OverlayTrigger
+                    placement="top"
+                    overlay={(
+                      <Tooltip id={`tooltip-${name}`} variant="light" className="d-sm-none">
+                        {renderValue()}
+                      </Tooltip>
+                  )}
+                  >
+                    <p data-hj-suppress className="text-truncate">{renderValue()}</p>
+                  </OverlayTrigger>
+              )}
+                actions={isEditable && (
+                <ActionRow>
+                  <Button variant="outline-primary" onClick={handleEdit} data-testid="editable-field-edit" data-clicked="edit" iconBefore={EditOutline}>
+                    {intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
+                  </Button>
+                </ActionRow>
+                )}
               />
-              <Button
-                variant="outline-primary"
-                onClick={handleCancel}
-              >
-                {intl.formatMessage(messages['account.settings.editable.field.action.cancel'])}
-              </Button>
-            </p>
-          </form>
-        ),
-        default: (
-          <div className="form-group">
-            <div className="d-flex align-items-start">
-              <h6 aria-level="3">{label}</h6>
-              {isEditable ? (
-                <Button variant="link" onClick={handleEdit} className="ml-3">
-                  <FontAwesomeIcon className="mr-1" icon={faPencilAlt} />
-                  {intl.formatMessage(messages['account.settings.editable.field.action.edit'])}
-                </Button>
-              ) : null}
-            </div>
-            <OverlayTrigger
-              placement="top"
-              overlay={(
-                <Tooltip id={`tooltip-${name}`} variant="light" className="d-sm-none">
-                  {renderValue()}
-                </Tooltip>
+              {(renderConfirmationMessage() || helpText) && (
+                <Card.Body>
+                  <Card.Section>
+                    <p className="small text-muted mt-n2 mb-0">{renderConfirmationMessage() || helpText}</p>
+                  </Card.Section>
+                </Card.Body>
               )}
-            >
-              <p data-hj-suppress className="text-truncate">{renderValue()}</p>
-            </OverlayTrigger>
-            {renderConfirmationMessage() || <p className="small text-muted mt-n2">{helpText}</p>}
-          </div>
-        ),
-      }}
-    />
+            </>
+          ),
+        }}
+      />
+    </Card>
   );
 };
 
diff --git a/src/account-settings/reset-password/ResetPassword.jsx b/src/account-settings/reset-password/ResetPassword.jsx
index ea0a75f52..1cca33804 100644
--- a/src/account-settings/reset-password/ResetPassword.jsx
+++ b/src/account-settings/reset-password/ResetPassword.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { StatefulButton } from '@openedx/paragon';
+import { Card, StatefulButton } from '@openedx/paragon';
 
 import { resetPassword } from './data/actions';
 import messages from './messages';
@@ -13,40 +13,48 @@ const ResetPassword = (props) => {
   const intl = useIntl();
 
   return (
-    <div className="form-group">
-      <h6 aria-level="3">
-        <FormattedMessage
-          id="account.settings.editable.field.password.reset.label"
-          defaultMessage="Password"
-          description="The password label in account settings"
-        />
-      </h6>
-      <p>
-        <StatefulButton
-          variant="link"
-          state={status}
-          onClick={(e) => {
-            // Swallow clicks if the state is pending.
-            // We do this instead of disabling the button to prevent
-            // it from losing focus (disabled elements cannot have focus).
-            // Disabling it would causes upstream issues in focus management.
-            // Swallowing the onSubmit event on the form would be better, but
-            // we would have to add that logic for every field given our
-            // current structure of the application.
-            if (status === 'pending') {
-              e.preventDefault();
-            }
-            props.resetPassword(email);
-          }}
-          disabledStates={[]}
-          labels={{
-            default: intl.formatMessage(messages['account.settings.editable.field.password.reset.button']),
-          }}
-        />
-      </p>
-      {status === 'complete' ? <ConfirmationAlert email={email} /> : null}
-      {status === 'forbidden' ? <RequestInProgressAlert /> : null}
-    </div>
+    <Card className="mb-4">
+      <Card.Header
+        title={(
+          <FormattedMessage
+            id="account.settings.editable.field.password.reset.label"
+            defaultMessage="Password"
+            description="The password label in account settings"
+          />
+        )}
+      />
+      <Card.Body>
+        <Card.Section>
+          <StatefulButton
+            variant="link"
+            state={status}
+            onClick={(e) => {
+              // Swallow clicks if the state is pending.
+              // We do this instead of disabling the button to prevent
+              // it from losing focus (disabled elements cannot have focus).
+              // Disabling it would causes upstream issues in focus management.
+              // Swallowing the onSubmit event on the form would be better, but
+              // we would have to add that logic for every field given our
+              // current structure of the application.
+              if (status === 'pending') {
+                e.preventDefault();
+              }
+              props.resetPassword(email);
+            }}
+            disabledStates={[]}
+            labels={{
+              default: intl.formatMessage(messages['account.settings.editable.field.password.reset.button']),
+            }}
+          />
+        </Card.Section>
+        {status && (
+          <Card.Section>
+            {status === 'complete' ? <ConfirmationAlert email={email} /> : null}
+            {status === 'forbidden' ? <RequestInProgressAlert /> : null}
+          </Card.Section>
+        )}
+      </Card.Body>
+    </Card>
   );
 };
 
diff --git a/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap b/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap
index dc26695a0..28853054d 100644
--- a/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap
+++ b/src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap
@@ -2,68 +2,97 @@
 
 exports[`EditableSelectField renders EditableSelectField correctly with editing disabled 1`] = `
 <div
-  className="pgn-transition-replace-group position-relative"
-  style={
-    {
-      "height": null,
-    }
-  }
+  className="mb-4 pgn__card pgn__card-light card"
+  tabIndex={-1}
 >
   <div
+    className="pgn-transition-replace-group position-relative"
     style={
       {
-        "padding": ".1px 0",
+        "height": null,
       }
     }
   >
     <div
-      className="form-group"
+      style={
+        {
+          "padding": ".1px 0",
+        }
+      }
     >
       <div
-        className="d-flex align-items-start"
+        className="pgn__card-header"
       >
-        <h6
-          aria-level="3"
+        <div
+          className="pgn__card-header-content"
         >
-          Main Label
-        </h6>
-        <button
-          className="ml-3 btn btn-link"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
+          <div
+            className="pgn__card-header-title-md"
+          >
+            Main Label
+          </div>
+          <div
+            className="pgn__card-header-subtitle-md"
+          >
+            <p
+              className={null}
+              data-hj-suppress={true}
+            >
+              Test Field
+            </p>
+          </div>
+        </div>
+        <div
+          className="pgn__card-header-actions"
         >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            style={{}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="pgn__action-row"
           >
-            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
-              fill="currentColor"
-              style={{}}
-            />
-          </svg>
-          Edit
-        </button>
+            <button
+              className="btn btn-outline-primary"
+              data-clicked="edit"
+              data-testid="editable-field-edit"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="pgn__icon btn-icon-before"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              Edit
+            </button>
+          </div>
+        </div>
       </div>
-      <p
-        className={null}
-        data-hj-suppress={true}
-      >
-        Test Field
-      </p>
-      <p
-        className="small text-muted mt-n2"
+      <div
+        className="pgn__card-body"
       >
-        Default Confirmation Message
-      </p>
+        <div
+          className="pgn__card-section"
+        >
+          <p
+            className="small text-muted mt-n2"
+          >
+            Default Confirmation Message
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -71,205 +100,248 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
 
 exports[`EditableSelectField renders EditableSelectField correctly with editing enabled 1`] = `
 <div
-  className="pgn-transition-replace-group position-relative"
-  style={
-    {
-      "height": null,
-    }
-  }
+  className="mb-4 pgn__card pgn__card-light card"
+  tabIndex={-1}
 >
   <div
+    className="pgn-transition-replace-group position-relative"
     style={
       {
-        "padding": ".1px 0",
+        "height": null,
       }
     }
   >
-    <form
-      onSubmit={[Function]}
+    <div
+      style={
+        {
+          "padding": ".1px 0",
+        }
+      }
     >
       <div
-        className="pgn__form-group"
+        className="pgn__card-body"
       >
-        <label
-          className="pgn__form-label h6 d-block"
-          htmlFor="field-testField"
-          size="sm"
-        >
-          Main Label
-        </label>
         <div
-          className="pgn__form-control-decorator-group"
+          className="pgn__card-section"
         >
-          <text
-            aria-describedby="field-testField-2"
-            className="has-value form-control is-invalid"
-            data-hj-suppress={true}
-            id="field-testField"
-            name="testField"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="text"
-            value="Test Field"
+          <form
+            className=""
+            onSubmit={[Function]}
           >
-            <option
-              value="defaultOption"
-            >
-              Default Option
-            </option>
-            <optgroup
-              label="User Options"
+            <div
+              className="pgn__form-group"
             >
-              <option
-                value="suboption1"
+              <label
+                className="pgn__form-label h6 d-block"
+                htmlFor="field-testField"
+                size="sm"
               >
-                Suboption 1
-              </option>
-            </optgroup>
-            <optgroup
-              label="Other Options"
-            >
-              <option
-                value="suboption2"
+                Main Label
+              </label>
+              <div
+                className="pgn__form-control-decorator-group"
               >
-                Suboption 2
-              </option>
-              <option
-                value="suboption3"
+                <text
+                  aria-describedby="field-testField-2"
+                  className="has-value form-control is-invalid"
+                  data-hj-suppress={true}
+                  id="field-testField"
+                  name="testField"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  type="text"
+                  value="Test Field"
+                >
+                  <option
+                    value="defaultOption"
+                  >
+                    Default Option
+                  </option>
+                  <optgroup
+                    label="User Options"
+                  >
+                    <option
+                      value="suboption1"
+                    >
+                      Suboption 1
+                    </option>
+                  </optgroup>
+                  <optgroup
+                    label="Other Options"
+                  >
+                    <option
+                      value="suboption2"
+                    >
+                      Suboption 2
+                    </option>
+                    <option
+                      value="suboption3"
+                    >
+                      Suboption 3
+                    </option>
+                  </optgroup>
+                </text>
+              </div>
+              <div
+                className="pgn__form-text pgn__form-text-default"
               >
-                Suboption 3
-              </option>
-            </optgroup>
-          </text>
-        </div>
-        <div
-          className="pgn__form-text pgn__form-text-default"
-        >
-          <div>
-            Helpful Text
-          </div>
-        </div>
-        <div
-          className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
-          id="field-testField-2"
-        >
-          <span
-            className="pgn__icon"
-          >
-            <svg
-              aria-hidden={true}
-              fill="none"
-              focusable={false}
-              height={24}
-              role="img"
-              viewBox="0 0 24 24"
-              width={24}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div />
+                <div>
+                  Helpful Text
+                </div>
+              </div>
+              <div
+                className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
+                id="field-testField-2"
+              >
+                <span
+                  className="pgn__icon"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <div />
+              </div>
+            </div>
+            <p>
+              <button
+                aria-disabled={false}
+                aria-live="assertive"
+                className="pgn__stateful-btn pgn__stateful-btn-state-default mr-2 btn btn-primary"
+                disabled={false}
+                onClick={[Function]}
+                type="submit"
+              >
+                <span
+                  className="d-flex align-items-center justify-content-center"
+                >
+                  <span>
+                    Save
+                  </span>
+                </span>
+              </button>
+              <button
+                className="btn btn-outline-primary"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Cancel
+              </button>
+            </p>
+          </form>
         </div>
       </div>
-      <p>
-        <button
-          aria-disabled={false}
-          aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default mr-2 btn btn-primary"
-          disabled={false}
-          onClick={[Function]}
-          type="submit"
-        >
-          <span
-            className="d-flex align-items-center justify-content-center"
-          >
-            <span>
-              Save
-            </span>
-          </span>
-        </button>
-        <button
-          className="btn btn-outline-primary"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Cancel
-        </button>
-      </p>
-    </form>
+    </div>
   </div>
 </div>
 `;
 
 exports[`EditableSelectField renders EditableSelectField with an error 1`] = `
 <div
-  className="pgn-transition-replace-group position-relative"
-  style={
-    {
-      "height": null,
-    }
-  }
+  className="mb-4 pgn__card pgn__card-light card"
+  tabIndex={-1}
 >
   <div
+    className="pgn-transition-replace-group position-relative"
     style={
       {
-        "padding": ".1px 0",
+        "height": null,
       }
     }
   >
     <div
-      className="form-group"
+      style={
+        {
+          "padding": ".1px 0",
+        }
+      }
     >
       <div
-        className="d-flex align-items-start"
+        className="pgn__card-header"
       >
-        <h6
-          aria-level="3"
+        <div
+          className="pgn__card-header-content"
         >
-          Main Label
-        </h6>
-        <button
-          className="ml-3 btn btn-link"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
+          <div
+            className="pgn__card-header-title-md"
+          >
+            Main Label
+          </div>
+          <div
+            className="pgn__card-header-subtitle-md"
+          >
+            <p
+              className={null}
+              data-hj-suppress={true}
+            >
+              Test Field
+            </p>
+          </div>
+        </div>
+        <div
+          className="pgn__card-header-actions"
         >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            style={{}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="pgn__action-row"
           >
-            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
-              fill="currentColor"
-              style={{}}
-            />
-          </svg>
-          Edit
-        </button>
+            <button
+              className="btn btn-outline-primary"
+              data-clicked="edit"
+              data-testid="editable-field-edit"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="pgn__icon btn-icon-before"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              Edit
+            </button>
+          </div>
+        </div>
       </div>
-      <p
-        className={null}
-        data-hj-suppress={true}
-      >
-        Test Field
-      </p>
-      <p
-        className="small text-muted mt-n2"
+      <div
+        className="pgn__card-body"
       >
-        Default Confirmation Message
-      </p>
+        <div
+          className="pgn__card-section"
+        >
+          <p
+            className="small text-muted mt-n2"
+          >
+            Default Confirmation Message
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -277,68 +349,97 @@ exports[`EditableSelectField renders EditableSelectField with an error 1`] = `
 
 exports[`EditableSelectField renders selectOptions when option does not have a group 1`] = `
 <div
-  className="pgn-transition-replace-group position-relative"
-  style={
-    {
-      "height": null,
-    }
-  }
+  className="mb-4 pgn__card pgn__card-light card"
+  tabIndex={-1}
 >
   <div
+    className="pgn-transition-replace-group position-relative"
     style={
       {
-        "padding": ".1px 0",
+        "height": null,
       }
     }
   >
     <div
-      className="form-group"
+      style={
+        {
+          "padding": ".1px 0",
+        }
+      }
     >
       <div
-        className="d-flex align-items-start"
+        className="pgn__card-header"
       >
-        <h6
-          aria-level="3"
+        <div
+          className="pgn__card-header-content"
         >
-          Main Label
-        </h6>
-        <button
-          className="ml-3 btn btn-link"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
+          <div
+            className="pgn__card-header-title-md"
+          >
+            Main Label
+          </div>
+          <div
+            className="pgn__card-header-subtitle-md"
+          >
+            <p
+              className={null}
+              data-hj-suppress={true}
+            >
+              Test Field
+            </p>
+          </div>
+        </div>
+        <div
+          className="pgn__card-header-actions"
         >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            style={{}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="pgn__action-row"
           >
-            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
-              fill="currentColor"
-              style={{}}
-            />
-          </svg>
-          Edit
-        </button>
+            <button
+              className="btn btn-outline-primary"
+              data-clicked="edit"
+              data-testid="editable-field-edit"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="pgn__icon btn-icon-before"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              Edit
+            </button>
+          </div>
+        </div>
       </div>
-      <p
-        className={null}
-        data-hj-suppress={true}
-      >
-        Test Field
-      </p>
-      <p
-        className="small text-muted mt-n2"
+      <div
+        className="pgn__card-body"
       >
-        Default Confirmation Message
-      </p>
+        <div
+          className="pgn__card-section"
+        >
+          <p
+            className="small text-muted mt-n2"
+          >
+            Default Confirmation Message
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -346,68 +447,97 @@ exports[`EditableSelectField renders selectOptions when option does not have a g
 
 exports[`EditableSelectField renders selectOptions when option has a group 1`] = `
 <div
-  className="pgn-transition-replace-group position-relative"
-  style={
-    {
-      "height": null,
-    }
-  }
+  className="mb-4 pgn__card pgn__card-light card"
+  tabIndex={-1}
 >
   <div
+    className="pgn-transition-replace-group position-relative"
     style={
       {
-        "padding": ".1px 0",
+        "height": null,
       }
     }
   >
     <div
-      className="form-group"
+      style={
+        {
+          "padding": ".1px 0",
+        }
+      }
     >
       <div
-        className="d-flex align-items-start"
+        className="pgn__card-header"
       >
-        <h6
-          aria-level="3"
+        <div
+          className="pgn__card-header-content"
         >
-          Main Label
-        </h6>
-        <button
-          className="ml-3 btn btn-link"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
+          <div
+            className="pgn__card-header-title-md"
+          >
+            Main Label
+          </div>
+          <div
+            className="pgn__card-header-subtitle-md"
+          >
+            <p
+              className={null}
+              data-hj-suppress={true}
+            >
+              Test Field
+            </p>
+          </div>
+        </div>
+        <div
+          className="pgn__card-header-actions"
         >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            style={{}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="pgn__action-row"
           >
-            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
-              fill="currentColor"
-              style={{}}
-            />
-          </svg>
-          Edit
-        </button>
+            <button
+              className="btn btn-outline-primary"
+              data-clicked="edit"
+              data-testid="editable-field-edit"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="pgn__icon btn-icon-before"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              Edit
+            </button>
+          </div>
+        </div>
       </div>
-      <p
-        className={null}
-        data-hj-suppress={true}
-      >
-        Test Field
-      </p>
-      <p
-        className="small text-muted mt-n2"
+      <div
+        className="pgn__card-body"
       >
-        Default Confirmation Message
-      </p>
+        <div
+          className="pgn__card-section"
+        >
+          <p
+            className="small text-muted mt-n2"
+          >
+            Default Confirmation Message
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -415,68 +545,97 @@ exports[`EditableSelectField renders selectOptions when option has a group 1`] =
 
 exports[`EditableSelectField renders selectOptions with multiple groups 1`] = `
 <div
-  className="pgn-transition-replace-group position-relative"
-  style={
-    {
-      "height": null,
-    }
-  }
+  className="mb-4 pgn__card pgn__card-light card"
+  tabIndex={-1}
 >
   <div
+    className="pgn-transition-replace-group position-relative"
     style={
       {
-        "padding": ".1px 0",
+        "height": null,
       }
     }
   >
     <div
-      className="form-group"
+      style={
+        {
+          "padding": ".1px 0",
+        }
+      }
     >
       <div
-        className="d-flex align-items-start"
+        className="pgn__card-header"
       >
-        <h6
-          aria-level="3"
+        <div
+          className="pgn__card-header-content"
         >
-          Main Label
-        </h6>
-        <button
-          className="ml-3 btn btn-link"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
+          <div
+            className="pgn__card-header-title-md"
+          >
+            Main Label
+          </div>
+          <div
+            className="pgn__card-header-subtitle-md"
+          >
+            <p
+              className={null}
+              data-hj-suppress={true}
+            >
+              Test Field
+            </p>
+          </div>
+        </div>
+        <div
+          className="pgn__card-header-actions"
         >
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-pencil mr-1"
-            data-icon="pencil"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            style={{}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="pgn__action-row"
           >
-            <path
-              d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
-              fill="currentColor"
-              style={{}}
-            />
-          </svg>
-          Edit
-        </button>
+            <button
+              className="btn btn-outline-primary"
+              data-clicked="edit"
+              data-testid="editable-field-edit"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="pgn__icon btn-icon-before"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              Edit
+            </button>
+          </div>
+        </div>
       </div>
-      <p
-        className={null}
-        data-hj-suppress={true}
-      >
-        Test Field
-      </p>
-      <p
-        className="small text-muted mt-n2"
+      <div
+        className="pgn__card-body"
       >
-        Default Confirmation Message
-      </p>
+        <div
+          className="pgn__card-section"
+        >
+          <p
+            className="small text-muted mt-n2"
+          >
+            Default Confirmation Message
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </div>