diff --git a/media/MPQEditor/index.html b/media/MPQEditor/index.html
index 1f4aa8b7..dafdbf28 100644
--- a/media/MPQEditor/index.html
+++ b/media/MPQEditor/index.html
@@ -58,6 +58,15 @@
             </vscode-button>
         </div>
         <div class="rightbtns">
+            <vscode-text-field id="VisqInputPath" startIcon="true" placeholder="visq path" readonly="true">
+                <span slot="start" class="codicon codicon-question" style="cursor: pointer">
+                    <span class="help">
+                        visq.json file with layer-wise quantization errors
+                    </span>
+                </span>
+                <span id="visq-file" slot="end" class="codicon codicon-search" style="cursor: pointer"></span>
+                <span id="visq-delete" slot="end" class="codicon codicon-chrome-close" style="cursor: pointer"></span>
+            </vscode-text-field>
             <vscode-checkbox id="circle-graph">Show Graph</vscode-checkbox>
         </div>
     </div>
diff --git a/media/MPQEditor/index.js b/media/MPQEditor/index.js
index 989ba946..d0c78f97 100644
--- a/media/MPQEditor/index.js
+++ b/media/MPQEditor/index.js
@@ -36,6 +36,9 @@ function main() {
       case "modelGraphIsShown":
         handleModelGraphIsShown(message.shown);
         break;
+      case "VisqFileLoaded":
+        handleVisqFileLoaded(message.visqFile);
+        break;
       default:
         break;
     }
@@ -58,6 +61,10 @@ function handleModelNodesChanged(names) {
   document.getElementById("AddSpecificLayer").disabled = names.length < 1;
 }
 
+function handleVisqFileLoaded(visqFile) {
+  document.getElementById("VisqInputPath").value = visqFile;
+}
+
 function registerMainControls() {
   document
     .getElementById("DefaultDtype")
@@ -92,6 +99,28 @@ function registerMainControls() {
       });
     });
 
+  document
+    .getElementById("VisqInputPath")
+    .addEventListener("input", function () {
+      vscode.postMessage({
+        type: "VisqInputPathChanged",
+        path: document.getElementById("VisqInputPath").value,
+      });
+    });
+
+  document.getElementById("visq-file").addEventListener("click", function () {
+    vscode.postMessage({
+      type: "loadVisqFile",
+    });
+  });
+
+  document.getElementById("visq-delete").addEventListener("click", function () {
+    document.getElementById("VisqInputPath").value = "";
+    vscode.postMessage({
+      type: "removeVisqFile",
+    });
+  });
+
   document.getElementById("AddSpecificLayer").disabled = true;
 }
 
diff --git a/media/MPQEditor/style.css b/media/MPQEditor/style.css
index f80317f4..a3de1988 100644
--- a/media/MPQEditor/style.css
+++ b/media/MPQEditor/style.css
@@ -30,3 +30,22 @@ float: left;
 .rightbtns {
 float: right;
 }
+
+.codicon.codicon-question .help {
+visibility: hidden;
+width: auto;
+background-color: var(--vscode-editorSuggestWidget-background);
+color: var(--vscode-editorSuggestWidget-foreground);
+border: 2px solid var(--vscode-editorSuggestWidget-border);
+font-size: small;
+text-align: left;
+position: absolute;
+z-index: 1;
+margin-left: 10px;
+padding: 6px 6px 10px 8px;
+font-family: var(--vscode-font-family);
+}
+
+.codicon.codicon-question:hover .help {
+visibility: visible;
+}