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..d3185313 100644
--- a/Views/app_list.php
+++ b/Views/app_list.php
@@ -2,8 +2,6 @@
 defined('EMONCMS_EXEC') or die('Restricted access');
 global $path;
 ?>
-<script src="<?php echo $path; ?>Lib/vue.min.js"></script>
-
 <div id="app" style="padding:20px">
     <h2><?php echo _("My Apps"); ?></h2>
 
@@ -61,10 +59,11 @@
 
 </div>
 <script>
-var app = new Vue({
-    el: '#app',
-    data: {
-        apps: []
+var app = Vue.createApp({
+    data: function() {
+        return {
+            apps: []
+        };
     },
     mounted() {
         this.getApps();
@@ -142,5 +141,5 @@
             }
         }
     }
-});
+}).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/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..25afe320 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">
@@ -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");
+?>
\ No newline at end of file
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/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..751fd413 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>
+defined('EMONCMS_EXEC') or die('Restricted access');
+global $path, $session;
 
-<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> 
-
-<!-- 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">
@@ -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(){
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/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..79a44607 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">
 
@@ -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">