diff --git a/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js b/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
index 4237218141..9ae1fa21df 100644
--- a/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
+++ b/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
@@ -15,6 +15,7 @@ declare module '@box/blueprint-web-assets/icons/Medium' {
   declare export var RightSidebarChevronOpen: React$ComponentType<any>;
   declare export var MagicWand: React$ComponentType<any>;
   declare export var DocGen: React$ComponentType<any>;
+  declare export var Pencil: React$ComponentType<any>;
 }
 
 declare module '@box/blueprint-web-assets/icons/MediumFilled' {
diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js
index 83cfacdf00..7097fcc738 100644
--- a/src/features/metadata-instance-editor/Instance.js
+++ b/src/features/metadata-instance-editor/Instance.js
@@ -6,15 +6,15 @@ import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import noop from 'lodash/noop';
 
+import { IconButton, Tooltip } from '@box/blueprint-web';
+import { Pencil } from '@box/blueprint-web-assets/icons/Medium';
+
 import type { AgentType } from '@box/box-ai-agent-selector';
 import Collapsible from '../../components/collapsible/Collapsible';
 import Form from '../../components/form-elements/form/Form';
 import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper';
-import PlainButton from '../../components/plain-button/PlainButton';
-import Tooltip from '../../components/tooltip';
 import IconMetadataColored from '../../icons/general/IconMetadataColored';
 import IconAlertCircle from '../../icons/general/IconAlertCircle';
-import IconEdit from '../../icons/general/IconEdit';
 import { bdlWatermelonRed } from '../../styles/variables';
 import { scrollIntoView } from '../../utils/dom';
 
@@ -621,17 +621,16 @@ class Instance extends React.PureComponent<Props, State> {
         if (canEdit && !isDirty && !isBusy) {
             const metadataLabelEditText = intl.formatMessage(messages.metadataEditTooltip);
             return (
-                <Tooltip position="top-left" text={metadataLabelEditText}>
-                    <PlainButton
+                <Tooltip content={metadataLabelEditText}>
+                    <IconButton
                         aria-label={metadataLabelEditText}
                         aria-pressed={isEditing}
                         className={editClassName}
                         data-resin-target="metadata-instanceedit"
+                        icon={Pencil}
                         onClick={this.toggleIsEditing}
-                        type="button"
-                    >
-                        <IconEdit />
-                    </PlainButton>
+                        size="x-small"
+                    />
                 </Tooltip>
             );
         }
diff --git a/src/features/metadata-instance-editor/Instance.scss b/src/features/metadata-instance-editor/Instance.scss
index 73fdfc8e19..b94253aedb 100644
--- a/src/features/metadata-instance-editor/Instance.scss
+++ b/src/features/metadata-instance-editor/Instance.scss
@@ -20,7 +20,7 @@
     }
 }
 
-.btn-plain.metadata-instance-editor-instance-edit {
+.metadata-instance-editor-instance-edit {
     position: absolute;
     top: 8px;
     right: 25px;
@@ -28,13 +28,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: $bdl-border-radius-size;
-
-    &:hover svg path {
-        fill: $bdl-gray;
-    }
 
     &.metadata-instance-editor-instance-is-editing {
         background-color: $bdl-gray-10;
diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
index 3b86242de0..c2794c49a8 100644
--- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
+++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
@@ -12,22 +12,20 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr
     className=""
     hasStickyHeader={true}
     headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
+      <Tooltip>
+        <IconButton
           aria-pressed={false}
           className="metadata-instance-editor-instance-edit"
           data-resin-target="metadata-instanceedit"
+          icon={
+            {
+              "$$typeof": Symbol(react.forward_ref),
+              "render": [Function],
+            }
+          }
           onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
+          size="x-small"
+        />
       </Tooltip>
     }
     isBordered={true}
@@ -748,22 +746,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     className=""
     hasStickyHeader={true}
     headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
+      <Tooltip>
+        <IconButton
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
+          icon={
+            {
+              "$$typeof": Symbol(react.forward_ref),
+              "render": [Function],
+            }
+          }
           onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
+          size="x-small"
+        />
       </Tooltip>
     }
     isBordered={true}
@@ -944,22 +940,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     className=""
     hasStickyHeader={true}
     headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
+      <Tooltip>
+        <IconButton
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
+          icon={
+            {
+              "$$typeof": Symbol(react.forward_ref),
+              "render": [Function],
+            }
+          }
           onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
+          size="x-small"
+        />
       </Tooltip>
     }
     isBordered={true}
@@ -1049,22 +1043,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
     className=""
     hasStickyHeader={true}
     headerActionItems={
-      <Tooltip
-        constrainToScrollParent={false}
-        constrainToWindow={true}
-        isDisabled={false}
-        position="top-left"
-        theme="default"
-      >
-        <PlainButton
+      <Tooltip>
+        <IconButton
           aria-pressed={true}
           className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
           data-resin-target="metadata-instanceedit"
+          icon={
+            {
+              "$$typeof": Symbol(react.forward_ref),
+              "render": [Function],
+            }
+          }
           onClick={[Function]}
-          type="button"
-        >
-          <IconEdit />
-        </PlainButton>
+          size="x-small"
+        />
       </Tooltip>
     }
     isBordered={true}