diff --git a/Lib/appconf/appconf.js b/Lib/appconf/appconf.js
index 3a6ea94c..7347e3c6 100644
--- a/Lib/appconf/appconf.js
+++ b/Lib/appconf/appconf.js
@@ -576,25 +576,26 @@ var config = {
 }
 
 
-var vue_config = new Vue({
-    el: '#vue-config',
-    data: {
-        app_name: "App Name",
-        app_name_color: "#44b3e2",
-        app_description: "",
-        app_instructions: "",
-        config_name: "",
-        config_public: false,
-        config_items: [],
-        config_valid: false,
-        autogen_node: "",
-        autogen_feeds: [],
-        autogen_all_present: false,
-        autogen_status: "",
-        autogen_status_color: "#aaa",
-
-        // Button only currently used by myheatpump app.
-        enable_process_daily: false
+var vue_config_app = Vue.createApp({
+    data: function() {
+        return {
+            app_name: "App Name",
+            app_name_color: "#44b3e2",
+            app_description: "",
+            app_instructions: "",
+            config_name: "",
+            config_public: false,
+            config_items: [],
+            config_valid: false,
+            autogen_node: "",
+            autogen_feeds: [],
+            autogen_all_present: false,
+            autogen_status: "",
+            autogen_status_color: "#aaa",
+
+            // Button only currently used by myheatpump app.
+            enable_process_daily: false
+        };
     },
     methods: {
 
@@ -833,4 +834,6 @@ var vue_config = new Vue({
             config.reset_daily_data();
         }
     }
-});
\ No newline at end of file
+});
+
+var vue_config = vue_config_app.mount('#vue-config');
\ No newline at end of file
diff --git a/Lib/appconf/appconf.php b/Lib/appconf/appconf.php
index 146fb16d..ed5a3e02 100644
--- a/Lib/appconf/appconf.php
+++ b/Lib/appconf/appconf.php
@@ -5,9 +5,6 @@
     $app_conf_version = time(); // Use timestamp for cache busting during development, replace with static version for production
 ?>
 
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
-
-
 <link href="<?php echo $app_conf_path; ?>appconf.css?v=<?php echo $app_conf_version; ?>" rel="stylesheet">
 
 <div id="vue-config">
@@ -149,4 +146,4 @@
 </div>
 </div>
 
-<script type="text/javascript" src="<?php echo $app_conf_path; ?>appconf.js?v=<?php echo $app_conf_version; ?>"></script>
+<?php load_js('Modules/app/Lib/appconf/appconf.js'); ?>
\ No newline at end of file
diff --git a/Views/app_list.php b/Views/app_list.php
index cc0c9054..b07f0015 100644
--- a/Views/app_list.php
+++ b/Views/app_list.php
@@ -2,69 +2,204 @@
 defined('EMONCMS_EXEC') or die('Restricted access');
 global $path;
 ?>
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
+<style>
+  .content-container { max-width: 1150px; }
+</style>
+<style>
+/* Ensure icon wrappers in col-chip have no chip background/border */
+.col-chip > span[style][v-if],
+.col-chip > span[style][v-else-if] {
+    background: none !important;
+    border: none !important;
+    padding: 0 !important;
+    color: inherit;
+}
+</style>
+<div id="app">
 
-<div id="app" style="padding:20px">
-    <h2><?php echo _("My Apps"); ?></h2>
+    <div class="page-header">
+      <h2><?php echo tr('My Apps'); ?></h2>
+    </div>
 
-    <div v-if="apps.length == 0">
+    <div v-if="!apps.length" class="empty-state">
+        <h4><?php echo _("No apps"); ?></h4>
         <p><?php echo _("You have no apps yet. Click the button below to create your first app."); ?></p>
-        <a href="<?php echo $path; ?>app/new" class="btn btn-primary"><?php echo _("Create App"); ?></a>
     </div>
 
-    <div v-else>
-        <table class="table table-striped">
+    <div v-else class="card">
+        <div class="card-header">
+            <span class="card-accent"></span>
+            <span class="card-name"><?php echo _("My Apps"); ?></span>
+            <span class="card-badge">{{ apps.length }}</span>
+        </div>
+        <table>
+            <colgroup>
+                <col style="width:6%">
+                <col style="width:6%">
+                <col style="width:30%">
+                <col style="width:20%">
+                <col style="width:14%">
+            </colgroup>
             <thead>
                 <tr>
+                    <th class="col-action col-select">
+                        <input
+                            class="app-select-checkbox"
+                            type="checkbox"
+                            :checked="allSelected"
+                            :indeterminate.prop="isPartiallySelected"
+                            @change="toggleSelectAll($event.target.checked)"
+                            :title="allSelected ? '<?php echo _("Unselect all"); ?>' : '<?php echo _("Select all"); ?>'"
+                        />
+                    </th>
                     <th><?php echo _("ID"); ?></th>
-                    <th><?php echo _("App"); ?></th>
                     <th><?php echo _("Name"); ?></th>
-                    <th><?php echo _("Public"); ?></th>
-                    <th><?php echo _("Actions"); ?></th>
+                    <th><?php echo _("Type"); ?></th>
+                    <th><?php echo _("Visibility"); ?></th>
                 </tr>
             </thead>
             <tbody>
-                <tr v-for="app in apps" :key="app.id">
-                    <td>{{ app.id }}</td>
-                    <td><span class="label label-info">{{ app.app }}</span></td>
-                    <td>
-                        <span v-if="!app.editing">{{ app.name }}</span>
-                        <input v-else type="text" class="input-medium" v-model="app.editName" />
-                    </td>
-                    <td>
-                        <span v-if="!app.editing">
-                            <span class="badge" :class="app.public ? 'badge-success' : ''">{{ app.public ? '<?php echo _("Public"); ?>' : '<?php echo _("Private"); ?>' }}</span>
-                        </span>
-                        <span v-else>
-                            <label class="checkbox inline" style="margin:0">
-                                <input type="checkbox" v-model="app.editPublic" /> <?php echo _("Public"); ?>
-                            </label>
-                        </span>
+                <tr v-for="app in apps" :key="app.id" class="app-row" @click="openApp(app)">
+                    <td class="col-action">
+                        <input
+                            class="app-select-checkbox"
+                            type="checkbox"
+                            :value="app.id"
+                            v-model="selectedAppIds"
+                            @click.stop
+                            :title="'<?php echo _("Select"); ?> ' + app.name"
+                        />
                     </td>
-                    <td>
-                        <div v-if="!app.editing" class="btn-group">
-                            <a :href="'<?php echo $path; ?>app/view?name=' + encodeURIComponent(app.name)" class="btn btn-small btn-info"><?php echo _("View"); ?></a>
-                            <button class="btn btn-small" @click="editApp(app)"><?php echo _("Edit"); ?></button>
-                            <button class="btn btn-small btn-danger" @click="deleteApp(app.id)"><i class="icon-trash icon-white"></i></button>
+                    <td class="col-secondary">{{ app.id }}</td>
+                    <td class="col-primary">
+                        <div v-if="!app.editing" class="app-name-line">
+                            <span style="font-weight:600">{{ app.name }}</span>
+                            <i class="icon-pencil row-action" @click.stop="editApp(app)" title="<?php echo _("Edit"); ?>"></i>
                         </div>
-                        <div v-else class="btn-group">
-                            <button class="btn btn-small btn-success" @click="saveApp(app)"><i class="icon-ok icon-white"></i> <?php echo _("Save"); ?></button>
-                            <button class="btn btn-small" @click="cancelEdit(app)"><?php echo _("Cancel"); ?></button>
+                        <div v-else class="inline-edit" @click.stop>
+                            <input type="text" v-model="app.editName" />
+                            <button class="app-btn app-btn-sm" @click.stop="saveApp(app)"><i class="icon-check"></i></button>
                         </div>
                     </td>
+                    <td class="col-chip">
+                                                <span v-if="app.app === 'mysolarpvbattery'" style="margin-right:0.4em; color: #FFD600; background: transparent; border: none; padding: 0;">
+                                                    <span class="icon icon-sun" title="Solar PV Battery"></span>
+                                                </span>
+                                                <span v-else-if="app.app === 'myheatpump'" style="margin-right:0.4em; color: #2196F3; background: transparent; border: none; padding: 0;">
+                                                    <span class="icon icon-home" title="Heat Pump"></span>
+                                                </span>
+                                                <span v-else-if="app.app === 'octopus'" style="margin-right:0.4em; color: #E040FB; background: transparent; border: none; padding: 0;">
+                                                    <span class="icon icon-smartplug" title="Octopus Tariff"></span>
+                                                </span>
+                    </td>
+
+
+                    <td class="col-secondary" v-if="!app.editing">
+                        <button
+                            class="app-visibility-badge"
+                            :class="app.public ? 'is-public' : 'is-private'"
+                            @click.stop="toggleVisibility(app)"
+                            :title="app.public ? '<?php echo _("Click to make private"); ?>' : '<?php echo _("Click to make public"); ?>'"
+                        >
+                            {{ app.public ? '<?php echo _("Public"); ?>' : '<?php echo _("Private"); ?>' }}
+                        </button>
+                    </td>
+                    <td v-else></td>
                 </tr>
             </tbody>
         </table>
-        <a href="<?php echo $path; ?>app/new" class="btn btn-info"><?php echo _("Create New App"); ?></a>
     </div>
 
+    <div class="app-toolbar">
+        <button v-if="selectedAppIds.length" class="app-btn app-btn-danger" @click="deleteSelectedApps()">
+            <i class="icon-trash"></i>
+            <?php echo _("Delete selected"); ?> ({{ selectedAppIds.length }})
+        </button>
+        <a class="btn btn-primary" href="<?php echo $path; ?>app/new"><i class="icon-plus-sign"></i> <?php echo _("New app"); ?></a>
+    </div>
 
 </div>
+<style>
+.app-select-checkbox {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    accent-color: var(--accent);
+    cursor: pointer;
+}
+
+th.col-select .app-select-checkbox {
+    display: block;
+    margin: 0 auto;
+}
+
+html.color-mode-dark .app-select-checkbox {
+    filter: brightness(1.05);
+}
+
+html.color-mode-light .app-select-checkbox {
+    filter: none;
+}
+
+.app-name-line {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.app-row {
+    cursor: pointer;
+}
+
+.app-visibility-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-strong);
+    border-radius: 999px;
+    padding: 0 0.55rem;
+    min-height: 22px;
+    font-size: var(--font-xs);
+    line-height: 1.6;
+    cursor: pointer;
+    background: transparent;
+    color: var(--text-secondary);
+}
+
+.app-visibility-badge.is-public {
+    border-color: rgba(54, 158, 87, 0.5);
+    color: #5ac37a;
+    background: rgba(54, 158, 87, 0.13);
+}
+
+.app-visibility-badge.is-private {
+    border-color: var(--border-strong);
+    color: var(--text-secondary);
+    background: var(--bg-card-row-hover);
+}
+
+.app-visibility-badge:hover,
+.app-visibility-badge:focus {
+    border-color: var(--accent);
+    color: var(--text-primary);
+    outline: none;
+}
+</style>
 <script>
-var app = new Vue({
-    el: '#app',
-    data: {
-        apps: []
+var app = Vue.createApp({
+    data: function() {
+        return {
+            apps: [],
+            selectedAppIds: []
+        };
+    },
+    computed: {
+        allSelected() {
+            return this.apps.length > 0 && this.selectedAppIds.length === this.apps.length;
+        },
+        isPartiallySelected() {
+            return this.selectedAppIds.length > 0 && !this.allSelected;
+        }
     },
     mounted() {
         this.getApps();
@@ -79,22 +214,26 @@
                         app.public = parseInt(app.public);
                         app.editing = false;
                         app.editName = app.name;
-                        app.editPublic = !!app.public;
                     });
                     this.apps = data;
+                    const validIds = new Set(data.map(app => app.id));
+                    this.selectedAppIds = this.selectedAppIds.filter(id => validIds.has(id));
                 });
         },
+        toggleSelectAll(shouldSelectAll) {
+            this.selectedAppIds = shouldSelectAll ? this.apps.map(app => app.id) : [];
+        },
         editApp(app) {
             app.editName = app.name;
-            app.editPublic = !!app.public;
             app.editing = true;
         },
-        cancelEdit(app) {
-            app.editing = false;
-        },
         saveApp(app) {
             const nameChanged = app.editName !== app.name;
-            const publicChanged = (app.editPublic ? 1 : 0) !== app.public;
+
+            if (!nameChanged) {
+                app.editing = false;
+                return;
+            }
 
             const promises = [];
 
@@ -105,42 +244,66 @@
                         .then(data => { if (!data.success) throw new Error(data.message); })
                 );
             }
-            if (publicChanged) {
-                promises.push(
-                    fetch('<?php echo $path; ?>app/setpublic?id=' + app.id + '&public=' + (app.editPublic ? 1 : 0))
-                        .then(r => r.json())
-                        .then(data => { if (!data.success) throw new Error(data.message); })
-                );
-            }
-
             Promise.all(promises)
                 .then(() => {
                     app.name = app.editName;
-                    app.public = app.editPublic ? 1 : 0;
                     app.editing = false;
                 })
                 .catch(err => {
                     alert('<?php echo _("Failed to save changes"); ?>: ' + err.message);
                 });
         },
-        deleteApp(appId) {
-            if (confirm('<?php echo _("Are you sure you want to delete this app?"); ?>')) {
-                fetch('<?php echo $path; ?>app/remove?id='+appId, {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    }
-                })
+        openApp(app) {
+            if (app.editing) return;
+            window.location.href = '<?php echo $path; ?>app/view?name=' + encodeURIComponent(app.name);
+        },
+        toggleVisibility(app) {
+            const newPublicValue = app.public ? 0 : 1;
+
+            fetch('<?php echo $path; ?>app/setpublic?id=' + app.id + '&public=' + newPublicValue)
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
-                        this.getApps();
+                        app.public = newPublicValue;
                     } else {
-                        alert('<?php echo _("Failed to delete app."); ?>');
+                        throw new Error(data.message || '<?php echo _("Failed to update visibility."); ?>');
                     }
+                })
+                .catch(err => {
+                    alert('<?php echo _("Failed to update visibility."); ?>: ' + err.message);
                 });
-            }
+        },
+        deleteSelectedApps() {
+            if (!this.selectedAppIds.length) return;
+
+            const appCount = this.selectedAppIds.length;
+            const confirmMessage = appCount === 1
+                ? '<?php echo _("Are you sure you want to delete this app?"); ?>'
+                : '<?php echo _("Are you sure you want to delete these apps?"); ?>';
+
+            if (!confirm(confirmMessage)) return;
+
+            Promise.all(this.selectedAppIds.map(appId => {
+                return fetch('<?php echo $path; ?>app/remove?id=' + appId, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }).then(response => response.json());
+            }))
+            .then(results => {
+                const allSuccessful = results.every(result => result && result.success);
+                if (allSuccessful) {
+                    this.selectedAppIds = [];
+                    this.getApps();
+                } else {
+                    alert('<?php echo _("Failed to delete one or more apps."); ?>');
+                }
+            })
+            .catch(() => {
+                alert('<?php echo _("Failed to delete one or more apps."); ?>');
+            });
         }
     }
-});
+}).mount('#app');
 </script>
\ No newline at end of file
diff --git a/Views/app_view.php b/Views/app_view.php
index 18642b01..b4e2dd25 100644
--- a/Views/app_view.php
+++ b/Views/app_view.php
@@ -1,108 +1,133 @@
 <?php global $path; ?>
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
 
-<div style="padding:20px">
+<div id="app-page" style="padding:20px">
 
-  <h2>Available Apps</h2>
-  <p>Create a new instance of an app by clicking on one of the apps below.</p>
+    <h2>Available Apps</h2>
+    <p>Create a new instance of an app by clicking on one of the apps below.</p>
 
-  <div id="available-apps">
+    <div id="available-apps">
 
-    <p><b>Featured apps:</b></p>
+        <p><b>Featured apps:</b></p>
 
-    <div class="app-group">
-      <div class="app-item" v-for="(app, index) in apps" :key="index" :app="index" v-if="app.primary">
-        <div class="app-item-title">{{ app.title }}</div>
-        <div class="app-item-description">{{ app.description || "no description..." }}</div>
-      </div>
-    </div>
-    <br>
-
-    <p><b>All apps:</b></p>
+        <div class="app-group">
+            <div class="app-item" v-for="entry in featuredApps" :key="entry.id" @click="openCreateModal(entry.id)">
+                <div class="app-item-title">{{ entry.app.title }}</div>
+                <div class="app-item-description">{{ entry.app.description || "no description..." }}</div>
+            </div>
+        </div>
+        <br>
 
-    <div class="app-group">
-      <div class="app-item" v-for="(app, index) in apps" :key="index" :app="index" v-if="!app.primary">
-        <div class="app-item-title">{{ app.title }}</div>
-        <div class="app-item-description">{{ app.description || "no description..." }}</div>
-      </div>
-    </div>
+        <p><b>All apps:</b></p>
 
-  </div>
+        <div class="app-group">
+            <div class="app-item" v-for="entry in otherApps" :key="entry.id" @click="openCreateModal(entry.id)">
+                <div class="app-item-title">{{ entry.app.title }}</div>
+                <div class="app-item-description">{{ entry.app.description || "no description..." }}</div>
+            </div>
+        </div>
 
-</div>
+    </div>
 
 <!-------------------------------------------------------------------------------------------
   MODALS
 -------------------------------------------------------------------------------------------->
 <!-- GROUP CREATE -->
-<div id="app-new-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="app-new-modal-label" aria-hidden="true" data-backdrop="static">
+<dialog id="app-new-modal" class="ec-modal" aria-labelledby="app-new-modal-label" data-backdrop="static" style="--modal-width: 620px;">
     <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h3 id="app-new-modal-label">Please enter name for app</h3>
+        <button type="button" class="modal-close-btn" data-modal-close aria-label="Close">&times;</button>
+        <h3 id="app-new-modal-label">{{ modalTitle }}</h3>
     </div>
     <div class="modal-body">
 
-    <p>Enter a unique name for the app:<br>
-    <input id="app-new-name" type="text"></p>
+        <p>Enter a unique name for the app:<br>
+            <input id="app-new-name" type="text" v-model="appName"></p>
 
     </div>
     <div class="modal-footer">
-        <button id="app-new-cancel" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
-        <button id="app-new-action" class="btn btn-primary">Create</button>
+        <button id="app-new-cancel" class="btn" data-modal-close @click="cancelCreate">Cancel</button>
+        <button id="app-new-action" class="btn btn-primary" @click="createApp">Create</button>
     </div>
+</dialog>
+
 </div>
 
 <script>
 
 var available_apps = JSON.parse('<?php echo json_encode($apps); ?>');
-var selected_app = "";
-var app_new_enable = true;
-
-
-var app_list = new Vue({
-    el: '#available-apps',
-    data: {
-        apps: available_apps
-    }
-});
-
-
-$(function() {
-    $(".app-group").each(function() { $(this).find(".app-item").first().css("border-top","1px solid #ccc"); });
-
-    $(".app-item").click(function(){
-        if (app_new_enable) {
-            var app = $(this).attr("app");
-            selected_app = app;
-            $("#app-new-modal-label").html("Create app: "+available_apps[app].title);
-            $("#app-new-name").val(available_apps[app].title);
-            $('#app-new-modal').modal('show');
-        }
-    });
-
-    $("#app-new-action").click(function(){
-        app_new_enable = false;
-        setTimeout(function(){ app_new_enable = true; }, 500);
-        $('#app-new-modal').modal('hide');
-        
-        var app_name = $("#app-new-name").val();
-        app_name =  app_name.replace(/\W/g, '');
-        var nicename = escape(app_name).replace(/%20/g, "+");
-        $.ajax({                                      
-            url: path+"app/add?name="+nicename+"&app="+selected_app,
-            dataType: 'json',
-            async: true,
-            success: function(result) {
-                // console.log(result);
-                window.location = path+"app/view?name="+nicename;
+var app_list = Vue.createApp({
+    data: function() {
+        return {
+            apps: available_apps,
+            selectedApp: "",
+            appName: "",
+            appNewEnable: true
+        };
+    },
+    computed: {
+        appEntries: function() {
+            var entries = [];
+            for (var id in this.apps) {
+                if (Object.prototype.hasOwnProperty.call(this.apps, id) && this.apps[id]) {
+                    entries.push({ id: id, app: this.apps[id] });
+                }
+            }
+            return entries;
+        },
+        featuredApps: function() {
+            return this.appEntries.filter(function(entry) {
+                return !!entry.app.primary;
+            });
+        },
+        otherApps: function() {
+            return this.appEntries.filter(function(entry) {
+                return !entry.app.primary;
+            });
+        },
+        modalTitle: function() {
+            if (this.selectedApp === "") {
+                return "Please enter name for app";
             }
+            return "Create app: " + (this.apps[this.selectedApp] ? this.apps[this.selectedApp].title : "");
+        }
+    },
+    methods: {
+        openCreateModal: function(index) {
+            if (!this.appNewEnable) return;
+            if (!this.apps[index]) return;
+            this.selectedApp = index;
+            this.appName = this.apps[index].title;
+            emoncmsModal.open('app-new-modal');
+        },
+        createApp: function() {
+            var self = this;
+            self.appNewEnable = false;
+            setTimeout(function() { self.appNewEnable = true; }, 500);
+            emoncmsModal.close('app-new-modal');
+
+            var app_name = self.appName;
+            app_name = app_name.replace(/\W/g, '');
+            var nicename = escape(app_name).replace(/%20/g, "+");
+            $.ajax({                                      
+                url: path + "app/add?name=" + nicename + "&app=" + self.selectedApp,
+                dataType: 'json',
+                async: true,
+                success: function(result) {
+                    // console.log(result);
+                    window.location = path + "app/view?name=" + nicename;
+                }
+            });
+        },
+        cancelCreate: function() {
+            var self = this;
+            self.appNewEnable = false;
+            setTimeout(function() { self.appNewEnable = true; }, 500);
+        }
+    },
+    mounted: function() {
+        $(".app-group").each(function() {
+            $(this).find(".app-item").first().css("border-top", "1px solid #ccc");
         });
-    });
-
-    $("#app-new-cancel").click(function(){
-        app_new_enable = false;
-        setTimeout(function(){ app_new_enable = true; }, 500);
-    });
-})
+    }
+}).mount('#app-page');
 
 </script>
diff --git a/app_model.php b/app_model.php
index b468775e..969e2ef5 100644
--- a/app_model.php
+++ b/app_model.php
@@ -432,7 +432,7 @@ private function migrate_v2_9() {
 
         $main_result = $this->mysqli->query("SELECT `userid`, `data` FROM app_config");
         while ($row = $main_result->fetch_object()) {
-            $userid = $row->userid;
+            $userid = (int) $row->userid;
             $applist = json_decode($row->data);
             if (gettype($applist)=="array" || $applist===null) $applist = new stdClass();
 
@@ -441,8 +441,13 @@ private function migrate_v2_9() {
                 // print "Migrating app $name : $app for userid $row->userid\n";
 
                 // Check if app exists with this name in app table
-                $result = $this->mysqli->query("SELECT `id` FROM app WHERE `userid`='$userid' AND `name`='$name'");
-                if ($result->num_rows) {
+                $stmt = $this->mysqli->prepare("SELECT `id` FROM app WHERE `userid`=? AND `name`=?");
+                $stmt->bind_param("is", $userid, $name);
+                $stmt->execute();
+                $stmt->store_result();
+                $num_rows = $stmt->num_rows;
+                $stmt->close();
+                if ($num_rows) {
                     // App already exists (this should not happen)
                     // print "App already exists\n";
                 } else {
diff --git a/apps/OpenEnergyMonitor/co2monitor/co2monitor.php b/apps/OpenEnergyMonitor/co2monitor/co2monitor.php
index 72a7e20b..b021d8fe 100644
--- a/apps/OpenEnergyMonitor/co2monitor/co2monitor.php
+++ b/apps/OpenEnergyMonitor/co2monitor/co2monitor.php
@@ -90,12 +90,8 @@
             </button></li>
     </ul>
     <ul class="text-right nav nav-pills mb-0">
-        <li><button class="btn btn-large btn-link btn-inverse config-open" title="<?php echo tr('Edit') ?>"><svg class="icon">
-                    <use xlink:href="#icon-wrench"></use>
-                </svg></button></li>
-        <li><button class="btn btn-large btn-link btn-inverse config-close hide" title="<?php echo tr('Close') ?>"><svg class="icon">
-                    <use xlink:href="#icon-close"></use>
-                </svg></button></li>
+        <li><button class="btn btn-large btn-link btn-inverse config-open" title="<?php echo tr('Edit') ?>"><span class="svg-icon-wrench"></span></button></li>
+        <li><button class="btn btn-large btn-link btn-inverse config-close hide" title="<?php echo tr('Close') ?>"><span class="svg-icon-close"></span></button></li>
     </ul>
 </nav>
 
diff --git a/apps/OpenEnergyMonitor/config-nav.php b/apps/OpenEnergyMonitor/config-nav.php
index 4b7b04d8..85297671 100644
--- a/apps/OpenEnergyMonitor/config-nav.php
+++ b/apps/OpenEnergyMonitor/config-nav.php
@@ -1,4 +1,4 @@
 <ul class="text-right nav nav-pills mb-0">
-    <li><button class="btn btn-large btn-link btn-inverse config-open" title="<?php echo tr('Edit') ?>"><svg class="icon"><use xlink:href="#icon-wrench"></use></svg></button></li>
-    <li><button class="btn btn-large btn-link btn-inverse config-close hide" title="<?php echo tr('Close') ?>"><svg class="icon"><use xlink:href="#icon-close"></use></svg></button></li>
-</ul>
\ No newline at end of file
+    <li><button class="btn btn-large btn-link btn-inverse config-open" title="<?php echo tr('Edit') ?>"><span class="svg-icon-wrench"></span></button></li>
+    <li><button class="btn btn-large btn-link btn-inverse config-close hide" title="<?php echo tr('Close') ?>"><span class="svg-icon-close"></span></button></li>
+</ul>
diff --git a/apps/OpenEnergyMonitor/costcomparison/costcomparison.php b/apps/OpenEnergyMonitor/costcomparison/costcomparison.php
index 4cf0bfdb..781bc69d 100644
--- a/apps/OpenEnergyMonitor/costcomparison/costcomparison.php
+++ b/apps/OpenEnergyMonitor/costcomparison/costcomparison.php
@@ -11,7 +11,7 @@
 <!--<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.axislabels.min.js?v=<?php echo $v; ?>"></script>-->
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; echo $appdir; ?>rates.js?v=<?php echo $v; ?>"></script>
 
diff --git a/apps/OpenEnergyMonitor/feedin/feedin.php b/apps/OpenEnergyMonitor/feedin/feedin.php
index 8cee0da4..56d59a2f 100644
--- a/apps/OpenEnergyMonitor/feedin/feedin.php
+++ b/apps/OpenEnergyMonitor/feedin/feedin.php
@@ -12,7 +12,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script>
 
 <section id="app-block" class="app hide">
     <div class="app-block info">
diff --git a/apps/OpenEnergyMonitor/myboiler/myboiler.php b/apps/OpenEnergyMonitor/myboiler/myboiler.php
index 7ad145db..bcae87a6 100644
--- a/apps/OpenEnergyMonitor/myboiler/myboiler.php
+++ b/apps/OpenEnergyMonitor/myboiler/myboiler.php
@@ -10,7 +10,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 <link href="<?php echo $path; ?>Modules/app/apps/OpenEnergyMonitor/myboiler/style.css?v=38>" rel="stylesheet">
 
diff --git a/apps/OpenEnergyMonitor/myelectric2/myelectric2.php b/apps/OpenEnergyMonitor/myelectric2/myelectric2.php
index 5b9a280c..1050c420 100644
--- a/apps/OpenEnergyMonitor/myelectric2/myelectric2.php
+++ b/apps/OpenEnergyMonitor/myelectric2/myelectric2.php
@@ -10,7 +10,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script> 
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 
 <style>
diff --git a/apps/OpenEnergyMonitor/myenergy/myenergy.php b/apps/OpenEnergyMonitor/myenergy/myenergy.php
index 8abfb7db..d8f73135 100644
--- a/apps/OpenEnergyMonitor/myenergy/myenergy.php
+++ b/apps/OpenEnergyMonitor/myenergy/myenergy.php
@@ -9,7 +9,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Modules/app/Lib/timeseries.js?v=<?php echo $v; ?>"></script>
 <nav id="buttons" class="d-flex justify-content-between">
diff --git a/apps/OpenEnergyMonitor/myheatpump/myheatpump.js b/apps/OpenEnergyMonitor/myheatpump/myheatpump.js
index 74863c73..5eebe2bf 100644
--- a/apps/OpenEnergyMonitor/myheatpump/myheatpump.js
+++ b/apps/OpenEnergyMonitor/myheatpump/myheatpump.js
@@ -1,3 +1,5 @@
+var urlParams = Object.fromEntries(new URLSearchParams(window.location.search));
+
 feed.apikey = apikey;
 feed.public_userid = public_userid;
 feed.public_username = public_username;
@@ -107,7 +109,7 @@ var realtime_cop_div_mode = "30min";
 var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
 // duration contants (milliseonds)
-const MINUTE = 60 * 1000;
+const MINUTE = 60;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
 
@@ -207,14 +209,14 @@ function show() {
     resize();
 
     var date = new Date();
-    var now = date.getTime();
+    var now = date.getTime() * 0.001;
 
-    end = end_time * 1000;
+    end = end_time;
 
     if (now - end > HOUR) {
         $("#last_updated").show();
         $("#live_table").hide();
-        date.setTime(end);
+        date.setTime(end*1000);
         let h = date.getHours();
         let m = date.getMinutes();
         if (h < 10) h = "0" + h;
@@ -248,13 +250,13 @@ function show() {
 
     // If this is a new dashboard there will be less than a days data 
     // show power graph directly in this case
-    var timeWindow = (end - start_time * 1000);
+    var timeWindow = (end - start_time);
     if (timeWindow < 3 * DAY || viewmode == "powergraph") {
         if (timeWindow > 3 * DAY) timeWindow = DAY;
         var start = end - timeWindow;
 
-        if (urlParams.start != undefined) start = urlParams.start * 1000;
-        if (urlParams.end != undefined) end = urlParams.end * 1000;
+        if (urlParams.start != undefined) start = urlParams.start;
+        if (urlParams.end != undefined) end = urlParams.end;
         if (urlParams.hours != undefined) start = end - urlParams.hours * HOUR;
 
         view.start = start;
@@ -267,10 +269,10 @@ function show() {
     } else {
         var timeWindow = 30 * DAY;
         var start = end - timeWindow;
-        if (start < (start_time * 1000)) start = start_time * 1000;
+        if (start < start_time) start = start_time;
 
-        if (urlParams.start != undefined) start = urlParams.start * 1000;
-        if (urlParams.end != undefined) end = urlParams.end * 1000;
+        if (urlParams.start != undefined) start = urlParams.start;
+        if (urlParams.end != undefined) end = urlParams.end;
         
         bargraph_load(start, end);
         bargraph_draw();
@@ -506,9 +508,9 @@ $(".viewhistory").click(function () {
     $(".powergraph-navigation").hide();
     var timeWindow = 30 * DAY;
     // var end = (new Date()).getTime();
-    var end = end_time * 1000;
+    var end = end_time;
     var start = end - timeWindow;
-    if (start < (start_time * 1000)) start = start_time * 1000;
+    if (start < start_time) start = start_time;
 
     if (last_bargraph_start && last_bargraph_end) {
         start = last_bargraph_start;
@@ -523,13 +525,14 @@ $(".viewhistory").click(function () {
     $("#advanced-block").hide();
 });
 
-$('#placeholder').bind("plothover", function (event, pos, item) {
+document.getElementById('placeholder')?.addEventListener('plothover', function (event) {
+    const item = event.detail?.[1];
     if (item) {
         if (previousPoint != item.datapoint) {
             previousPoint = item.datapoint;
 
             $("#tooltip").remove();
-            if (viewmode == "bargraph") {           
+            if (viewmode == "bargraph") {
                 bargraph_tooltip(item);
             } else if (viewmode == "powergraph") {
                 powergraph_tooltip(item);
@@ -539,16 +542,18 @@ $('#placeholder').bind("plothover", function (event, pos, item) {
 });
 
 // Auto click through to power graph
-$('#placeholder').bind("plotclick", function (event, pos, item) {
+document.getElementById('placeholder')?.addEventListener('plotclick', function (event) {
+    const item = event.detail?.[1];
     if (item && !panning && viewmode == "bargraph") {
 
         last_bargraph_start = bargraph_start;
         last_bargraph_end = bargraph_end;
 
         var z = item.dataIndex;
-        view.start = data["heatpump_elec_kwhd"][z][0];
+        view.start = data["heatpump_elec_kwhd"][z][0]*1;
         view.end = view.start + DAY;
         viewmode = "powergraph";
+
         powergraph_load();
 
         $(".bargraph-navigation").hide();
@@ -562,7 +567,9 @@ $('#placeholder').bind("plotclick", function (event, pos, item) {
     }
 });
 
-$('#placeholder').bind("plotselected", function (event, ranges) {
+document.getElementById('placeholder')?.addEventListener('plotselected', function (event) {
+    const ranges = event.detail?.[0];
+    if (!ranges?.xaxis) return;
     var start = ranges.xaxis.from;
     var end = ranges.xaxis.to;
     panning = true;
diff --git a/apps/OpenEnergyMonitor/myheatpump/myheatpump.php b/apps/OpenEnergyMonitor/myheatpump/myheatpump.php
index 3d0a699e..568caef4 100644
--- a/apps/OpenEnergyMonitor/myheatpump/myheatpump.php
+++ b/apps/OpenEnergyMonitor/myheatpump/myheatpump.php
@@ -6,16 +6,13 @@
 
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Montserrat&amp;lang=en" />
 
-<script type="text/javascript" src="<?php echo $path; ?>Modules/feed/feed.js?v=102"></script>
-
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/misc/clipboard.js?v=<?php echo $v; ?>"></script>
-<link href="<?php echo $path; ?>Modules/app/apps/OpenEnergyMonitor/myheatpump/style.css?v=49>" rel="stylesheet">
+<?php 
+load_js("Modules/feed/feed.js");
+load_js("Lib/js/flot-5.1.0.js"); 
+load_js("Lib/js/vis.helper.js");
+load_js("Lib/misc/clipboard.js");
+load_css("Modules/app/apps/OpenEnergyMonitor/myheatpump/style.css");
+?>
 
 <div style="font-family: Montserrat, Veranda, sans-serif;">
   <div id="app-block" style="display:none">
@@ -78,10 +75,10 @@
 
           <div class="bargraph-navigation">
             <div class="bluenav bargraph_mode" mode="combined" title="Combined" style="float:left">ALL</div>
-            <div class="bluenav bargraph_mode" mode="running" title="When running" style="float:left;padding: 12px 8px 0px 7px; height: 30px; font-size:20px"><svg class="icon"><use xlink:href="#icon-play"></use></svg></div>
-            <div class="bluenav bargraph_mode" mode="space" title="Space heating" style="float:left;padding: 8px 8px 0px 7px;height: 35px; font-size:28px"><svg class="icon"><use xlink:href="#icon-radiator"></use></svg></div>
-            <div class="bluenav bargraph_mode" mode="water" title="Water heating" style="float:left;padding: 12px 8px 0px 7px;height: 30px; font-size:20px"><svg class="icon"><use xlink:href="#icon-shower"></use></svg></div>
-            <div class="bluenav bargraph_mode" mode="cooling" title="Cooling" style="float:left;padding: 12px 8px 0px 7px;height: 30px; font-size:20px"><svg class="icon"><use xlink:href="#icon-snowflake"></use></svg></div>
+            <div class="bluenav bargraph_mode" mode="running" title="When running" style="float:left;padding: 12px 8px 0px 7px; height: 30px; font-size:20px"><span class="svg-icon-play"></span></div>
+            <div class="bluenav bargraph_mode" mode="space" title="Space heating" style="float:left;padding: 8px 8px 0px 7px;height: 35px; font-size:28px"><span class="svg-icon-radiator"></span></div>
+            <div class="bluenav bargraph_mode" mode="water" title="Water heating" style="float:left;padding: 12px 8px 0px 7px;height: 30px; font-size:20px"><span class="svg-icon-shower"></span></div>
+            <div class="bluenav bargraph_mode" mode="cooling" title="Cooling" style="float:left;padding: 12px 8px 0px 7px;height: 30px; font-size:20px"><span class="svg-icon-snowflake"></span></div>
 
             <div class="bluenav bargraph-alltime">ALL</div>
             <div class="bluenav bargraph-period" days=365>YEAR</div>
@@ -394,8 +391,9 @@
   config.db = <?php echo json_encode($config); ?>;
 </script>
 
-<?php $v=197; ?>
-<script type="text/javascript" src="<?php echo $path; ?>Modules/app/apps/OpenEnergyMonitor/myheatpump/myheatpump_process.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Modules/app/apps/OpenEnergyMonitor/myheatpump/myheatpump_powergraph.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Modules/app/apps/OpenEnergyMonitor/myheatpump/myheatpump_bargraph.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Modules/app/apps/OpenEnergyMonitor/myheatpump/myheatpump.js?v=<?php echo $v; ?>"></script>
+<?php
+load_js("Modules/app/apps/OpenEnergyMonitor/myheatpump/myheatpump_process.js");
+load_js("Modules/app/apps/OpenEnergyMonitor/myheatpump/myheatpump_powergraph.js");
+load_js("Modules/app/apps/OpenEnergyMonitor/myheatpump/myheatpump_bargraph.js");
+load_js("Modules/app/apps/OpenEnergyMonitor/myheatpump/myheatpump.js");
+?>
diff --git a/apps/OpenEnergyMonitor/myheatpump/myheatpump_bargraph.js b/apps/OpenEnergyMonitor/myheatpump/myheatpump_bargraph.js
index 47cffa06..42449873 100644
--- a/apps/OpenEnergyMonitor/myheatpump/myheatpump_bargraph.js
+++ b/apps/OpenEnergyMonitor/myheatpump/myheatpump_bargraph.js
@@ -52,9 +52,9 @@ function bargraph_load(start, end) {
 
     $("#data-error").hide();
 
-    var intervalms = DAY;
-    end = Math.ceil(end / intervalms) * intervalms;
-    start = Math.floor(start / intervalms) * intervalms;
+    var interval = DAY;
+    end = Math.ceil(end / interval) * interval;
+    start = Math.floor(start / interval) * interval;
 
     bargraph_start = start;
     bargraph_end = end;
@@ -67,7 +67,7 @@ function bargraph_load(start, end) {
         // format is csv
         $.ajax({
             url: path + "app/getdailydata",
-            data: { id: config.id, start: start*0.001, end: end*0.001, apikey: apikey },
+            data: { id: config.id, start: start, end: end, apikey: apikey },
             async: false,
             success: function (data) {
                 var rows = data.split("\n");
@@ -76,7 +76,7 @@ function bargraph_load(start, end) {
                 
                 for (var z = 1; z < rows.length; z++) {
                     var cols = rows[z].split(",");
-                    var timestamp = cols[1] * 1000;
+                    var timestamp = cols[1];
 
                     if (cols.length == fields.length) {
                         for (var i=2; i<fields.length; i++) {
@@ -238,14 +238,14 @@ function bargraph_draw() {
 
         data["heatpump_heat_kwhd"] = daily_data[bargraph_mode+"_heat_kwh"];
 
-        let color = 0;
+        let color = "#edc240";
         if (bargraph_mode == "cooling") {
             color = "#66b0ff";
         }
         
         bargraph_series.push({
             data: data["heatpump_heat_kwhd"], color: color,
-            bars: { show: true, align: "center", barWidth: 0.75 * DAY, fill: 1.0, lineWidth: 0 },
+            bars: { show: true, align: "center", barWidth: 0.75, fill: 1.0, lineWidth: 0 },
             stack: true
         });
 
@@ -260,7 +260,7 @@ function bargraph_draw() {
             data["cooling_heat_kwhd"] = daily_data["cooling_heat_kwh"];
             bargraph_series.push({
                 data: data["cooling_heat_kwhd"], color: "#66b0ff",
-                bars: { show: true, align: "center", barWidth: 0.75 * DAY, fill: 1.0, lineWidth: 0 }
+                bars: { show: true, align: "center", barWidth: 0.75, fill: 1.0, lineWidth: 0 }
             });
         }
     }
@@ -270,8 +270,8 @@ function bargraph_draw() {
         data["heatpump_elec_kwhd"] = daily_data[bargraph_mode+"_elec_kwh"];
 
         bargraph_series.push({
-            data: data["heatpump_elec_kwhd"], color: 1,
-            bars: { show: true, align: "center", barWidth: 0.75 * DAY, fill: 1.0, lineWidth: 0 },
+            data: data["heatpump_elec_kwhd"], color: "#afd8f8",
+            bars: { show: true, align: "center", barWidth: 0.75, fill: 1.0, lineWidth: 0 },
             stack: false
         });
 
@@ -287,7 +287,7 @@ function bargraph_draw() {
 
         bargraph_series.push({
             data: data["heatpump_outsideT_daily"], color: "#c880ff", yaxis: 2,
-            lines: { show: true, align: "center", fill: false }, points: { show: false }
+            lines: { show: true, align: "center", fill: false, lineWidth: 2 }, points: { show: false }
         });
     }
 
@@ -354,7 +354,7 @@ function bargraph_draw() {
         data["immersion_kwhd"] = daily_data["immersion_kwh"];
         bargraph_series.push({
             data: data["immersion_kwhd"], color: 4,
-            bars: { show: true, align: "center", barWidth: 0.75 * DAY, fill: 0.8, lineWidth: 0 },
+            bars: { show: true, align: "center", barWidth: 0.75, fill: 0.8, lineWidth: 0 },
             stack: true
         });
 
@@ -369,7 +369,7 @@ function bargraph_draw() {
         data["boiler_kwhd"] = daily_data["boiler_kwh"];
         bargraph_series.push({
             data: data["boiler_kwhd"], color: "#ff9e80",
-            bars: { show: true, align: "center", barWidth: 0.75 * DAY, fill: 0.8, lineWidth: 0 },
+            bars: { show: true, align: "center", barWidth: 0.75, fill: 0.8, lineWidth: 0 },
             stack: true
         });
 
@@ -430,6 +430,7 @@ function bargraph_draw() {
             max: bargraph_end
         },
         yaxes: [{
+            autoScale: "none",
             font: { size: flot_font_size, color: "#666" },
             // labelWidth:-5
             reserveSpace: false,
@@ -440,6 +441,7 @@ function bargraph_draw() {
             reserveSpace: false,
             // max:40
         }, {
+            autoScale: "none",
             font: { size: flot_font_size, color: "#44b3e2" },
             reserveSpace: false,
             min: 1,
@@ -447,7 +449,7 @@ function bargraph_draw() {
         }, {
             show: false
         }],
-        selection: { mode: "x" },
+        selection: { mode: 'x', color: '#e8cfac', visualization: 'fill' },
         grid: {
             show: true,
             color: "#aaa",
@@ -457,7 +459,8 @@ function bargraph_draw() {
         }
     }
     if ($('#placeholder').width()) {
-        var plot = $.plot($('#placeholder'), bargraph_series, options);
+        if (!window.Flot || typeof window.Flot.plot !== 'function') return;
+        var plot = window.Flot.plot($('#placeholder')[0], bargraph_series, options);
         $('#placeholder').append("<div id='bargraph-label' style='position:absolute;left:50px;top:30px;color:#666;font-size:12px'></div>");
     }
 }
@@ -485,7 +488,7 @@ function bargraph_tooltip(item)
     var COP = null;
     if (heat_kwh !== null && elec_kwh !== null) COP = heat_kwh / elec_kwh;
 
-    var d = new Date(itemTime);
+    var d = new Date(itemTime*1000);
     var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
     var date = days[d.getDay()] + ", " + months[d.getMonth()] + " " + d.getDate();
 
@@ -607,16 +610,16 @@ $('.bargraph-day').click(function () {
 $('.bargraph-period').click(function () {
     var days = $(this).attr("days");
     var timeWindow = days * DAY;
-    var end = (new Date()).getTime();
+    var end = (new Date()).getTime() * 0.001;
     var start = end - timeWindow;
-    if (start < (start_time * 1000)) start = start_time * 1000;
+    if (start < start_time) start = start_time;
     bargraph_load(start, end);
     bargraph_draw();
 });
 
 $('.bargraph-alltime').click(function () {
-    var start = start_time * 1000;
-    var end = (new Date()).getTime();
+    var start = start_time;
+    var end = (new Date()).getTime() * 0.001;
     bargraph_load(start, end);
     bargraph_draw();
 });
diff --git a/apps/OpenEnergyMonitor/myheatpump/myheatpump_powergraph.js b/apps/OpenEnergyMonitor/myheatpump/myheatpump_powergraph.js
index 656d97f5..01f35810 100644
--- a/apps/OpenEnergyMonitor/myheatpump/myheatpump_powergraph.js
+++ b/apps/OpenEnergyMonitor/myheatpump/myheatpump_powergraph.js
@@ -32,15 +32,15 @@ function powergraph_load() {
         "heatpump_ch": { label: "CH", yaxis: 4, color: "#FB6", lines: { lineWidth: 0, show: true, fill: 0.15 } },
         "heatpump_cooling": { label: "Cooling", yaxis: 4, color: "#66b0ff", lines: { lineWidth: 0, show: true, fill: 0.15 } },
         "heatpump_error": { label: "Error", yaxis: 4, color: "#F00", lines: { lineWidth: 0, show: true, fill: 0.15 } },
-        "heatpump_targetT": { label: "TargetT", yaxis: 2, color: "#ccc" },
-        "heatpump_flowT": { label: "FlowT", yaxis: 2, color: 2 },
-        "heatpump_returnT": { label: "ReturnT", yaxis: 2, color: 3 },
-        "heatpump_outsideT": { label: "OutsideT", yaxis: 2, color: "#c880ff" },
-        "heatpump_roomT": { label: "RoomT", yaxis: 2, color: "#000" },
-        "heatpump_flowrate": { label: "Flow rate", yaxis: 3, color: 6 },
+        "heatpump_targetT": { label: "TargetT", yaxis: 2, color: "#ccc", lines: { lineWidth: 1.8 } },
+        "heatpump_flowT": { label: "FlowT", yaxis: 2, color: "#cb4b4b", lines: { lineWidth: 1.8 } },
+        "heatpump_returnT": { label: "ReturnT", yaxis: 2, color: "#4da74d", lines: { lineWidth: 1.8 } },
+        "heatpump_outsideT": { label: "OutsideT", yaxis: 2, color: "#c880ff", lines: { lineWidth: 1.8 } },
+        "heatpump_roomT": { label: "RoomT", yaxis: 2, color: "#000", lines: { lineWidth: 1.8 } },
+        "heatpump_flowrate": { label: "Flow rate", yaxis: 3, color: "#afd8f8", lines: { lineWidth: 1.8 } },
         "boiler_heat": { label: "Boiler", yaxis: 1, color: "#FF5349", lines: { show: true, fill: 0.2, lineWidth: 0.5 } },
-        "heatpump_heat": { label: "Heat", yaxis: 1, color: 0, lines: { show: true, fill: 0.2, lineWidth: 0.5 } },
-        "heatpump_elec": { label: "Electric", yaxis: 1, color: 1, lines: { show: true, fill: 0.3, lineWidth: 0.5 } },
+        "heatpump_heat": { label: "Heat", yaxis: 1, color: "#edc240", lines: { show: true, fill: 0.2, lineWidth: 0.5 } },
+        "heatpump_elec": { label: "Electric", yaxis: 1, color: "#afd8f8", lines: { show: true, fill: 0.3, lineWidth: 0.5 } },
         "immersion_elec": { label: "Immersion", yaxis: 1, color: 4, lines: { show: true, fill: 0.3, lineWidth: 0.5 } },
         "heatpump_dhwT": { label: dhw_label, yaxis: dhw_axis, color: "#0080ff" },
         "heatpump_dhwTargetT": { label: dhw_target_label, yaxis: dhw_axis, color:"#99cbfc" },
@@ -693,10 +693,10 @@ function powergraph_draw() {
             reserveSpace: false
         },
         yaxes: [
-            { min: 0, font: style, reserveSpace: false },
+            { autoScale: "none", min: 0, font: style, reserveSpace: false },
             { font: style, reserveSpace: false },
-            { min: 0, font: { size: flot_font_size, color: "#44b3e2" }, reserveSpace: false },
-            { min: 0, max: 1, show: false, reserveSpace: false }
+            { autoScale: "none", min: 0, font: { size: flot_font_size, color: "#44b3e2" }, reserveSpace: false },
+            { autoScale: "none", min: 0, max: 1, show: false, reserveSpace: false }
         ],
         grid: {
             show: true,
@@ -708,7 +708,7 @@ function powergraph_draw() {
             // axisMargin:0
             margin: { top: 30 }
         },
-        selection: { mode: "x" },
+        selection: { mode: 'x', color: '#e8cfac', visualization: 'fill' },
         legend: { position: "NW", noColumns: 13 }
     }
 
@@ -717,6 +717,7 @@ function powergraph_draw() {
     }
 
     if ($('#placeholder').width()) {
+        if (!window.Flot || typeof window.Flot.plot !== 'function') return;
         // Remove keys
         var powergraph_series_without_key = [];
         for (var key in powergraph_series) {
@@ -727,7 +728,7 @@ function powergraph_draw() {
             if (key == 'heatpump_dhwTargetT' && !show_dhw_temp) show = false;
             if (show) powergraph_series_without_key.push(powergraph_series[key]);
         }
-        $.plot($('#placeholder'), powergraph_series_without_key, options);
+        window.Flot.plot($('#placeholder')[0], powergraph_series_without_key, options);
     }
 
     // show symbol when live scrolling is active
@@ -785,7 +786,8 @@ function draw_histogram(histogram) {
         legend: { position: "NW", noColumns: 6 }
     }
     if ($('#histogram').width() > 0) {
-        $.plot($('#histogram'), [{ data: sorted_histogram }], options);
+        if (!window.Flot || typeof window.Flot.plot !== 'function') return;
+        window.Flot.plot($('#histogram')[0], [{ data: sorted_histogram }], options);
     }
 }
 
@@ -1071,7 +1073,8 @@ $("#configure_standby").click(function () {
     }
 });
 
-$('#histogram').bind("plothover", function (event, pos, item) {
+document.getElementById('histogram')?.addEventListener('plothover', function (event) {
+    const item = event.detail?.[1];
     if (item) {
         var z = item.dataIndex;
         if (previousPoint != item.datapoint) {
diff --git a/apps/OpenEnergyMonitor/mysolarpv/mysolarpv.php b/apps/OpenEnergyMonitor/mysolarpv/mysolarpv.php
index 06a2cf50..d46dd865 100644
--- a/apps/OpenEnergyMonitor/mysolarpv/mysolarpv.php
+++ b/apps/OpenEnergyMonitor/mysolarpv/mysolarpv.php
@@ -51,7 +51,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Modules/app/Lib/timeseries.js?v=<?php echo $v; ?>"></script> 
 
diff --git a/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.js b/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.js
index 2de06139..d577e373 100644
--- a/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.js
+++ b/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.js
@@ -260,6 +260,7 @@ function init()
 
     render_autogen_feed_list();
 
+    view.timeBaseScale = 1000;
     view.end = power_end;
     view.start = power_start;
 
diff --git a/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.php b/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.php
index 7e6adf61..e72c3dff 100644
--- a/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.php
+++ b/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.php
@@ -1,21 +1,14 @@
 <?php
-    defined('EMONCMS_EXEC') or die('Restricted access');
-    global $path, $session;
-?>
-
-<script type="text/javascript" src="<?php echo $path; ?>Modules/feed/feed.js?v=<?php echo $v; ?>"></script>
-
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js?v=<?php echo $v; ?>"></script> 
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script> 
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Modules/app/Lib/timeseries.js?v=<?php echo $v; ?>"></script> 
+defined('EMONCMS_EXEC') or die('Restricted access');
+global $path, $session;
 
-<!-- load mysolarpvbattery.css -->
-<link href="<?php echo $path; ?>Modules/app/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.css?v=<?php echo $v; ?>" rel="stylesheet">
+load_js("Modules/feed/feed.js");
+load_js("Lib/js/flot-5.1.0.js"); 
+load_js("Lib/js/vis.helper.js");
+load_js("Modules/app/Lib/timeseries.js");
+load_css("Modules/app/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery.css");
 
+?>
 
 
 <section id="app-block" style="display:none" class="block">
@@ -27,8 +20,8 @@
             </button></li>
         </ul>
         <ul class="btn-list">
-            <li><button class="app-btn config-open" title="<?php echo tr('Edit') ?>"><svg class="icon"><use xlink:href="#icon-wrench"></use></svg></button></li>
-            <li><button class="app-btn config-close d-none" title="<?php echo tr('Close') ?>"><svg class="icon"><use xlink:href="#icon-close"></use></svg></button></li>
+            <li><button class="app-btn config-open" title="<?php echo tr('Edit') ?>"><i class="icon-wrench icon-white" title="Configure app"></i></button></li>
+            <li><button class="app-btn config-close d-none" title="<?php echo tr('Close') ?>"><i class="svg-icon-close icon-white"></i></button></li>
         </ul>
     </nav>
 
@@ -195,7 +188,7 @@
 
 <div class="ajax-loader"></div>
 
-<script src="<?php echo $path; ?>Lib/misc/gettext.js?v=<?php echo $v; ?>"></script> 
+<script src="<?php echo $path; ?>Lib/js/gettext.js?v=<?php echo $v; ?>"></script> 
 <script>
 // Function to get translations for JavaScript
 function getTranslations(){
@@ -236,4 +229,4 @@ function load_js_auto_version($scriptname) {
     }
     echo '<script src="'.$path.$script_path.$version_string.'"></script>';
 }
-?>
\ No newline at end of file
+?>
diff --git a/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery_graph.js b/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery_graph.js
index 7897238c..88f98971 100644
--- a/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery_graph.js
+++ b/apps/OpenEnergyMonitor/mysolarpvbattery/mysolarpvbattery_graph.js
@@ -61,6 +61,7 @@ function load_process_draw_graph() {
     const averages     = loaded.map(d => d.avg);
     const deltas       = loaded.map(d => d.delta);
 
+    feed.timeBaseScale = 1000;
     feed.getdata(feedids, view.start, view.end, view.interval, averages.join(","), deltas.join(","), 0, 0, function (all_data) {
 
         if (data_mode == "power") {
@@ -180,7 +181,7 @@ function process_and_draw_graph() {
         };
         if (viewmode == "bargraph") {
             series.lines = { show: false };
-            series.bars = { show: true, align: "center", barWidth: 0.8 * 3600 * 24 * 1000, fill: flows[i].fill, lineWidth: 0 };
+            series.bars = { show: true, align: "center", barWidth: 0.8, fill: flows[i].fill, lineWidth: 0 };
         }
         powerseries.push(series);
     }
@@ -225,11 +226,15 @@ function draw_graph() {
     const options = {
         lines: { fill: false },
         xaxis: { 
-            mode: "time", timezone: "browser", min: view.start, max: view.end,
+            mode: "time", 
+            timezone: "browser", 
+            min: view.start, 
+            max: view.end,
+            timeBase: "milliseconds",
             font: { color: font_color }  // tick label text color
         },
         grid: { hoverable: true, clickable: true, borderWidth: 0 },
-        selection: { mode: "x" },
+        selection: { mode: 'x', color: '#e8cfac', visualization: 'fill' },
         legend: { show: false }
     }
 
@@ -249,7 +254,7 @@ function draw_graph() {
     
     options.xaxis.min = view.start;
     options.xaxis.max = view.end;
-    $.plot($('#placeholder'),powerseries,options);
+    Flot.plot($('#placeholder')[0], powerseries, options);
 
     if (viewmode == "bargraph") {
         $('#placeholder').append("<div style='position:absolute;left:50px;top:30px;color:#666;font-size:12px'><b>Above:</b> Onsite Use &amp; Total Use</div>");
@@ -314,13 +319,15 @@ function graph_events() {
 }
 
 function bind_hover_tooltip() {
-    $('#placeholder').bind("plothover", function (event, pos, item)
+    document.getElementById('placeholder').addEventListener("plothover", function (event)
     {
+        const item = event.detail?.[1];
+        const pos = event.detail?.[0];
         if (item) {
             const tooltip_items = [];
 
             const date = new Date(item.datapoint[0]);
-            tooltip_items.push(["TIME", dateFormat(date, 'HH:MM'), ""]);
+            tooltip_items.push(["TIME", `${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`, ""]);
 
             for (let i = 0; i < powerseries.length; i++) {
                 const series = powerseries[i];
@@ -356,7 +363,10 @@ function bind_hover_tooltip() {
 }
 
 function bind_zoom_selection() {
-    $('#placeholder').bind("plotselected", function (event, ranges) {
+    document.getElementById('placeholder').addEventListener("plotselected", function (event) {
+        const ranges = event.detail?.[0];
+        if (!ranges?.xaxis) return;
+
         view.start = ranges.xaxis.from;
         view.end = ranges.xaxis.to;
 
@@ -374,8 +384,8 @@ function bind_zoom_selection() {
 
 function bind_bar_click() {
     // Auto click through to power graph
-    $('#placeholder').bind("plotclick", function (event, pos, item)
-    {
+    document.getElementById('placeholder').addEventListener("plotclick", function (event) {
+        const item = event.detail?.[1];
         if (viewmode == "powergraph") return; // disable click when already in powergraph mode
 
         if (item && !panning) {
diff --git a/apps/OpenEnergyMonitor/mysolarpvdivert/mysolarpvdivert.php b/apps/OpenEnergyMonitor/mysolarpvdivert/mysolarpvdivert.php
index 2f68f577..90899ef5 100644
--- a/apps/OpenEnergyMonitor/mysolarpvdivert/mysolarpvdivert.php
+++ b/apps/OpenEnergyMonitor/mysolarpvdivert/mysolarpvdivert.php
@@ -10,7 +10,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script> 
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Modules/app/Lib/timeseries.js?v=<?php echo $v; ?>"></script> 
 
diff --git a/apps/OpenEnergyMonitor/octopus/profile.js b/apps/OpenEnergyMonitor/octopus/profile.js
index 3630acb7..4a73cce2 100644
--- a/apps/OpenEnergyMonitor/octopus/profile.js
+++ b/apps/OpenEnergyMonitor/octopus/profile.js
@@ -18,7 +18,7 @@ function profile_draw() {
     var bars = {
         show: true,
         align: "left",
-        barWidth: 0.9 * 1800 * 1000,
+        barWidth: 0.9,
         fill: 1.0,
         lineWidth: 0
     };
@@ -50,6 +50,7 @@ function profile_draw() {
         xaxis: {
             mode: "time",
             timezone: "browser",
+            timeBase: "milliseconds",
             // min: start, max: end, 
             font: {
                 size: flot_font_size,
@@ -88,12 +89,15 @@ function profile_draw() {
             }
         },
         selection: {
-            mode: "x"
+            mode: 'x',
+            color: '#e8cfac',
+            visualization: 'fill'
         },
         legend: {
             position: "NW",
             noColumns: 5
         }
     }
-    $.plot($('#placeholder'), graph_series, options);
+    if (!window.Flot || typeof window.Flot.plot !== 'function') return;
+    Flot.plot($('#placeholder')[0], graph_series, options);
 }
\ No newline at end of file
diff --git a/apps/OpenEnergyMonitor/octopus/tariff_explorer.js b/apps/OpenEnergyMonitor/octopus/tariff_explorer.js
index 5abb9ad5..0ba2a527 100644
--- a/apps/OpenEnergyMonitor/octopus/tariff_explorer.js
+++ b/apps/OpenEnergyMonitor/octopus/tariff_explorer.js
@@ -320,6 +320,33 @@ var profile_cost = {};
 var monthly_summary = {};
 var baseline_monthly_summary = {};
 var baseline_tariff_name = "";
+var octopusDatePickerApp = null;
+
+if (typeof Vue !== 'undefined' && typeof DateTimePicker !== 'undefined') {
+    var octopusPickerRoot = document.getElementById('octopus-dtp-app');
+    if (octopusPickerRoot) {
+        var octopusDatePickerRoot = Vue.createApp({
+            data: function() {
+                return {
+                    startValue: '',
+                    endValue: ''
+                };
+            },
+            methods: {
+                onStartChange: function(value) {
+                    handleStartDateChange(value);
+                },
+                onEndChange: function(value) {
+                    handleEndDateChange(value);
+                }
+            }
+        });
+
+        octopusDatePickerRoot.component('date-time-picker', DateTimePicker);
+        octopusDatePickerApp = octopusDatePickerRoot.mount('#octopus-dtp-app');
+        window.octopusDatePickerApp = octopusDatePickerApp;
+    }
+}
 
 config.init();
 
@@ -337,16 +364,7 @@ function init() {
 
     render_autogen_feed_list();
 
-    $("#datetimepicker1").datetimepicker({
-        language: 'en-EN'
-    });
-
-    $("#datetimepicker2").datetimepicker({
-        language: 'en-EN'
-    });
-
-    datetimepicker1 = $('#datetimepicker1').data('datetimepicker');
-    datetimepicker2 = $('#datetimepicker2').data('datetimepicker');
+    view.timeBaseScale = 1000;
 }
 
 function show() {
@@ -502,14 +520,8 @@ function graph_load(load_flows = true, load_tariffs = true) {
     view.start = Math.ceil(view.start / intervalms) * intervalms;
     view.end = Math.ceil(view.end / intervalms) * intervalms;
 
-    if (datetimepicker1) {
-        datetimepicker1.setLocalDate(new Date(view.start));
-        datetimepicker1.setEndDate(new Date(view.end));
-    }
-    if (datetimepicker2) {
-        datetimepicker2.setLocalDate(new Date(view.end));
-        datetimepicker2.setStartDate(new Date(view.start));
-    }
+    setPickerDate(new Date(view.start), 'startValue');
+    setPickerDate(new Date(view.end), 'endValue');
 
     // Clear baseline summary if data has changed (as this may affect the selected baseline period)
     if (load_flows) {
@@ -537,6 +549,7 @@ function load_kwh_flow_data(interval, load_tariffs = true) {
         }
     });
 
+    feed.timeBaseScale = 1000;
     feed.getdata(feedids, view.start, view.end, interval, 0, 1, 0, 0, function (all_data) {
         if (all_data.success === false) {
             // Error loading flow data.. 
@@ -573,6 +586,7 @@ function load_tariff_data(interval) {
         else data[key] = [];
     }
 
+    feed.timeBaseScale = 1000;
     feed.getdata(feedids, view.start, view.end, interval, 0, 0, 0, 0, function (all_data) {
         if (all_data.success === false) {
             // Error loading flow data.. 
@@ -939,7 +953,7 @@ function draw_graph() {
     var bars = {
         show: true,
         align: "left",
-        barWidth: 0.9 * 1800 * 1000,
+        barWidth: 0.9,
         fill: 1.0,
         lineWidth: 0
     };
@@ -1001,6 +1015,7 @@ function draw_graph() {
         xaxis: {
             mode: "time",
             timezone: "browser",
+            timeBase: "milliseconds",
             min: view.start,
             max: view.end,
             font: {
@@ -1039,7 +1054,9 @@ function draw_graph() {
             }
         },
         selection: {
-            mode: "x"
+            mode: 'x',
+            color: '#e8cfac',
+            visualization: 'fill'
         },
         legend: {
             show: false, // $('#placeholder').width() > 500,
@@ -1047,7 +1064,8 @@ function draw_graph() {
             noColumns: 1
         }
     }
-    $.plot($('#placeholder'), graph_series, options);
+    if (!window.Flot || typeof window.Flot.plot !== 'function') return;
+    Flot.plot($('#placeholder')[0], graph_series, options);
 }
 
 
@@ -1137,22 +1155,70 @@ function download_data(filename, data) {
 }
 
 function parseTimepickerTime(timestr) {
-    var tmp = timestr.split(" ");
-    if (tmp.length != 2) return false;
+    if (window.ecDateTime && typeof window.ecDateTime.toUnixSeconds === 'function') {
+        return window.ecDateTime.toUnixSeconds(timestr);
+    }
+
+    var parsedDate = new Date(String(timestr || '').replace(' ', 'T'));
+    if (isNaN(parsedDate.getTime())) return false;
+    return Math.floor(parsedDate.getTime() / 1000);
+}
+
+function setPickerDate(date, pickerKey) {
+    var value = '';
+    if (window.ecDateTime && typeof window.ecDateTime.formatYmdHms === 'function') {
+        value = window.ecDateTime.formatYmdHms(date);
+    } else if (date instanceof Date && !isNaN(date.getTime())) {
+        value = date.toISOString().replace('T', ' ').slice(0, 19);
+    }
 
-    var date = tmp[0].split("/");
-    if (date.length != 3) return false;
+    if (octopusDatePickerApp && octopusDatePickerApp[pickerKey] !== value) {
+        octopusDatePickerApp[pickerKey] = value;
+    }
+}
 
-    var time = tmp[1].split(":");
-    if (time.length != 3) return false;
+function handleStartDateChange(value) {
+    var timewindowStart = parseTimepickerTime(value);
+    if (!timewindowStart) {
+        alert("Please enter a valid start date.");
+        setPickerDate(new Date(view.start), 'startValue');
+        return false;
+    }
+    if (timewindowStart * 1000 >= view.end) {
+        alert("Start date must be further back in time than end date.");
+        setPickerDate(new Date(view.start), 'startValue');
+        return false;
+    }
 
-    return new Date(date[2], date[1] - 1, date[0], time[0], time[1], time[2], 0).getTime() / 1000;
+    view.start = timewindowStart * 1000;
+    graph_load();
+    $(".time-select").val("C");
+}
+
+function handleEndDateChange(value) {
+    var timewindowEnd = parseTimepickerTime(value);
+    if (!timewindowEnd) {
+        alert("Please enter a valid end date.");
+        setPickerDate(new Date(view.end), 'endValue');
+        return false;
+    }
+    if (view.start >= timewindowEnd * 1000) {
+        alert("Start date must be further back in time than end date.");
+        setPickerDate(new Date(view.end), 'endValue');
+        return false;
+    }
+
+    view.end = timewindowEnd * 1000;
+    graph_load();
+    $(".time-select").val("C");
 }
 
 // -------------------------------------------------------------------------------
 // EVENTS
 // -------------------------------------------------------------------------------
-$('#placeholder').bind("plothover", function(event, pos, item) {
+document.getElementById('placeholder')?.addEventListener("plothover", function(event) {
+    var pos = event.detail?.[0];
+    var item = event.detail?.[1];
     if (item) {
 
         if (previousPoint != item.datapoint) {
@@ -1216,7 +1282,7 @@ $('#placeholder').bind("plothover", function(event, pos, item) {
 
 
 
-            tooltip(item.pageX, item.pageY, text, "#fff", "#000");
+            tooltip(pos.pageX, pos.pageY, text, "#fff", "#000");
         }
     } else $("#tooltip").remove();
 });
@@ -1269,7 +1335,10 @@ $('.time-select').change(function() {
     }
 });
 
-$('#placeholder').bind("plotselected", function(event, ranges) {
+document.getElementById('placeholder')?.addEventListener("plotselected", function(event) {
+    var ranges = event.detail?.[0];
+    if (!ranges?.xaxis) return;
+
     var start = ranges.xaxis.from;
     var end = ranges.xaxis.to;
     panning = true;
@@ -1350,38 +1419,6 @@ $("#download-csv").click(function() {
     download_data("tariff-data.csv", csv.join("\n"));
 });
 
-$('#datetimepicker1').on("changeDate", function(e) {
-    var timewindowStart = parseTimepickerTime($("#request-start").val());
-    if (!timewindowStart) {
-        alert("Please enter a valid start date.");
-        return false;
-    }
-    if (timewindowStart * 1000 >= view.end) {
-        alert("Start date must be further back in time than end date.");
-        return false;
-    }
-
-    view.start = timewindowStart * 1000;
-    graph_load();
-    $(".time-select").val("C");
-});
-
-$('#datetimepicker2').on("changeDate", function(e) {
-    var timewindowEnd = parseTimepickerTime($("#request-end").val());
-    if (!timewindowEnd) {
-        alert("Please enter a valid end date.");
-        return false;
-    }
-    if (view.start >= timewindowEnd * 1000) {
-        alert("Start date must be further back in time than end date.");
-        return false;
-    }
-
-    view.end = timewindowEnd * 1000;
-    graph_load();
-    $(".time-select").val("C");
-});
-
 // Save monthly data as baseline to be compared against tariff change
 $("#save-baseline").click(function() {
     baseline_monthly_summary = JSON.parse(JSON.stringify(monthly_summary));
diff --git a/apps/OpenEnergyMonitor/octopus/tariff_explorer.php b/apps/OpenEnergyMonitor/octopus/tariff_explorer.php
index 5075f484..493a5caf 100644
--- a/apps/OpenEnergyMonitor/octopus/tariff_explorer.php
+++ b/apps/OpenEnergyMonitor/octopus/tariff_explorer.php
@@ -2,21 +2,16 @@
 defined('EMONCMS_EXEC') or die('Restricted access');
 global $path, $session;
 ?>
-<link href="<?php echo $path; ?>Lib/bootstrap-datetimepicker-0.0.11/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
-
-<script type="text/javascript" src="<?php echo $path; ?>Modules/feed/feed.js?v=<?php echo $v; ?>"></script>
-
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
-<script src="<?php echo $path; ?>Lib/bootstrap-datetimepicker-0.0.11/js/bootstrap-datetimepicker.min.js"></script>
-
+<?php
+load_js("Modules/feed/feed.js");
+load_js("Lib/js/flot-5.1.0.js");
+load_js("Lib/js/vis.helper.js");
+load_js("Lib/js/date_time.js");
+load_js("Lib/js/DateTimePicker.js");
+?>
 
 <?php $v += 8; ?>
-<link href="<?php echo $path; ?>Modules/app/apps/OpenEnergyMonitor/octopus/tariff_explorer.css?v=<?php echo $v; ?>" rel="stylesheet">
+<?php load_css("Modules/app/apps/OpenEnergyMonitor/octopus/tariff_explorer.css"); ?>
 
 <div id="app-block" style="display:none">
 
@@ -24,11 +19,11 @@
 
         <nav class="app-top-bar d-flex justify-content-between">
             <ul class="btn-list">
-                <li><span class="electric-title"><svg class="icon" style="margin-right:6px; vertical-align:-0.125em;"><use xlink:href="#icon-schedule"></use></svg><span id="app-title">Time of use tariff explorer</span></span></li>
+                <li><span class="electric-title"><i class="svg-icon-schedule mr-2" title="Configure app"></i><span id="app-title">Time of use tariff explorer</span></span></li>
             </ul>
             <ul class="btn-list">
-                <li><button class="app-btn config-open" title="<?php echo tr('Edit') ?>"><svg class="icon"><use xlink:href="#icon-wrench"></use></svg></button></li>
-                <li><button class="app-btn config-close d-none" title="<?php echo tr('Close') ?>"><svg class="icon"><use xlink:href="#icon-close"></use></svg></button></li>
+                <li><button class="app-btn config-open" title="<?php echo tr('Edit') ?>"><i class="icon-wrench icon-white" title="Configure app"></i></button></li>
+                <li><button class="app-btn config-close d-none" title="<?php echo tr('Close') ?>"><i class="svg-icon-close icon-white"></i></button></li>
             </ul>
         </nav>
 
@@ -99,20 +94,16 @@
                         <select id="tariff"></select>
                     </div>
 
-                    <div class="ctrl-group">
-                        <span class="ctrl-label"><?php echo tr('Start') ?></span>
-                        <span id="datetimepicker1">
-                            <input id="request-start" data-format="dd/MM/yyyy hh:mm:ss" type="text" />
-                            <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
-                        </span>
-                    </div>
+                    <div id="octopus-dtp-app" style="display:contents">
+                        <div class="ctrl-group">
+                            <span class="ctrl-label"><?php echo tr('Start') ?></span>
+                            <date-time-picker v-model="startValue" @change="onStartChange"></date-time-picker>
+                        </div>
 
-                    <div class="ctrl-group">
-                        <span class="ctrl-label"><?php echo tr('End') ?></span>
-                        <span id="datetimepicker2">
-                            <input id="request-end" data-format="dd/MM/yyyy hh:mm:ss" type="text" />
-                            <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
-                        </span>
+                        <div class="ctrl-group">
+                            <span class="ctrl-label"><?php echo tr('End') ?></span>
+                            <date-time-picker v-model="endValue" @change="onEndChange"></date-time-picker>
+                        </div>
                     </div>
 
                     <div class="ctrl-actions">
@@ -183,4 +174,4 @@ function load_js_auto_version($scriptname) {
     }
     echo '<script src="'.$path.$script_path.$version_string.'"></script>';
 }
-?>
\ No newline at end of file
+?>
diff --git a/apps/OpenEnergyMonitor/profile/profile.php b/apps/OpenEnergyMonitor/profile/profile.php
index 746963cc..6e5cd070 100644
--- a/apps/OpenEnergyMonitor/profile/profile.php
+++ b/apps/OpenEnergyMonitor/profile/profile.php
@@ -9,7 +9,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
-<script src="<?php echo $path;?>Lib/misc/clipboard.js?v=<?php echo $v; ?>"></script>
+<script src="<?php echo $path;?>Lib/js/clipboard.js?v=<?php echo $v; ?>"></script>
 
 <style>
 .color-box {
diff --git a/apps/OpenEnergyMonitor/solarbatterysim/solarbatterysim.php b/apps/OpenEnergyMonitor/solarbatterysim/solarbatterysim.php
index 21341351..89202a48 100644
--- a/apps/OpenEnergyMonitor/solarbatterysim/solarbatterysim.php
+++ b/apps/OpenEnergyMonitor/solarbatterysim/solarbatterysim.php
@@ -10,8 +10,8 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
-<script src="<?php echo $path;?>Lib/misc/clipboard.js?v=<?php echo $v; ?>"></script>
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
+<script src="<?php echo $path;?>Lib/js/clipboard.js?v=<?php echo $v; ?>"></script>
+<?php load_js("Lib/js/vue.global.prod-3.5.22.min.js"); ?>
 
 <style>
 .color-box {
@@ -195,40 +195,40 @@
       </tr>
       <tr v-for="(month, index) in monthly">
         <td>{{ month.name }}</td>
-        <td>{{ month.total_consumption | toFixed(0) }} kWh</td>
-        <td>{{ month.total_generation | toFixed(0) }} kWh</td>
-        <td>{{ month.total_import | toFixed(0) }} kWh</td>
-        <td>{{ month.total_export | toFixed(0) }} kWh</td>
-        <td>{{ month.total_solar_direct | toFixed(0) }} kWh</td>
-        <td>{{ month.total_charge | toFixed(0) }} kWh</td>
-        <td>{{ month.total_discharge | toFixed(0) }} kWh</td>
-        <td>£{{ month.total_import_cost | toFixed(2) }}</td>
-        <td>£{{ month.total_export_value | toFixed(2) }}</td>
-        <td>£{{ month.total_reference_cost | toFixed(2) }}</td>
+        <td>{{ toFixed(month.total_consumption, 0) }} kWh</td>
+        <td>{{ toFixed(month.total_generation, 0) }} kWh</td>
+        <td>{{ toFixed(month.total_import, 0) }} kWh</td>
+        <td>{{ toFixed(month.total_export, 0) }} kWh</td>
+        <td>{{ toFixed(month.total_solar_direct, 0) }} kWh</td>
+        <td>{{ toFixed(month.total_charge, 0) }} kWh</td>
+        <td>{{ toFixed(month.total_discharge, 0) }} kWh</td>
+        <td>£{{ toFixed(month.total_import_cost, 2) }}</td>
+        <td>£{{ toFixed(month.total_export_value, 2) }}</td>
+        <td>£{{ toFixed(month.total_reference_cost, 2) }}</td>
       </tr>
       
       <tr>
         <th>TOTAL</th>
-        <th>{{ annual.total_consumption | toFixed(0) }} kWh</th>
-        <th>{{ annual.total_generation | toFixed(0) }} kWh</th>
-        <th>{{ annual.total_import | toFixed(0) }} kWh</th>
-        <th>{{ annual.total_export | toFixed(0) }} kWh</th>
-        <th>{{ annual.total_solar_direct | toFixed(0) }} kWh</th>
-        <th>{{ annual.total_charge | toFixed(0) }} kWh</th>
-        <th>{{ annual.total_discharge | toFixed(0) }} kWh</th>
-        <th>£{{ annual.total_import_cost | toFixed(2) }}</th>
-        <th>£{{ annual.total_export_value | toFixed(2) }}</th>
-        <th>£{{ annual.total_reference_cost | toFixed(2) }}</th>
+        <th>{{ toFixed(annual.total_consumption, 0) }} kWh</th>
+        <th>{{ toFixed(annual.total_generation, 0) }} kWh</th>
+        <th>{{ toFixed(annual.total_import, 0) }} kWh</th>
+        <th>{{ toFixed(annual.total_export, 0) }} kWh</th>
+        <th>{{ toFixed(annual.total_solar_direct, 0) }} kWh</th>
+        <th>{{ toFixed(annual.total_charge, 0) }} kWh</th>
+        <th>{{ toFixed(annual.total_discharge, 0) }} kWh</th>
+        <th>£{{ toFixed(annual.total_import_cost, 2) }}</th>
+        <th>£{{ toFixed(annual.total_export_value, 2) }}</th>
+        <th>£{{ toFixed(annual.total_reference_cost, 2) }}</th>
       </tr>
     </table>
     
     <h4>Savings and payback</h4>
     <table class="table table-striped">
-      <tr><td>Annual import saving</td><td>£{{ annual.import_saving | toFixed(2) }}</td></tr>
-      <tr><td>Simple payback (system cost / import saving)</td><td>{{ output.simple_payback | toFixed(1) }} years</td></tr>
-      <tr><td>Annual solar & battery system cost</td><td>£{{ annual.system_cost | toFixed(2) }}</td></tr>
-      <tr><td>Annual solar & battery system + import cost</td><td>£{{ annual.total_cost | toFixed(2) }}</td></tr>
-      <tr><td>Annual averaged unit price</td><td>{{ annual.unit_price*100 | toFixed(2) }} p/kWh</td></tr>
+      <tr><td>Annual import saving</td><td>£{{ toFixed(annual.import_saving, 2) }}</td></tr>
+      <tr><td>Simple payback (system cost / import saving)</td><td>{{ toFixed(output.simple_payback, 1) }} years</td></tr>
+      <tr><td>Annual solar & battery system cost</td><td>£{{ toFixed(annual.system_cost, 2) }}</td></tr>
+      <tr><td>Annual solar & battery system + import cost</td><td>£{{ toFixed(annual.total_cost, 2) }}</td></tr>
+      <tr><td>Annual averaged unit price</td><td>{{ toFixed(annual.unit_price*100, 2) }} p/kWh</td></tr>
     </table>
     
     
@@ -324,25 +324,22 @@
 var soc_prc_data = [];
 var grid_import_data = [];
 
-app = new Vue({
-    el: '#app',
-    data: {
+app = Vue.createApp({
+    data() { return {
         input: input,
         monthly: monthly,
         annual: annual,
         output: output
-    },
+    }; },
     methods: {
         run: function() {
           show();
-        }
-    },
-    filters: {
-        toFixed: function(value,dp) {
-            return value.toFixed(dp)
+        },
+        toFixed: function(value, dp) {
+            return value.toFixed(dp);
         }
     }
-});
+}).mount('#app');
 
 
 config.initapp = function(){init()};
diff --git a/apps/OpenEnergyMonitor/storagesim/storagesim.js b/apps/OpenEnergyMonitor/storagesim/storagesim.js
index 77572d7c..ec1e3753 100644
--- a/apps/OpenEnergyMonitor/storagesim/storagesim.js
+++ b/apps/OpenEnergyMonitor/storagesim/storagesim.js
@@ -78,9 +78,8 @@ view.start = time_now - 365*24*3600000;
 view.limit_x = false;
 
 // Vue app
-var app = new Vue({
-    el: '#app',
-    data: {
+var app = Vue.createApp({
+    data() { return {
         generation: {
             wind: {
                 name: "UK Wind (normalised)",
@@ -154,7 +153,7 @@ var app = new Vue({
         auto_optimise: false,
         show_peak_shaving_balance: false,
         max_peak_shaving_deficit: 0
-    },
+    }; },
     methods: {
         update: function() {
             model();
@@ -164,15 +163,12 @@ var app = new Vue({
             model();
             this.auto_optimise = false;
             model();
+        },
+        toFixed: function(value, dp) {
+            return value.toFixed(dp);
         }
-    },
-    filters: {
-        toFixed: function (value,dp) {
-            // if (!value) return ''
-            return value.toFixed(dp)
-        }   
     }
-});
+}).mount('#app');
 
 config.init();
 
diff --git a/apps/OpenEnergyMonitor/storagesim/storagesim.php b/apps/OpenEnergyMonitor/storagesim/storagesim.php
index 0e386da6..b7fd1fa3 100644
--- a/apps/OpenEnergyMonitor/storagesim/storagesim.php
+++ b/apps/OpenEnergyMonitor/storagesim/storagesim.php
@@ -12,7 +12,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 <script type="text/javascript" src="<?php echo $path; ?>Modules/app/Lib/remotefeed.js?v=5"></script>
 
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
+<?php load_js("Lib/js/vue.global.prod-3.5.22.min.js"); ?>
 
 <div id="app-block" style="display:none">
     <div class="col1">
@@ -52,7 +52,7 @@
                                 <span class="add-on">kW</span>
                             </div>
                         </td>
-                        <td>{{ gen.kwh | toFixed(0) }} kWh ({{ 100*gen.capacity_factor | toFixed(1)}}%)</td>
+                        <td>{{ toFixed(gen.kwh, 0) }} kWh ({{ toFixed(100*gen.capacity_factor, 1) }}%)</td>
                     </tr>
                     <tr>
                         <td>Nuclear / geothermal<br>(non load following)</td>
@@ -61,7 +61,7 @@
                                 <input type="text" v-model="nuclear.output" style="width:50px" @change="update">
                                 <span class="add-on">kW</span>
                             </td>
-                        <td>{{ nuclear.kwh | toFixed(0) }} kWh ({{ 100*nuclear.capacity_factor | toFixed(1)}}%)</td>
+                        <td>{{ toFixed(nuclear.kwh, 0) }} kWh ({{ toFixed(100*nuclear.capacity_factor, 1) }}%)</td>
                     </tr>
                     <tr>
                         <td>Home solar feed</td>
@@ -70,17 +70,17 @@
                                 <input type="text" v-model="home_solar.scale" style="width:50px" @change="update">
                                 <span class="add-on">%</span>
                             </td>
-                        <td>{{ home_solar.kwh | toFixed(0) }} kWh ({{ 100*home_solar.capacity_factor | toFixed(1)}}%)</td>
+                        <td>{{ toFixed(home_solar.kwh, 0) }} kWh ({{ toFixed(100*home_solar.capacity_factor, 1) }}%)</td>
                     </tr>
                     <tr>
                         <td>Total supply</td>
                         <td></td>
-                        <td>{{ supply.kwh | toFixed(0) }} kWh</td>
+                        <td>{{ toFixed(supply.kwh, 0) }} kWh</td>
                     </tr>
                     <tr>
                         <td>Consumption</td>
                         <td></td>
-                        <td>{{ consumption.kwh | toFixed(0) }} kWh</td>
+                        <td>{{ toFixed(consumption.kwh, 0) }} kWh</td>
                     </tr>
                     <tr>
                         <td>Direct e-fuel demand (e.g industry, shipping or aviation)</td>
@@ -95,23 +95,23 @@
                     <tr>
                         <td>Primary energy factor</td>
                         <td></td>
-                        <td>{{ 100*supply.kwh/consumption.kwh | toFixed(0) }}%</td>
+                        <td>{{ toFixed(100*supply.kwh/consumption.kwh, 0) }}%</td>
                     </tr>
                     <tr>
                         <td>Balance before battery storage</td>
                         <td></td>
-                        <td>{{ 100*balance.before_store1 | toFixed(0) }}%</td>
+                        <td>{{ toFixed(100*balance.before_store1, 0) }}%</td>
                     </tr>
 
                     <tr>
                         <td>Surplus</td>
                         <td></td>
-                        <td>{{ balance.surplus | toFixed(1) }} kWh</td>
+                        <td>{{ toFixed(balance.surplus, 1) }} kWh</td>
                     </tr>
                     <tr>
                         <td>Unmet</td>
                         <td></td>
-                        <td>{{ balance.unmet | toFixed(1) }} kWh</td>
+                        <td>{{ toFixed(balance.unmet, 1) }} kWh</td>
                     </tr>
                     <tr>
                         <td>Peak shaving storage requirement</td>
@@ -123,7 +123,7 @@
                                 </span>
                             </div>
                         </td>
-                        <td>{{ max_peak_shaving_deficit | toFixed(1) }} kWh</td>
+                        <td>{{ toFixed(max_peak_shaving_deficit, 1) }} kWh</td>
                     </tr>                  
                 </table>
             </div>
@@ -187,19 +187,19 @@
                     </tr>
                     <tr>
                         <td>Total charge</td>
-                        <td>{{ store1.charge_kwh | toFixed(1) }} kWh ({{ 100*store1.charge_CF | toFixed(1)}}%)</td>
+                        <td>{{ toFixed(store1.charge_kwh, 1) }} kWh ({{ toFixed(100*store1.charge_CF, 1) }}%)</td>
                     </tr>
                     <tr>
                         <td>Total discharge</td>
-                        <td>{{ store1.discharge_kwh | toFixed(1) }} kWh ({{ 100*store1.discharge_CF | toFixed(1)}}%)</td>
+                        <td>{{ toFixed(store1.discharge_kwh, 1) }} kWh ({{ toFixed(100*store1.discharge_CF, 1) }}%)</td>
                     </tr>
                     <tr>
                         <td>Cycles</td>
-                        <td>{{ store1.cycles | toFixed(1) }} cycles</td>
+                        <td>{{ toFixed(store1.cycles, 1) }} cycles</td>
                     </tr>
                     <tr>
                         <td>Balance after store 1</td>
-                        <td>{{ 100*balance.after_store1 | toFixed(0) }}%</td>
+                        <td>{{ toFixed(100*balance.after_store1, 0) }}%</td>
                     </tr>
                 </table>
 
@@ -265,19 +265,19 @@
                     </tr>
                     <tr>
                         <td>Total charge</td>
-                        <td>{{ store2.charge_kwh | toFixed(1) }} kWh ({{ 100*store2.charge_CF | toFixed(1)}}%)</td>
+                        <td>{{ toFixed(store2.charge_kwh, 1) }} kWh ({{ toFixed(100*store2.charge_CF, 1) }}%)</td>
                     </tr>
                     <tr>
                         <td>Total discharge</td>
-                        <td>{{ store2.discharge_kwh | toFixed(1) }} kWh ({{ 100*store2.discharge_CF | toFixed(1)}}%)</td>
+                        <td>{{ toFixed(store2.discharge_kwh, 1) }} kWh ({{ toFixed(100*store2.discharge_CF, 1) }}%)</td>
                     </tr>
                     <tr>
                         <td>Cycles</td>
-                        <td>{{ store2.cycles | toFixed(1) }} cycles</td>
+                        <td>{{ toFixed(store2.cycles, 1) }} cycles</td>
                     </tr>
                     <tr>
                         <td>Balance after store 2</td>
-                        <td>{{ 100*balance.after_store2 | toFixed(0) }}%</td>
+                        <td>{{ toFixed(100*balance.after_store2, 0) }}%</td>
                     </tr>
                 </table>
 
diff --git a/apps/OpenEnergyMonitor/timeofuse/timeofuse.php b/apps/OpenEnergyMonitor/timeofuse/timeofuse.php
index db79f561..9048854e 100644
--- a/apps/OpenEnergyMonitor/timeofuse/timeofuse.php
+++ b/apps/OpenEnergyMonitor/timeofuse/timeofuse.php
@@ -11,7 +11,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script> 
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 
 <style>
diff --git a/apps/OpenEnergyMonitor/timeofuse2/timeofuse2.php b/apps/OpenEnergyMonitor/timeofuse2/timeofuse2.php
index 29b7f707..77c10c0d 100644
--- a/apps/OpenEnergyMonitor/timeofuse2/timeofuse2.php
+++ b/apps/OpenEnergyMonitor/timeofuse2/timeofuse2.php
@@ -12,7 +12,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script> 
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 
 <style>
diff --git a/apps/OpenEnergyMonitor/timeofusecl/timeofusecl.php b/apps/OpenEnergyMonitor/timeofusecl/timeofusecl.php
index d2846de4..629e2575 100644
--- a/apps/OpenEnergyMonitor/timeofusecl/timeofusecl.php
+++ b/apps/OpenEnergyMonitor/timeofusecl/timeofusecl.php
@@ -11,7 +11,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.time.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.selection.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script>
-<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.js?v=<?php echo $v; ?>"></script> 
+<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/date.format.min.js?v=<?php echo $v; ?>"></script> 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
 
 <style>
diff --git a/apps/OpenEnergyMonitor/ukgrid/ukgrid.php b/apps/OpenEnergyMonitor/ukgrid/ukgrid.php
index 020b73a6..3f84df1e 100644
--- a/apps/OpenEnergyMonitor/ukgrid/ukgrid.php
+++ b/apps/OpenEnergyMonitor/ukgrid/ukgrid.php
@@ -14,7 +14,7 @@
 <script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.stack.min.js?v=<?php echo $v; ?>"></script>
 
 <script type="text/javascript" src="<?php echo $path; ?>Lib/vis.helper.js?v=<?php echo $v; ?>"></script>
-<script src="<?php echo $path; ?>Lib/misc/clipboard.js?v=<?php echo $v; ?>"></script>
+<script src="<?php echo $path; ?>Lib/js/clipboard.js?v=<?php echo $v; ?>"></script>
 
 <style>
     /* Dynamic height chart placeholder */
@@ -66,12 +66,8 @@
             </button></li>
         </ul>
     <ul class="text-right nav nav-pills mb-0">
-        <li><button class="btn btn-large btn-link btn-inverse config-open" title="<?php echo tr('Edit') ?>"><svg class="icon">
-                    <use xlink:href="#icon-wrench"></use>
-                </svg></button></li>
-        <li><button class="btn btn-large btn-link btn-inverse config-close hide" title="<?php echo tr('Close') ?>"><svg class="icon">
-                    <use xlink:href="#icon-close"></use>
-                </svg></button></li>
+        <li><button class="btn btn-large btn-link btn-inverse config-open" title="<?php echo tr('Edit') ?>"><span class="svg-icon-wrench"></span></button></li>
+        <li><button class="btn btn-large btn-link btn-inverse config-close hide" title="<?php echo tr('Close') ?>"><span class="svg-icon-close"></span></button></li>
     </ul>
 </nav>
 
diff --git a/apps/template/template.php b/apps/template/template.php
index db4f318d..d3d29694 100644
--- a/apps/template/template.php
+++ b/apps/template/template.php
@@ -40,12 +40,8 @@
             </button></li>
     </ul>
     <ul class="text-right nav nav-pills mb-0">
-        <li><button class="btn btn-large btn-link btn-inverse config-open" title="<?php echo tr('Edit') ?>"><svg class="icon">
-                    <use xlink:href="#icon-wrench"></use>
-                </svg></button></li>
-        <li><button class="btn btn-large btn-link btn-inverse config-close hide" title="<?php echo tr('Close') ?>"><svg class="icon">
-                    <use xlink:href="#icon-close"></use>
-                </svg></button></li>
+        <li><button class="btn btn-large btn-link btn-inverse config-open" title="<?php echo tr('Edit') ?>"><span class="svg-icon-wrench"></span></button></li>
+        <li><button class="btn btn-large btn-link btn-inverse config-close hide" title="<?php echo tr('Close') ?>"><span class="svg-icon-close"></span></button></li>
     </ul>
 </nav>
 
diff --git a/module.json b/module.json
index bf2dc67f..342e3f35 100644
--- a/module.json
+++ b/module.json
@@ -1,6 +1,6 @@
 {
     "name"         : "App",
-    "version"      : "3.1.6",
+    "version"      : "3.2.1",
     "location"     : "/var/www/emoncms/Modules",
     "branches_available": ["stable","master"]
 }