diff --git a/app/assets/js/components/Work/Tabs/Structure/WebVTTModal.jsx b/app/assets/js/components/Work/Tabs/Structure/WebVTTModal.jsx
index 893fcfc6f..f31e74e07 100644
--- a/app/assets/js/components/Work/Tabs/Structure/WebVTTModal.jsx
+++ b/app/assets/js/components/Work/Tabs/Structure/WebVTTModal.jsx
@@ -15,6 +15,7 @@ function WorkTabsStructureWebVTTModal({ isActive }) {
   const [parseErrors, setParseErrors] = React.useState();
   const workState = useWorkState();
   const [webVttValue, setWebVttValue] = React.useState("");
+  const [confirmDelete, setConfirmDelete] = React.useState(false);
   const params = useParams();
   const workId = params.id;
 
@@ -34,7 +35,7 @@ function WorkTabsStructureWebVTTModal({ isActive }) {
       if (graphQLErrors?.length > 0) {
         errorStrings = graphQLErrors.map(
           ({ message, details }) =>
-            `${message}: ${details && details.title ? details.title : ""}`
+            `${message}: ${details && details.title ? details.title : ""}`,
         );
       }
       toastWrapper("is-danger", errorStrings.join(" \n "));
@@ -65,6 +66,7 @@ function WorkTabsStructureWebVTTModal({ isActive }) {
     dispatch({ type: "toggleWebVttModal", fileSetId: null });
     setParseErrors(null);
     setWebVttValue("");
+    setConfirmDelete(false);
   };
 
   const handleSubmit = (structuralMetadata) => {
@@ -76,6 +78,12 @@ function WorkTabsStructureWebVTTModal({ isActive }) {
     });
   };
 
+  const handleDelete = () => {
+    setConfirmDelete(true);
+    setParseErrors("Are you sure you want to delete this WebVTT structure?");
+    setWebVttValue("");
+  };
+
   return (
     <div
       className={classNames(["modal"], {
@@ -95,6 +103,12 @@ function WorkTabsStructureWebVTTModal({ isActive }) {
         </header>
 
         <section className="modal-card-body">
+          {confirmDelete && (
+            <Notification isDanger>
+              Are you sure you want to delete this WebVTT structure?
+            </Notification>
+          )}
+
           {webVttValue?.trim().length > 0 &&
             (parseErrors ? (
               <Notification isDanger>{parseErrors.message}</Notification>
@@ -112,10 +126,10 @@ function WorkTabsStructureWebVTTModal({ isActive }) {
           />
         </section>
         <footer className="modal-card-foot buttons is-justify-content-space-between">
-          {webVttValue?.trim().length > 0 && (
+          {webVttValue?.trim().length > 0 && !confirmDelete && (
             <Button
               isText
-              onClick={() => handleSubmit({})}
+              onClick={() => handleDelete()}
               css={{ backgroundColor: "transparent" }}
             >
               Delete WebVTT
@@ -123,18 +137,24 @@ function WorkTabsStructureWebVTTModal({ isActive }) {
           )}
           <div className="is-flex is-justify-content-flex-end is-flex-grow-1">
             <Button onClick={handleClose}>Cancel</Button>
-            <Button
-              isPrimary
-              onClick={() =>
-                handleSubmit({
-                  type: "WEBVTT",
-                  value: webVttValue,
-                })
-              }
-              disabled={parseErrors}
-            >
-              Submit
-            </Button>
+            {confirmDelete ? (
+              <Button isPrimary onClick={() => handleSubmit({})}>
+                Yes, delete
+              </Button>
+            ) : (
+              <Button
+                isPrimary
+                onClick={() =>
+                  handleSubmit({
+                    type: "WEBVTT",
+                    value: webVttValue,
+                  })
+                }
+                disabled={parseErrors}
+              >
+                Submit
+              </Button>
+            )}
           </div>
         </footer>
       </div>