diff --git a/simpledemo.html b/simpledemo.html
index 9f0bc37..e0f498e 100644
--- a/simpledemo.html
+++ b/simpledemo.html
@@ -9,12 +9,12 @@
     <style>#playbackMuteButton:hover { background-color: #00000000; }</style>
 </head>
 <body data-bs-theme='dark'>
-<div class='text-center container-sm' style='padding: 4em 0em'>
+<div class='text-center container-sm placeholder-glow' style='padding: 4em 0em'>
 
     <p>Welcome to</p>
-    <h1 id='title_frname'>[FRIENDLY NAME HERE]</h1>
-    <p id="title_onIP"></p>
-    <p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem'>[VERSION STRING HERE]</p>
+    <h1 id='updatedLabel_FRNAME_title'><span class="placeholder col-3"></span></h1>
+    <p id="title_onIP"><span class="placeholder col-1"></span></p>
+    <p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem' id="updatedLabel_VERSION_title"><span class="placeholder col-2"></span></p>
 
     <hr style='margin: 3em 0em;'>
 
@@ -35,79 +35,73 @@
                         <tbody>
                         <tr>
                             <td>Playing</td>
-                            <td class='text-end'>
-                                [html += audioPlaying ? "yes" : "no"]
-                            </td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Volume</td>
-                            <td class='text-end'>[" + String(currentVolume) + "/" + String(maxVolume) + "]</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Muted</td>
-                            <td class='text-end'>
-                                [html += muted ? "yes" : "no"]
-                            </td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Equalizer Low</td>
-                            <td class='text-end'>[" + String(eqLow) + "dB"]</td>
-                        </tr>
+                            <td class='text-end'><span class="placeholder col-12"></span></td></tr>
                         <tr>
                             <td>Equalizer Mid</td>
-                            <td class='text-end'>[" + String(eqMid) + "dB"]</td>
-                        </tr>
+                            <td class='text-end'><span class="placeholder col-12"></span></td></tr>
                         <tr>
                             <td>Equalizer High</td>
-                            <td class='text-end'>[" + String(eqHigh) + "dB"]</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Balance (range -16 | +16)</td>
-                            <td class='text-end'>" + String(balanceLevel) + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Path to playlist</td>
-                            <td class='text-end'>" + currentPlaylist + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Index in playlist (starting from 0)</td>
-                            <td class='text-end'>" + String(currentPlaylistPosition) + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource path</td>
-                            <td class='text-end'>" + pbInfo.resourcePath + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource type</td>
-                            <td class='text-end'>" + pbInfo.type + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource title</td>
-                            <td class='text-end'>" + pbInfo.title + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource album</td>
-                            <td class='text-end'>" + pbInfo.album + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource artist</td>
-                            <td class='text-end'>" + pbInfo.artist + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource track number</td>
-                            <td class='text-end'>" + pbInfo.track + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource year</td>
-                            <td class='text-end'>" + pbInfo.year + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource genre</td>
-                            <td class='text-end'>" + pbInfo.genre + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource language (for TTS)</td>
-                            <td class='text-end'>" + pbInfo.tts_language + "</td>
+                            <td class='text-end'><span class="placeholder col-12"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -127,29 +121,23 @@
                         <tbody>
                         <tr>
                             <td>Version</td>
-                            <td class='text-end'>" + version + "</td>
+                            <td class='text-end' id="updatedLabel_VERSION_table"><span class="placeholder col-4"></span></td>
                         </tr>
                         <tr>
                             <td>Friendly name</td>
-                            <td class='text-end'>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME, "
-                                <not_given>") + "
-                            </td>
+                            <td class='text-end' id="updatedLabel_FRNAME_table"><span class="placeholder col-4"></span></td>
                         </tr>
                         <tr>
                             <td>Save & Restore state</td>
-                            <td class='text-end'>
-                                html += configuration.getBool(PREFERENCES_KEY_RESTORE_OLD_STATE, false) ? "yes" : "no
-                            </td>
+                            <td class='text-end' id="updatedLabel_RESTORESTATE_table"><span class="placeholder col-4"></span></td>
                         </tr>
                         <tr>
                             <td>Save & Restore playing state (default no)</td>
-                            <td class='text-end'>
-                                html += configuration.getBool(PREFERENCES_KEY_RESTORE_PLAYING, false) ? "yes" : "no
-                            </td>
+                            <td class='text-end' id="updatedLabel_RESTOREPLAYING_table"><span class="placeholder col-4"></span></td>
                         </tr>
                         <tr>
                             <td>WiFi SSID</td>
-                            <td class='text-end'>" + configuration.getString(PREFERENCES_KEY_WIFI_SSID, "") + "</td>
+                            <td class='text-end' id="updatedLabel_WIFISSID_table"><span class="placeholder col-4"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -181,20 +169,15 @@
                         <tbody>
                         <tr>
                             <td>Playing</td>
-                            <td class='text-end' id='playbackTable_audioPlayingValue'>
-                                html += audioPlaying ? "yes" : "no
-                            </td>
+                            <td class='text-end' id='playbackTable_audioPlayingValue'><span class="placeholder col-4"></span></td>
                         </tr>
                         <tr>
                             <td>Volume</td>
-                            <td class='text-end' id='playbackTable_volumeValue'>" + String(currentVolume) + "/" + String(maxVolume) + "%
-                            </td>
+                            <td class='text-end' id='playbackTable_volumeValue'><span class="placeholder col-4"></span></td>
                         </tr>
                         <tr>
                             <td>Muted</td>
-                            <td class='text-end' id='playbackTable_mutedValue'>
-                                html += muted ? "yes" : "no
-                            </td>
+                            <td class='text-end' id='playbackTable_mutedValue'><span class="placeholder col-4"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -324,7 +307,7 @@
                         <tbody>
                         <tr>
                             <td>Balance (range -16 | +16)</td>
-                            <td class='text-end' id='balanceChangeTable_balanceValue'>" + String(balanceLevel) + "</td>
+                            <td class='text-end' id='balanceChangeTable_balanceValue'><span class="placeholder col-12"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -337,7 +320,7 @@
             </div>
         </div>
 
-        <!--EQUALIZER Collapsible -->
+        <!-- EQUALIZER Collapsible -->
         <div class='accordion-item'>
             <h2 class='accordion-header'>
                 <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-eq'
@@ -352,15 +335,15 @@
                         <tbody>
                         <tr>
                             <td>Equalizer Low (-40dB to 6dB)</td>
-                            <td class='text-end' id='eqChangeTable_eqLowValue'>" + String(eqLow) + "dB</td>
+                            <td class='text-end' id='eqChangeTable_eqLowValue'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Equalizer Mid (-40dB to 6dB)</td>
-                            <td class='text-end' id='eqChangeTable_eqMidValue'>" + String(eqMid) + "dB</td>
+                            <td class='text-end' id='eqChangeTable_eqMidValue'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Equalizer High (-40dB to 6dB)</td>
-                            <td class='text-end' id='eqChangeTable_eqHighValue'>" + String(eqHigh) + "dB</td>
+                            <td class='text-end' id='eqChangeTable_eqHighValue'><span class="placeholder col-12"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -383,7 +366,7 @@
             </div>
         </div>
 
-        <!--FRIENDLY NAME Collapsible -->
+        <!-- FRIENDLY NAME Collapsible -->
         <div class='accordion-item'>
             <h2 class='accordion-header'>
                 <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
@@ -396,12 +379,12 @@
             <div id='accordion-collapse-frname' class='accordion-collapse collapse' data-bs-parent='#accordion'>
                 <div class='accordion-body'>
                     <div class='input-group mb-3'>
-                        <span class='input-group-text' id='frnameChange_oldName'>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME) + "</span>
+                        <span class='input-group-text' id='updatedLabel_FRNAME_oldinputtext'>...</span>
                         <span class='input-group-text'> -> </span>
                         <input type='text' class='form-control' placeholder='New friendly name' aria-label='New friendly name'
                                aria-describedby='frnameChange_BTN_submitName' id='frnameChange_newNameInput'>
                         <button class='btn btn-success' type='button' id='frnameChange_BTN_submitName' onclick=
-                                \"newNameInput
+                                "newNameInput
                         = document.getElementById('frnameChange_newNameInput'); if(newNameInput.value != ''){ http = new
                         XMLHttpRequest();http.open('GET',
                         '/api/v1/system/name/change?friendly_name='+newNameInput.value);http.send();document.getElementById('frnameChange_oldName').innerHTML=newNameInput.value;document.getElementById('title_frname').innerHTML=newNameInput.value;newNameInput.value='';
@@ -451,7 +434,7 @@
             </div>
         </div>
 
-        <!--SAVE AND RESTORE Collapsible -->
+        <!-- SAVE AND RESTORE Collapsible -->
         <div class='accordion-item'>
             <h2 class='accordion-header'>
                 <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
@@ -483,7 +466,7 @@
             </div>
         </div>
 
-        <!--RESTART Collapsible -->
+        <!-- RESTART Collapsible -->
         <div class='accordion-item'>
             <h2 class='accordion-header'>
                 <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
@@ -557,6 +540,103 @@
 
       alertPlaceholder.append(wrapper)
     }
+
+    function updateStrings() {
+        apiBase = "http://" + document.cookie;
+        versionApiEndpoint = "/api/v1/system/version";
+        frnameApiEndpoint = "/api/v1/system/name";
+        restoreStateApiEndpoint = "/api/v1/system/restore_state/get";
+        restorePlayingStateApiEndpoint = "/api/v1/system/restore_playing/get";
+        wifiApiEndpoint = "/api/v1/system/wifi/get_ssid";
+
+        /* Version string parser */
+        versionLabel1 = document.getElementById('updatedLabel_VERSION_title');
+        versionLabel2 = document.getElementById('updatedLabel_VERSION_table');
+
+        var versionRequest = new XMLHttpRequest();
+        versionRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var versionString = JSON.parse(this.responseText).version;
+                versionLabel1.innerHTML = versionString;
+                versionLabel2.innerHTML = versionString;
+            }
+        }
+        versionRequest.open("GET", apiBase + versionApiEndpoint, true);
+        versionRequest.send();
+
+
+        /* friendly name parser */
+        frnameLabel1 = document.getElementById('updatedLabel_FRNAME_title');
+        frnameLabel2 = document.getElementById('updatedLabel_FRNAME_table');
+        frnameLabel3 = document.getElementById('updatedLabel_FRNAME_oldinputtext');
+
+        var frnameRequest = new XMLHttpRequest();
+        frnameRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var frnameString = JSON.parse(this.responseText).friendly_name;
+                frnameLabel1.innerHTML = frnameString;
+                frnameLabel2.innerHTML = frnameString;
+                frnameLabel3.innerHTML = frnameString;
+            }
+        }
+        frnameRequest.open("GET", apiBase + frnameApiEndpoint, true);
+        frnameRequest.send();
+
+
+        /* Save & Restore parser */
+        restoreStateLabel1 = document.getElementById('updatedLabel_RESTORESTATE_table')
+        restorePlayingStateLabel1 = document.getElementById('updatedLabel_RESTOREPLAYING_table')
+
+        var restoreStateRequest = new XMLHttpRequest();
+        restoreStateRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var restoreStateString = JSON.parse(this.responseText).restore_state;
+                restoreStateLabel1.innerHTML = restoreStateString ? "yes" : "no";
+            }
+        }
+        restoreStateRequest.open("GET", apiBase + restoreStateApiEndpoint, true);
+        restoreStateRequest.send();
+        
+        var restorePlayingRequest = new XMLHttpRequest();
+        restorePlayingRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var restorePlayingString = JSON.parse(this.responseText).restore_playing;
+                restorePlayingStateLabel1.innerHTML = restorePlayingString ? "yes" : "no";
+            }
+        }
+        restorePlayingRequest.open("GET", apiBase + restorePlayingStateApiEndpoint, true);
+        restorePlayingRequest.send();
+
+
+        /* WiFi SSID parser */
+        wifiLabel1 = document.getElementById('updatedLabel_WIFISSID_table');
+
+        var wifiRequest = new XMLHttpRequest();
+        wifiRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var wifiSsidString = JSON.parse(this.responseText).wifi_ssid;
+                wifiLabel1.innerHTML = wifiSsidString;
+            }
+        }
+        wifiRequest.open("GET", apiBase + wifiApiEndpoint, true);
+        wifiRequest.send();
+
+        /* Playback info parser */
+
+        /* Volume parser */
+
+        /* Equalizer parser */
+
+        /* Balance parser */
+
+    }
+
+    function setupSite() {
+        document.title = "NetSpeaker Demo (on " + document.cookie + ")";
+        document.getElementById("title_onIP").innerHTML = "on " + document.cookie;
+        setTimeout(updateStrings, 1000);  // to make user see the epic placeholder glow effect of the bootstrap library
+        setInterval(updateStrings, 5000);
+    }
     
     if (document.cookie == "" || !isValidIP(document.cookie)) {
         var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
@@ -572,8 +652,7 @@
                     if (this.readyState == 4 && this.status == 200) {
                         appendAlert(alertPlaceholder, 'Working Configuration!', 'success');
                         document.cookie = ipAddressEntered;
-                        document.title = "NetSpeaker Demo (on " + ipAddressEntered + ")";
-                        document.getElementById("title_onIP").innerHTML = "on " + document.cookie;
+                        setupSite()
                         setTimeout(function(){
                             if(hideModalOnSuccess) selectIPModal.hide();
                         }, 500);
@@ -595,10 +674,8 @@
 
         const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn');
         ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); });
-    } else if (isValidIP(document.cookie)) {
-        document.title = "NetSpeaker Demo (on " + document.cookie + ")";
-        document.getElementById("title_onIP").innerHTML = "on " + document.cookie;
-    }
+
+    } else if (isValidIP(document.cookie)) setupSite();
 </script>
 </body>
 </html>
\ No newline at end of file
