diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js
index c7ebb70a..518ce216 100644
--- a/scripts/pi-hole/js/settings.js
+++ b/scripts/pi-hole/js/settings.js
@@ -169,7 +169,7 @@ $(".api-token").confirm({
   text: "Make sure that nobody else can scan this code around you. They will have full access to the API without having to know the password. Note that the generation of the QR code will take some time.",
   title: "Confirmation required",
   confirm: function () {
-    window.open("scripts/pi-hole/php/api_token.php", "_blank");
+    $("#apiTokenModal").modal("show");
   },
   cancel: function () {
     // nothing to do
@@ -182,6 +182,17 @@ $(".api-token").confirm({
   dialogClass: "modal-dialog",
 });
 
+$("#apiTokenModal").on("show.bs.modal", function () {
+  var font = {
+    "font-family": $("body").css("font-family"),
+  };
+  $('iframe[name="apiToken_iframe"]').contents().find("body").css(font);
+  var table = {
+    margin: "auto",
+  };
+  $('iframe[name="apiToken_iframe"]').contents().find("table").css(table);
+});
+
 $("#DHCPchk").click(function () {
   $("input.DHCPgroup").prop("disabled", !this.checked);
   $("#dhcpnotice").prop("hidden", !this.checked).addClass("lookatme");
diff --git a/settings.php b/settings.php
index 54d8843a..c3320e66 100644
--- a/settings.php
+++ b/settings.php
@@ -1047,6 +1047,22 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "dns", "piho
                                     </div>
                                 </div>
                             </form>
+                            <div class="modal fade" id="apiTokenModal" role="dialog" data-keyboard="false"
+                                tabindex="-1" data-backdrop="static" aria-labelledby="apiTokenModal">
+                                <div class="modal-dialog" role="document">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h4 class="modal-title" id="apiTokenModalHeaderLabel">API Token</h4>
+                                        </div>
+                                        <div class="modal-body">
+                                        <pre><iframe id="apiTokenIframe" name="apiToken_iframe" src="scripts/pi-hole/php/api_token.php"></iframe></pre>
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <div class="col-md-6">
                             <form role="form" method="post">
diff --git a/style/pi-hole.css b/style/pi-hole.css
index bbfeb709..489e241f 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -445,3 +445,9 @@ td.details-control {
 .eyeConWrapper {
   font-size: 17px;
 }
+
+#apiTokenIframe {
+  width: 100%;
+  border: 0;
+  height: 500px;
+}