diff --git a/POCloud/HTML/newOverview.html b/POCloud/HTML/newOverview.html
index a5f2905..aa1edf8 100644
--- a/POCloud/HTML/newOverview.html
+++ b/POCloud/HTML/newOverview.html
@@ -1,33 +1,42 @@
 <div class="row row-flex box-me">
-    <div class='col-xs-12' id="systemStatusTimelineContainer">
+    <div class='col-xs-9 box-me' id="systemStatusTimelineContainer">
         <h2>Well Status</h2>
-        <div id="statusTimeline" 
-            data-chart="timeline" 
-            data-nodename="advvfdipp.wellstatus" 
-            data-daysofhistory="2" 
+        <div id="statusTimeline"
+            data-chart="timeline"
+            data-nodename="advvfdipp.wellstatus"
+            data-daysofhistory="2"
             data-chartlabel=""
-            data-xlabel='Date' 
+            data-xlabel='Date'
             data-colors="Running:#3AFF83,Pumped Off:#dbda35,Alarmed:#e9821b,Locked Out:#cd2f34,Stopped:#3699b4"></div>
     </div>
+
+    <div class='col-xs-3 box-me'>
+        <div class="text-center">
+            <h2>Last Note</h2>
+            <p><%= channels['advvfdipp.notes'].value %></p>
+            <p> at <%= channels["advvfdipp.notes"].timestamp %></p>
+            <button href="#" data-channelId="<%= channels['advvfdipp.notes'].channelId %>" class="data-table btn btn-theme" title="Note History"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-th-list icon-theme"></i> All Notes</button>
+        </div>
+    </div>
 </div>
 <div class='row row-flex box-me'>
     <div class='col-xs-4 text-center box-me'>
         <h2>Fluid Level</h2>
         <div class="gauge-box">
-            <div data-labelheight="10" 
-                style="height: 170px; background: transparent; margin: 0 auto;" 
-                id="gauge-fluidlevel" 
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-fluidlevel"
                 data-chart="solidgauge"
-                data-nodename="advvfdipp.fluidlevel" 
-                data-units="ft." 
-                data-min="0" 
-                data-max="500" 
-                data-decimalplaces="2" 
+                data-nodename="advvfdipp.fluidlevel"
+                data-units="ft."
+                data-min="0"
+                data-max="500"
+                data-decimalplaces="2"
                 data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                 data-valuefontsize="18px">
             </div>
             <div class- "timestamp-box">
-                <a href="#" data-ChannelId="<%= channels['advvfdipp.fluidlevel'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                <a href="#" data-channelId="<%= channels['advvfdipp.fluidlevel'].channelId %>" class="data-table" title="Download Channel History">
                     <i class="fa fa-download"></i>
                 </a>
             </div>
@@ -40,20 +49,20 @@
     <div class='col-xs-4 text-center box-me'>
         <h2>Flow Rate</h2>
         <div class="gauge-box">
-            <div data-labelheight="10" 
-                style="height: 170px; background: transparent; margin: 0 auto;" 
-                id="gauge-flowrate" 
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-flowrate"
                 data-chart="solidgauge"
-                data-nodename="advvfdipp.flowrate" 
-                data-units="GPM" 
-                data-min="0" 
-                data-max="250" 
-                data-decimalplaces="2" 
+                data-nodename="advvfdipp.flowrate"
+                data-units="GPM"
+                data-min="0"
+                data-max="250"
+                data-decimalplaces="2"
                 data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                 data-valuefontsize="18px">
             </div>
             <div class- "timestamp-box">
-                <a href="#" data-ChannelId="<%= channels['advvfdipp.flowrate'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                <a href="#" data-channelId="<%= channels['advvfdipp.flowrate'].channelId %>" class="data-table" title="Download Channel History">
                     <i class="fa fa-download"></i>
                 </a>
             </div>
@@ -66,20 +75,20 @@
     <div class='col-xs-4 text-center box-me'>
         <h2>Intake Pressure</h2>
         <div class="gauge-box">
-            <div data-labelheight="10" 
-                style="height: 170px; background: transparent; margin: 0 auto;" 
-                id="gauge-intakepressure" 
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-intakepressure"
                 data-chart="solidgauge"
-                data-nodename="advvfdipp.intakepressure" 
-                data-units="PSI" 
-                data-min="0" 
-                data-max="500" 
-                data-decimalplaces="1" 
+                data-nodename="advvfdipp.intakepressure"
+                data-units="PSI"
+                data-min="0"
+                data-max="500"
+                data-decimalplaces="1"
                 data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                 data-valuefontsize="18px">
             </div>
             <div class- "timestamp-box">
-                <a href="#" data-ChannelId="<%= channels['advvfdipp.intakepressure'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                <a href="#" data-channelId="<%= channels['advvfdipp.intakepressure'].channelId %>" class="data-table" title="Download Channel History">
                     <i class="fa fa-download"></i>
                 </a>
             </div>
@@ -92,20 +101,20 @@
     <div class='col-xs-4 text-center box-me'>
         <h2>Motor Frequency</h2>
         <div class="gauge-box">
-            <div data-labelheight="10" 
-                style="height: 170px; background: transparent; margin: 0 auto;" 
-                id="gauge-vfdfrequency" 
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-vfdfrequency"
                 data-chart="solidgauge"
-                data-nodename="advvfdipp.vfdfrequency" 
-                data-units="Hz" 
-                data-min="0" 
-                data-max="75" 
-                data-decimalplaces="2" 
+                data-nodename="advvfdipp.vfdfrequency"
+                data-units="Hz"
+                data-min="0"
+                data-max="75"
+                data-decimalplaces="2"
                 data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                 data-valuefontsize="18px">
             </div>
             <div class- "timestamp-box">
-                <a href="#" data-ChannelId="<%= channels['advvfdipp.vfdfrequency'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                <a href="#" data-channelId="<%= channels['advvfdipp.vfdfrequency'].channelId %>" class="data-table" title="Download Channel History">
                     <i class="fa fa-download"></i>
                 </a>
             </div>
@@ -118,20 +127,20 @@
     <div class='col-xs-4 text-center box-me'>
         <h2>Motor Current</h2>
         <div class="gauge-box">
-            <div data-labelheight="10" 
-                style="height: 170px; background: transparent; margin: 0 auto;" 
-                id="gauge-vfdcurrent" 
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-vfdcurrent"
                 data-chart="solidgauge"
-                data-nodename="advvfdipp.vfdcurrent" 
-                data-units="A" 
-                data-min="0" 
-                data-max="100" 
-                data-decimalplaces="2" 
+                data-nodename="advvfdipp.vfdcurrent"
+                data-units="A"
+                data-min="0"
+                data-max="100"
+                data-decimalplaces="2"
                 data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                 data-valuefontsize="18px">
             </div>
             <div class- "timestamp-box">
-                <a href="#" data-ChannelId="<%= channels['advvfdipp.vfdcurrent'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                <a href="#" data-channelId="<%= channels['advvfdipp.vfdcurrent'].channelId %>" class="data-table" title="Download Channel History">
                     <i class="fa fa-download"></i>
                 </a>
             </div>
@@ -144,20 +153,20 @@
     <div class='col-xs-4 text-center box-me'>
         <h2>Tubing Pressure</h2>
         <div class="gauge-box">
-            <div data-labelheight="10" 
-                style="height: 170px; background: transparent; margin: 0 auto;" 
-                id="gauge-tubingpressure" 
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-tubingpressure"
                 data-chart="solidgauge"
-                data-nodename="advvfdipp.tubingpressure" 
-                data-units="PSI" 
-                data-min="0" 
-                data-max="250" 
-                data-decimalplaces="2" 
+                data-nodename="advvfdipp.tubingpressure"
+                data-units="PSI"
+                data-min="0"
+                data-max="250"
+                data-decimalplaces="2"
                 data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                 data-valuefontsize="18px">
             </div>
             <div class- "timestamp-box">
-                <a href="#" data-ChannelId="<%= channels['advvfdipp.tubingpressure'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                <a href="#" data-channelId="<%= channels['advvfdipp.tubingpressure'].channelId %>" class="data-table" title="Download Channel History">
                     <i class="fa fa-download"></i>
                 </a>
             </div>
@@ -170,20 +179,20 @@
     <div class='col-xs-4 text-center box-me'>
         <h2>Intake Temperature</h2>
         <div class="gauge-box">
-            <div data-labelheight="10" 
-                style="height: 170px; background: transparent; margin: 0 auto;" 
-                id="gauge-intaketemperature" 
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-intaketemperature"
                 data-chart="solidgauge"
-                data-nodename="advvfdipp.intaketemperature" 
-                data-units="&deg F" 
-                data-min="0" 
-                data-max="200" 
-                data-decimalplaces="1" 
+                data-nodename="advvfdipp.intaketemperature"
+                data-units="&deg F"
+                data-min="0"
+                data-max="200"
+                data-decimalplaces="1"
                 data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
                 data-valuefontsize="18px">
             </div>
             <div class- "timestamp-box">
-                <a href="#" data-ChannelId="<%= channels['advvfdipp.intaketemperature'].ChannelId %>" class="data-csv-all" title="Download Channel History">
+                <a href="#" data-channelId="<%= channels['advvfdipp.intaketemperature'].channelId %>" class="data-table" title="Download Channel History">
                     <i class="fa fa-download"></i>
                 </a>
             </div>
@@ -192,24 +201,76 @@
         </span>
         </div>
     </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Flow Today</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-flowtotal"
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.flowtotal"
+                data-units="BBL"
+                data-min="0"
+                data-max="5000"
+                data-decimalplaces="1"
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-channelId="<%= channels['advvfdipp.flowtotal'].channelId %>" class="data-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="flowtotal">
+            <%= channels["advvfdipp.flowtotal"].timestamp %>
+        </span>
+        </div>
+    </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Energy Today</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+                style="height: 170px; background: transparent; margin: 0 auto;"
+                id="gauge-energytotal"
+                data-chart="solidgauge"
+                data-nodename="advvfdipp.energytotal"
+                data-units="kWh"
+                data-min="0"
+                data-max="2000"
+                data-decimalplaces="1"
+                data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
+                data-valuefontsize="18px">
+            </div>
+            <div class- "timestamp-box">
+                <a href="#" data-channelId="<%= channels['advvfdipp.energytotal'].channelId %>" class="data-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="energytotal">
+            <%= channels["advvfdipp.energytotal"].timestamp %>
+        </span>
+        </div>
+    </div>
 </div>
 <div class="row box-me">
     <div class='col-xs-12'>
         <div style="height:300px"
-            id="chart-overview" 
-            data-chart="chart" 
-            data-nodename1="advvfdipp.fluidlevel" 
-            data-datalabel1="Fluid Level" 
-            data-nodename2="advvfdipp.flowrate" 
-            data-datalabel2="Flow Rate" 
-            data-nodename3="advvfdipp.vfdcurrent" 
-            data-datalabel3="Motor Current" 
-            data-nodename4="advvfdipp.vfdfrequency" 
-            data-datalabel4="Motor Frequency" 
-            data-daysofhistory="2"  
-            data-chartlabel="Last 48 Hours" 
-            data-ylabel="" 
-            data-xlabel="Date" 
+            id="chart-overview"
+            data-chart="chart"
+            data-nodename1="advvfdipp.fluidlevel"
+            data-datalabel1="Fluid Level"
+            data-nodename2="advvfdipp.flowrate"
+            data-datalabel2="Flow Rate"
+            data-nodename3="advvfdipp.vfdcurrent"
+            data-datalabel3="Motor Current"
+            data-nodename4="advvfdipp.vfdfrequency"
+            data-datalabel4="Motor Frequency"
+            data-daysofhistory="2"
+            data-chartlabel="Last 48 Hours"
+            data-ylabel=""
+            data-xlabel="Date"
             data-units=""></div>
     </div>
 </div>
@@ -222,15 +283,15 @@
         border: 1px solid #eee;
         /*margin: 1em 0;*/
     }
-    
+
     .box-me .gauge-box {
         margin-top: -0.25em;
     }
-    
+
     .pad15 {
         margin: 15px 15px;
     }
-    
+
     .box-me h2 {
         text-transform: uppercase;
         font-size: 14px;
@@ -239,13 +300,13 @@
         letter-spacing: 1px;
         z-index: 100;
     }
-    
+
     .dynamic-chart-form {
         background-color: whiteSmoke;
         padding: 1em 0.5em;
         margin-top: 1em;
     }
-    
+
     .row-flex {
         display: -webkit-box;
         display: -webkit-flex;
@@ -253,12 +314,12 @@
         display: flex;
         flex-wrap: wrap;
     }
-    
+
     .row-flex > [class*='col-'] {
         display: flex;
         flex-direction: column;
     }
-    
+
     #systemStatusTimelineContainer h2 {
         text-transform: uppercase;
         font-size: 14px;
@@ -267,4 +328,4 @@
         letter-spacing: 1px;
         z-index: 100;
     }
-</style>
\ No newline at end of file
+</style>