diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
index 6c338657e4..e517eae341 100644
--- a/packages/core/components/ExternalInput/index.tsx
+++ b/packages/core/components/ExternalInput/index.tsx
@@ -4,6 +4,7 @@ import getClassNameFactory from "../../lib/get-class-name-factory";
 import { ExternalField } from "../../types/Config";
 import { Link } from "react-feather";
 import { Modal } from "../Modal";
+import { Heading } from "../Heading";
 
 const getClassName = getClassNameFactory("ExternalInput", styles);
 
@@ -90,7 +91,11 @@ export const ExternalInput = ({
         )}
       </div>
       <Modal onClose={() => setOpen(false)} isOpen={isOpen}>
-        <h2 className={getClassName("modalHeading")}>Select content</h2>
+        <div className={getClassName("masthead")}>
+          <Heading rank={2} size="xxl">
+            Select content
+          </Heading>
+        </div>
 
         {data.length ? (
           <div className={getClassName("modalTableWrapper")}>
diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
index 6335a98f7a..c88601d949 100644
--- a/packages/core/components/ExternalInput/styles.module.css
+++ b/packages/core/components/ExternalInput/styles.module.css
@@ -52,7 +52,7 @@
   margin-left: -1px;
 }
 
-.ExternalInput-modalHeading {
+.ExternalInput-masthead {
   background-color: white;
   padding: 32px 24px;
 }