diff --git a/customprompts/mzta-custom-prompts.css b/customprompts/mzta-custom-prompts.css
index ca159d22..ec9f384c 100644
--- a/customprompts/mzta-custom-prompts.css
+++ b/customprompts/mzta-custom-prompts.css
@@ -45,3 +45,11 @@ table td {
 table td.properties{
     white-space: nowrap;
 }
+
+.hiddendata{
+    display: none;
+}
+
+#formNew{
+    display: none;
+}
\ No newline at end of file
diff --git a/customprompts/mzta-custom-prompts.html b/customprompts/mzta-custom-prompts.html
index a7cc8a2d..5ced4648 100644
--- a/customprompts/mzta-custom-prompts.html
+++ b/customprompts/mzta-custom-prompts.html
@@ -10,14 +10,60 @@
         <h1>Manage Prompts</h1>
         <p>Manage your custom prompts.</p>
     </div>
+    <div>
+      <button id="btnSave" disabled>__MSG_customPrompts_btnSave__</button>
+      <button id="btnNew">__MSG_customPrompts_btnNew__</button>
+    </div>
+    <div id="formNew">
+        <label for="txtNameNew">Name:</label>
+        <input type="text" id="txtNameNew" name="name">
+        <br>
+        <label for="txtTextNew">Text:</label>
+        <textarea id="txtTextNew" name="text"></textarea>
+        <br>
+        <label for="selectTypeNew">Type:</label>
+        <select id="selectTypeNew" name="type">
+          <option value="0">Always show</option>
+          <option value="1">When reading an email</option>
+          <option value="2">When composing a mail</option>
+        </select>
+        <br>
+        <label for="selectActionNew">Action:</label>
+        <select id="selectActionNew" name="action">
+          <option value="0">Close button</option>
+          <option value="1">Do reply</option>
+          <option value="2">Substitute text</option>
+        </select>
+        <br>
+        <label for="selectNeedSelectedNew">Need selection:</label>
+        <select id="selectNeedSelectedNew" name="need_selected">
+          <option value="0">No selection needed</option>
+          <option value="1">Need a selection</option>
+        </select>
+        <br>
+        <label for="selectNeedSignatureNew">Need signature:</label>
+        <select id="selectNeedSignatureNew" name="need_signature">
+          <option value="0">No signature needed</option>
+          <option value="1">Signature needed</option>
+        </select>
+        <br>
+        <label for="selectNeedCustomTextNew">Need custom text:</label>
+        <select id="selectNeedCustomTextNew" name="need_custom_text">
+          <option value="0">No custom text needed</option>
+          <option value="1">Custom text needed</option>
+        </select>
+        <br>
+        <button id="btnAddNew">__MSG_customPrompts_btnAddNewCommit__</button>
+    </div>
     <div id="all_prompts">
         <table>
             <thead>
               <tr>
-                <th class="sort" data-sort="id">ID</th>
-                <th class="sort" data-sort="name">Name</th>
-                <th class="sort" data-sort="text">Text</th>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Text</th>
                 <th>Properties</th>
+                <th>Action</th>
               </tr>
             </thead>
             <tbody class="list">
diff --git a/customprompts/mzta-custom-prompts.js b/customprompts/mzta-custom-prompts.js
index 378a4400..f509c611 100644
--- a/customprompts/mzta-custom-prompts.js
+++ b/customprompts/mzta-custom-prompts.js
@@ -16,31 +16,55 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { defaultPrompts } from "../js/mzta-prompts.js";
+import { getPrompts } from "../js/mzta-prompts.js";
+
+var somethingChanged = false;
 
 document.addEventListener('DOMContentLoaded', async () => {
     let options = {
-        valueNames: [ 'id', 'name', 'text', 'type', 'action', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'is_default', attr: 'is_default_val'}, { name: 'enabled', attr: 'enabled_val'} ],
-        item: `<tr>
-            <td class="id"></td>
-            <td class="name"></td>
-            <td class="text"></td>
-            <td class="properties">
-                <input type="checkbox" class="need_selected"> Need Select
-                <br>
-                <input type="checkbox" class="need_signature"> Need Signature
-                <br>
-                <input type="checkbox" class="need_custom_text"> Need Custom Text
-                <br>
-                <span class="is_default">Is Default</span>
-                <br>
-                <span class="enabled">Enabled</span>
-            </td>
-        </tr>`
+        valueNames: [ { data: ['idnum'] }, 'id', 'name', 'text', 'type', 'action', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'is_default', attr: 'is_default_val'}, { name: 'enabled', attr: 'checked_val'} ],
+        // item: `<tr>
+        //     <td class="id"></td>
+        //     <td class="name"></td>
+        //     <td class="text"></td>
+        //     <td class="properties">
+        //         <input type="checkbox" class="need_selected"> Need Select
+        //         <br>
+        //         <input type="checkbox" class="need_signature"> Need Signature
+        //         <br>
+        //         <input type="checkbox" class="need_custom_text"> Need Custom Text
+        //         <br>
+        //         <span class="is_default">Is Default</span>
+        //         <br>
+        //         <input type="checkbox" class="enabled"> Enabled
+        //     </td>
+        // </tr>`
+        item: function(values) {
+            let output = `<tr ` + ((values.is_default == 1) ? 'class="is_default"':'') + `>
+                <td class="id"></td>
+                <td class="name"></td>
+                <td class="text"></td>
+                <td class="properties">
+                    <input type="checkbox" class="need_selected"` + ((values.is_default == 1) ? 'disabled':'') + `> Need Select
+                    <br>
+                    <input type="checkbox" class="need_signature" ` + ((values.is_default == 1) ? 'disabled':'') + `> Need Signature
+                    <br>
+                    <input type="checkbox" class="need_custom_text"` + ((values.is_default == 1) ? 'disabled':'') + `> Need Custom Text
+                    <br>
+                    <input type="checkbox" class="enabled"> Enabled
+                    <span class="is_default hiddendata">is_default</span>
+                </td>
+                <td>
+                ` + ((values.is_default == 0) ? '<button class="btnEdit">Edit</button>':'') + `
+               </td>
+            </tr>`;
+            //console.log('>>>>>>>> values.name: ' + JSON.stringify(values.name));
+            return output;
+        }
     };
 
-    let values = defaultPrompts; // test in browser
-    //let values = await getPrompts();  // production
+    //let values = getDefaultPrompts_withProps; // test in browser
+    let values = await getPrompts();  // production
 
     console.log('>>>>>>>>>>>>>>>> values: ' + JSON.stringify(values));
 
@@ -48,16 +72,52 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     checkSelectedBoxes();
 
-    //i18n.updateDocument();    // production
+    const btnSave = document.getElementById('btnSave');
+    btnSave.disabled = true;
+    btnSave.addEventListener('click', (e) => {      //TODO
+        e.preventDefault();
+    });
+
+    const btnNew = document.getElementById('btnNew');
+    btnNew.addEventListener('click', (e) => {
+        e.preventDefault();
+        document.getElementById('formNew').style.display = 'block';
+    });
+
+    const btnAddNew = document.getElementById('btnNew');
+    btnAddNew.addEventListener('click', (e) => {    //TODO
+        e.preventDefault();
+    });
+
+    document.querySelectorAll('input').forEach(element => {
+        element.addEventListener('change', (e) => {
+            e.preventDefault();
+            btnSave.disabled = false;
+            somethingChanged = true;
+        });
+    })
+
+    let btnEdit_elements = document.querySelectorAll(".btnEdit")
+    if(btnEdit_elements) {
+        btnEdit_elements.forEach(element => {
+            element.addEventListener('click', (e) => {
+                e.preventDefault();
+                const tr = e.target.parentNode.parentNode;          //TODO
+                console.log('>>>>>>>> tr: ' + tr.getAttribute('data-idnum'));
+            });
+        });
+    }
+
+    i18n.updateDocument();
 }, { once: true });
   
 
 function checkSelectedBoxes() {
-    // Get all elements with the class 'need_selected' that are checkboxes
     const checkboxes = [
         ...document.querySelectorAll('.need_selected[type="checkbox"]'),
         ...document.querySelectorAll('.need_signature[type="checkbox"]'),
         ...document.querySelectorAll('.need_custom_text[type="checkbox"]'),
+        ...document.querySelectorAll('.enabled[type="checkbox"]'),
     ];
 
     // Iterate through the checkboxes
@@ -70,4 +130,11 @@ function checkSelectedBoxes() {
             checkbox.checked = true;
         }
     });
-}
\ No newline at end of file
+}
+
+window.addEventListener('beforeunload', function (event) {
+    // Check if any changes have been made
+    if (somethingChanged) {
+        event.preventDefault();
+    }
+});
\ No newline at end of file
diff --git a/js/mzta-prompts.js b/js/mzta-prompts.js
index 8a617f64..8d43b01a 100644
--- a/js/mzta-prompts.js
+++ b/js/mzta-prompts.js
@@ -54,8 +54,7 @@
 
 */
 
-export const defaultPrompts = [     // test in browser
-//const defaultPrompts = [     // production
+const defaultPrompts = [
     {
         id: 'prompt_reply',
         name: "__MSG_prompt_reply__",
@@ -141,13 +140,18 @@ export async function getPrompts(){
     const customPrompts = await getCustomPrompts();
     let output = defaultPrompts.concat(customPrompts);
     output.sort((a, b) => a.position - b.position);
+    for(let i=1; i<=output.length; i++){
+        output[i-1].idnum = i;
+    }
     return output;
 }
 
 
 async function getDefaultPrompts_withProps() {
-    let prefs = await browser.storage.sync.get({_default_prompts_properties: null});
+    //  let prefs = await browser.storage.sync.get({_default_prompts_properties: null}); //production
     let defaultPrompts_prop = [...defaultPrompts];
+    let prefs = {}; //test
+    prefs._default_prompts_properties = null; //test
     if(prefs._default_prompts_properties === null){     // no default prompts properties saved
         let pos = 1;
         defaultPrompts_prop.forEach((prompt) => {