diff --git a/css/dialogue.css b/css/dialogue.css
index 552126e..700f773 100644
--- a/css/dialogue.css
+++ b/css/dialogue.css
@@ -8,9 +8,19 @@
   grid-gap: 10px 15px;
 }
 
-.numeric-label-field {
-  width: 50px !important;
-  text-align: center !important;
+.plusMinusNumberFieldBox {
+
+  display: flex;
+  gap: 10px;
+
+  select[name="plusOrMinus"] {
+    flex: 1;
+  }
+
+  .numeric-label-field {
+    flex: 1;
+    text-align: center !important;
+  }
 }
 
 .damage-modify-label-grid {
diff --git a/module/roll/roll.js b/module/roll/roll.js
index a02a969..41121e2 100644
--- a/module/roll/roll.js
+++ b/module/roll/roll.js
@@ -142,7 +142,9 @@ export class DGPercentileRoll extends DGRoll {
         customModifierTarget = parseInt(
           this.actor.system.settings.rolling.defaultPercentileModifier,
         );
-      } catch {}
+      } catch {
+        /* empty */
+      }
     }
 
     const backingData = {
@@ -158,23 +160,31 @@ export class DGPercentileRoll extends DGRoll {
       "systems/deltagreen/templates/dialog/modify-percentile-roll.html";
     const content = await renderTemplate(template, backingData);
     return new Promise((resolve, reject) => {
-      new Dialog({
+      new foundry.applications.api.DialogV2({
         content,
-        title: DGUtils.localizeWithFallback(
-          "DG.ModifySkillRollDialogue.Title",
-          "Modify Roll",
-        ),
-        default: "roll",
-        buttons: {
-          roll: {
+        window: {
+          title: DGUtils.localizeWithFallback(
+            "DG.ModifySkillRollDialogue.Title",
+            "Modify Roll",
+          ),
+        },
+        buttons: [
+          {
+            default: true,
+            action: "roll",
             label: DGUtils.localizeWithFallback("DG.Roll.Roll", "Roll"),
-            callback: (html) => {
+            callback: (event, button, dialog) => {
               try {
-                let targetModifier = html.find("[name='targetModifier']").val(); // this is text as a heads up
+                let targetModifier = dialog.element.querySelector(
+                  "[name='targetModifier']",
+                )?.value; // this is text as a heads up
 
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
 
-                const plusMinus = html.find("[name='plusOrMinus']").val();
+                const plusMinus = dialog.element.querySelector(
+                  "[name='plusOrMinus']",
+                )?.value;
 
                 if (
                   targetModifier.trim() !== "" &&
@@ -200,11 +210,13 @@ export class DGPercentileRoll extends DGRoll {
               }
             },
           },
-          roll40Negative: {
+          {
+            action: "roll40Negative",
             label: "-40",
-            callback: (html) => {
+            callback: (event, button, dialog) => {
               try {
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
                 const targetModifier = -40;
                 resolve({ targetModifier, rollMode });
               } catch (ex) {
@@ -212,11 +224,13 @@ export class DGPercentileRoll extends DGRoll {
               }
             },
           },
-          roll20Negative: {
+          {
+            action: "roll20Negative",
             label: "-20",
-            callback: (html) => {
+            callback: (event, button, dialog) => {
               try {
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
                 const targetModifier = -20;
                 resolve({ targetModifier, rollMode });
               } catch (ex) {
@@ -224,11 +238,13 @@ export class DGPercentileRoll extends DGRoll {
               }
             },
           },
-          roll20Positive: {
+          {
+            action: "roll20Positive",
             label: "+20",
-            callback: (html) => {
+            callback: (event, button, dialog) => {
               try {
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
                 const targetModifier = 20;
                 resolve({ targetModifier, rollMode });
               } catch (ex) {
@@ -236,11 +252,13 @@ export class DGPercentileRoll extends DGRoll {
               }
             },
           },
-          roll40Positive: {
+          {
+            action: "roll40Positive",
             label: "+40",
-            callback: (html) => {
+            callback: (event, button, dialog) => {
               try {
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
                 const targetModifier = 40;
                 resolve({ targetModifier, rollMode });
               } catch (ex) {
@@ -248,7 +266,7 @@ export class DGPercentileRoll extends DGRoll {
               }
             },
           },
-        },
+        ],
       }).render(true);
     });
   }
@@ -275,7 +293,7 @@ export class DGPercentileRoll extends DGRoll {
       this.options.rollMode = "blindroll";
     }
 
-    let label = this.createLabel();
+    const label = this.createLabel();
 
     let resultString = "";
     let styleOverride = "";
@@ -288,21 +306,20 @@ export class DGPercentileRoll extends DGRoll {
       } else {
         resultString = `${game.i18n.localize("DG.Roll.Success")}`;
       }
+    } else if (this.isCritical) {
+      resultString = `${game.i18n.localize("DG.Roll.CriticalFailure")}`;
+      resultString = `${resultString.toUpperCase()}`;
+      styleOverride = "color: red";
     } else {
-      if (this.isCritical) {
-        resultString = `${game.i18n.localize("DG.Roll.CriticalFailure")}`;
-        resultString = `${resultString.toUpperCase()}`;
-        styleOverride = "color: red";
-      } else {
-        resultString = `${game.i18n.localize("DG.Roll.Failure")}`;
-      }
+      resultString = `${game.i18n.localize("DG.Roll.Failure")}`;
     }
 
-    const failureMark = !this.isSuccess && this.skillPath
-      && !foundry.utils.getProperty(this.actor, `${this.skillPath}.failure`)
-      && game.settings.get(DG.ID, "skillFailure");
+    const failureMark =
+      !this.isSuccess &&
+      this.skillPath &&
+      !foundry.utils.getProperty(this.actor, `${this.skillPath}.failure`) &&
+      game.settings.get(DG.ID, "skillFailure");
 
-    const { renderTemplate } = foundry.applications.handlebars;
     const html = await renderTemplate(
       "systems/deltagreen/templates/roll/percentile-roll.hbs",
       {
@@ -310,26 +327,32 @@ export class DGPercentileRoll extends DGRoll {
         resultString,
         formula: this.formula,
         total: this.total,
-        failureMark
-      });
+        failureMark,
+      },
+    );
 
-    //TODO: add setting for it?
+    // TODO: add setting for it?
     if (failureMark) {
       const keyForUpdate = `${this.skillPath}.failure`;
 
-      //TODO: auto-update actor or post icon with manual apply
+      // TODO: auto-update actor or post icon with manual apply
       await this.actor.update({
-        [keyForUpdate]: true
-      })
+        [keyForUpdate]: true,
+      });
 
-      return this.toMessage({ flags: { deltagreen: {
-        rollbacks: {
-          [keyForUpdate]: false
-        }
-      } }, content: html, flavor: label });
-    } else {
-      return this.toMessage({ content: html, flavor: label });
+      return this.toMessage({
+        flags: {
+          deltagreen: {
+            rollbacks: {
+              [keyForUpdate]: false,
+            },
+          },
+        },
+        content: html,
+        flavor: label,
+      });
     }
+    return this.toMessage({ content: html, flavor: label });
   }
 
   /**
@@ -383,16 +406,21 @@ export class DGPercentileRoll extends DGRoll {
    * @returns {string}
    */
   createLabel() {
-    const startOfLabel = game.i18n.localize("DG.Roll.Rolling")
-      + ` <b>${this.localizedKey}`
-    const endOfLabel =`${game.i18n.localize("DG.Roll.Target")} ${this.effectiveTarget}`
+    const startOfLabel = `${game.i18n.localize("DG.Roll.Rolling")} <b>${
+      this.localizedKey
+    }`;
+    const endOfLabel = `${game.i18n.localize("DG.Roll.Target")} ${
+      this.effectiveTarget
+    }`;
 
     let label = this.isInhuman
-      // "Inhuman" stat being rolled. See function for details.
-      ? `${startOfLabel} [${game.i18n.localize("DG.Roll.Inhuman").toUpperCase()}]</b> ${endOfLabel}`
+      ? // "Inhuman" stat being rolled. See function for details.
+        `${startOfLabel} [${game.i18n
+          .localize("DG.Roll.Inhuman")
+          .toUpperCase()}]</b> ${endOfLabel}`
       : `${startOfLabel}</b><br> ${endOfLabel}%`;
 
-    const {isExhausted, exhaustedCheckPenalty} = this.exhausted
+    const { isExhausted, exhaustedCheckPenalty } = this.exhausted;
 
     if (this.modifier || isExhausted) {
       label += ` (${this.target}%`;
@@ -429,7 +457,7 @@ export class DGPercentileRoll extends DGRoll {
       exhaustedCheckPenalty = -20;
     }
 
-    return {isExhausted, exhaustedCheckPenalty};
+    return { isExhausted, exhaustedCheckPenalty };
   }
 
   /**
@@ -510,7 +538,7 @@ export class DGPercentileRoll extends DGRoll {
   get effectiveTarget() {
     let target = 1;
 
-    let {isExhausted, exhaustedCheckPenalty} = this.exhausted
+    const { isExhausted, exhaustedCheckPenalty } = this.exhausted;
 
     if (!this.target || Number.isNaN(this.target)) {
       return null;
@@ -715,22 +743,30 @@ export class DGDamageRoll extends DGRoll {
 
     const content = await renderTemplate(template, backingData);
     return new Promise((resolve, reject) => {
-      new Dialog({
+      new foundry.applications.api.DialogV2({
         content,
-        title: game.i18n.localize("DG.ModifySkillRollDialogue.Title"),
-        default: "roll",
-        buttons: {
-          roll: {
+        window: {
+          title: game.i18n.localize("DG.ModifySkillRollDialogue.Title"),
+        },
+        buttons: [
+          {
+            default: true,
             label: game.i18n.translations.DG.Roll.Roll,
-
-            callback: (html) => {
+            action: "roll",
+            callback: (event, button, dialog) => {
               try {
-                const outerModifier = html.find("[name='outerModifier']").val(); // this is text as a heads up
-                let innerModifier = html.find("[name='innerModifier']").val(); // this is text as a heads up
-                const modifiedBaseRoll = html
-                  .find("[name='originalFormula']")
-                  .val(); // this is text as a heads up
-                const rollMode = html.find("[name='targetRollMode']").val();
+                const outerModifier = dialog.element.querySelector(
+                  "[name='outerModifier']",
+                )?.value; // this is text as a heads up
+                let innerModifier = dialog.element.querySelector(
+                  "[name='innerModifier']",
+                )?.value; // this is text as a heads up
+                const modifiedBaseRoll = dialog.element.querySelector(
+                  "[name='originalFormula']",
+                )?.value; // this is text as a heads up
+                const rollMode = dialog.element.querySelector(
+                  "[name='targetRollMode']",
+                )?.value;
 
                 if (innerModifier.replace(" ", "") === "+0") {
                   innerModifier = "";
@@ -749,7 +785,7 @@ export class DGDamageRoll extends DGRoll {
               }
             },
           },
-        },
+        ],
       }).render(true);
     });
   }
diff --git a/templates/dialog/modify-percentile-roll.html b/templates/dialog/modify-percentile-roll.html
index c26f997..e4a7e00 100644
--- a/templates/dialog/modify-percentile-roll.html
+++ b/templates/dialog/modify-percentile-roll.html
@@ -16,8 +16,8 @@
         
 
         <span>{{localize 'DG.ModifySkillRollDialogue.TargetModifier'}}</span>
-        <div>
-            <select name="plusOrMinus">
+        <div class="plusMinusNumberFieldBox">
+            <select name="plusOrMinus" style="flex: 1;">
                 <option value="+" selected>+</option>
                 <option value="-">-</option>
             </select>