diff --git a/package-lock.json b/package-lock.json
index f6bfed9bd..186f3af5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
         "jsdoc": "3.6.6",
         "lorem-ipsum": "2.0.3",
         "rcedit": "3.0.0",
-        "webpack": "5.30.0",
+        "webpack": "5.31.0",
         "webpack-cli": "4.6.0"
       },
       "optionalDependencies": {
@@ -9576,9 +9576,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.30.0.tgz",
-      "integrity": "sha512-Zr9NIri5yzpfmaMea2lSMV1UygbW0zQsSlGLMgKUm63ACXg6alhd1u4v5UBSBjzYKXJN6BNMGVM7w165e7NxYA==",
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.31.0.tgz",
+      "integrity": "sha512-3fUfZT/FUuThWSSyL32Fsh7weUUfYP/Fjc/cGSbla5KiSo0GtI1JMssCRUopJTvmLjrw05R2q7rlLtiKdSzkzQ==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.0",
@@ -18083,9 +18083,9 @@
       "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
     },
     "webpack": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.30.0.tgz",
-      "integrity": "sha512-Zr9NIri5yzpfmaMea2lSMV1UygbW0zQsSlGLMgKUm63ACXg6alhd1u4v5UBSBjzYKXJN6BNMGVM7w165e7NxYA==",
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.31.0.tgz",
+      "integrity": "sha512-3fUfZT/FUuThWSSyL32Fsh7weUUfYP/Fjc/cGSbla5KiSo0GtI1JMssCRUopJTvmLjrw05R2q7rlLtiKdSzkzQ==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
diff --git a/src/public/app/widgets/type_widgets/read_only_code.js b/src/public/app/widgets/type_widgets/read_only_code.js
index abb3eac27..f76e11e2b 100644
--- a/src/public/app/widgets/type_widgets/read_only_code.js
+++ b/src/public/app/widgets/type_widgets/read_only_code.js
@@ -12,16 +12,17 @@ const TPL = `
         padding: 10px;
     }
     
-    .edit-code-note-container {
+    .edit-code-note-button {
         position: absolute; 
-        top: 0px; 
+        top: 5px; 
         right: 10px;
+        font-size: 130%;
+        cursor: pointer;
     }
     </style>
 
-    <div class="alert alert-warning no-print edit-code-note-container">
-         <a href="#" class="edit-note">Edit</a> <a href="#" class="external" data-help-page="Read-only-note" title="Help on Read only notes">?</a>
-    </div>
+    <div class="alert alert-warning no-print edit-code-note-button bx bx-edit-alt"
+         title="Edit this note"></div>
 
     <pre class="note-detail-read-only-code-content"></pre>
 </div>`;
@@ -34,7 +35,7 @@ export default class ReadOnlyCodeTypeWidget extends TypeWidget {
         this.contentSized();
         this.$content = this.$widget.find('.note-detail-read-only-code-content');
 
-        this.$widget.find('a.edit-note').on('click', () => {
+        this.$widget.find('.edit-code-note-button').on('click', () => {
             this.tabContext.codePreviewDisabled = true;
 
             this.triggerEvent('codePreviewDisabled', {tabContext: this.tabContext});
diff --git a/src/public/app/widgets/type_widgets/read_only_text.js b/src/public/app/widgets/type_widgets/read_only_text.js
index 2cad35799..f925b555b 100644
--- a/src/public/app/widgets/type_widgets/read_only_text.js
+++ b/src/public/app/widgets/type_widgets/read_only_text.js
@@ -36,16 +36,17 @@ const TPL = `
         max-width: 100%;
     }
     
-    .edit-text-note-container {
+    .edit-text-note-button {
         position: absolute; 
-        top: 5px; 
+        top: 5px;
         right: 10px;
+        font-size: 130%;
+        cursor: pointer;
     }
     </style>
 
-    <div class="alert alert-warning no-print edit-text-note-container">
-         <a href="#" class="edit-note">Edit</a> <a href="#" class="external" data-help-page="Read-only-note" title="Help on Read only notes">?</a>
-    </div>
+    <div class="alert alert-warning no-print edit-text-note-button bx bx-edit-alt"
+         title="Edit this note"></div>
 
     <div class="note-detail-readonly-text-content ck-content"></div>
 </div>
@@ -60,7 +61,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
 
         this.$content = this.$widget.find('.note-detail-readonly-text-content');
 
-        this.$widget.find('a.edit-note').on('click', () => {
+        this.$widget.find('.edit-text-note-button').on('click', () => {
             this.tabContext.textPreviewDisabled = true;
 
             this.triggerEvent('textPreviewDisabled', {tabContext: this.tabContext});