diff --git a/front/js/pialert_common.js b/front/js/pialert_common.js
index d78b6330..152ff569 100755
--- a/front/js/pialert_common.js
+++ b/front/js/pialert_common.js
@@ -96,6 +96,28 @@ function deleteAllCookies() {
 }
 
 
+// -----------------------------------------------------------------------------
+// Get language string
+// -----------------------------------------------------------------------------
+function cacheStrings()
+{
+  $.get('api/table_language_strings.json', function(res) {    
+        
+    data = res["data"];       
+
+    data.forEach((langString) => {
+      // console.log(langString)
+      setCache(`pia_lang_${langString.String_Key}`, langString.String_Value, expirationMinutes='1440') // expire in a day
+    });
+
+        
+  })
+}
+
+function getString (key) {
+  return getCache(`pia_lang_${key}`)
+}
+
 // -----------------------------------------------------------------------------
 // Modal dialog handling
 // -----------------------------------------------------------------------------
@@ -369,6 +391,9 @@ function navigateToDeviceWithIp (ip) {
   });
 }
 
-
+// initialize
+cacheStrings()
+
+console.log("init pialert_common.js")
 
 
diff --git a/front/settings.php b/front/settings.php
index 6a53c9f5..0d75d02d 100755
--- a/front/settings.php
+++ b/front/settings.php
@@ -51,6 +51,11 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
 
 ?>
 <!-- Page ------------------------------------------------------------------ -->
+<!-- Page ------------------------------------------------------------------ -->
+
+<script src="js/pialert_common.js"></script>
+
+
 <div id="settingsPage" class="content-wrapper">
 
 <!-- Content header--------------------------------------------------------- -->
@@ -326,7 +331,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
         $html = $html.'</div></div></div>';
       }
 
-      echo $html;
+      // echo $html;
    ?>
    </div>
    
@@ -347,8 +352,143 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
   require 'php/templates/footer.php';  
 ?>
 
+
+
 <script>
 
+  // NEW code ---------------------------------------------------------------------------------------------------------------------------------------------------------
+  // NEW code ---------------------------------------------------------------------------------------------------------------------------------------------------------
+  // NEW code ---------------------------------------------------------------------------------------------------------------------------------------------------------
+  
+  
+  function getData(){
+
+    $.get('api/table_settings.json', function(res) {    
+        
+        settingsData = res["data"];       
+
+        initSettingsPage(settingsData);
+    })
+  }
+
+  function initSettingsPage(settingsData){
+
+    const settingGroups = [];
+    // core groups are the ones not generated by plugins
+    const settingCoreGroups = ['General', 'NewDeviceDefaults', 'Email', 'Webhooks', 'Apprise', 'NTFY', 'PUSHSAFER', 'MQTT', 'DynDNS', 'PiHole', 'Pholus', 'Nmap', 'API'];
+
+
+    // Loop through the settingsArray and collect unique settingGroups
+    settingsData.forEach((set) => {
+      if (!settingGroups.includes(set.Group)) {
+        settingGroups.push(set.Group);
+      }
+    });
+
+
+    console.log(settingGroups);
+
+    let headersHtml = '';    
+    let pluginHtml = `
+          <div class="row table_row">
+            <div class="table_cell bold">
+              <i class="fa-regular fa-book fa-sm"></i>
+              <a href="https://github.com/jokob-sk/Pi.Alert/tree/main/front/plugins" target="_blank">
+              <?= lang('Gen_ReadDocs');?>
+              </a>
+            </div>
+          </div>
+        `;
+    let isIn = ' in '; // to open the active panel in AdminLTE
+
+    for (const group of settingGroups) {
+      let isPlugin = false;
+      let settingGroupTypeHtml = '';
+
+      if (settingCoreGroups.includes(group)) {
+        settingGroupTypeHtml = '';
+      } else {
+        settingGroupTypeHtml = ' (<i class="fa-regular fa-plug fa-sm"></i>) ';
+        isPlugin = true;
+      }
+
+      headersHtml += `<div class="box panel panel-default">
+                  <a data-toggle="collapse" data-parent="#accordion_gen" href="#${group}">
+                    <div class="panel-heading">
+                      <h4 class="panel-title">${group} ${settingGroupTypeHtml}</h4>
+                    </div>
+                  </a>
+                  <div id="${group}" data-myid="collapsible" class="panel-collapse collapse ${isIn}">
+                    <div class="panel-body">
+                    ${isPlugin ? pluginHtml: ""}
+                    test
+                    </div>
+                  </div>
+                </div>
+                    `;
+      isIn = ' '; // open the first panel only by default on page load
+    }
+  
+    // generate headers/sections
+    $('#accordion_gen').html(headersHtml);
+
+    // generate panel content
+    for (const group of settingGroups) {
+
+      // go thru all settings and collect settings per settings group 
+      settingsData.forEach((set) => {
+
+        setHtml = ""
+
+        if(set["Group"] == group)
+        {
+          setHtml += `
+                    <div class="row table_row">
+                      <div class="table_cell setting_name bold">
+                        <label>${getString(set['Code_Name'] + '_name', set['Display_Name'])}</label>
+                        <div class="small">
+                          <code>${set['Code_Name']}</code>
+                        </div>
+                      </div>
+                      <div class="table_cell setting_description">
+                        ${getString(set['Code_Name'] + '_description', set['Description'])}
+                      </div>
+                      <div class="table_cell setting_input input-group">
+                  `;
+
+          // Render different input types based on the settings type
+          let input = "";
+
+          // text - textbox
+          if (set['Type'] === 'text' || set['Type'] === 'string' || set['Type'] === 'date-time') {
+            input = `
+              <input class="form-control" onChange="settingsChanged()" my-data-type="${set['Type']}" id="${set['Code_Name']}" value="${set['Value']}"/>
+            `;
+          }
+          
+          setHtml += input + `
+              </div>
+            </div>
+          `
+
+          // generate hsettings in the correct group section
+          $(`#${group} .panel-body`).append(setHtml);
+          
+        }
+      });
+
+    }
+
+
+  }
+
+  // old code ---------------------------------------------------------------------------------------------------------------------------------------------------------
+  // old code ---------------------------------------------------------------------------------------------------------------------------------------------------------
+  // old code ---------------------------------------------------------------------------------------------------------------------------------------------------------
+  
+  
+
+
   // number of settings has to be equal to
 
   // display the name of the first person
@@ -570,6 +710,8 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
     
   }
 
+  getData()
+
 </script>
 
 <script defer>