diff --git a/POCloud/HTML/Overview.html b/POCloud/HTML/Overview.html
index a7523cc..7e6ff16 100644
--- a/POCloud/HTML/Overview.html
+++ b/POCloud/HTML/Overview.html
@@ -1,153 +1,372 @@
+<div class="modal fade" id="note-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <form class='set_channel'>
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">Note Entry</h4>
+                </div>
+                <div class="modal-body">
+
+                    <input class="form-control" data-channelId='<%= channels["advvfdipp.notes"].channelId %>'
+                    data-techName='<%=channels["advvfdipp.notes"].techName %>'
+                    data-name='<%= channels["advvfdipp.notes"].name %>'
+                    data-val="<%=channels["advvfdipp.notes"].value %>"
+                    type="text"
+                    id="<%= channels["advvfdipp.notes"].channelId %>"
+                    value="<%=channels["advvfdipp.notes"].value %>">
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button class="btn btn-primary set_channel_btn" value='Save'>Save Note</button>
+                </div>
+            </form>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
+
 <div class="row row-flex box-me">
-    <div class='col-xs-12' id="systemStatusTimelineContainer">
-        <h2>Well Status</h2>
-        <div id="statusTimeline" data-chart="timeline" data-nodename="advvfdipp.wellstatus" data-daysofhistory="2" data-chartlabel="" data-xlabel='Date' data-colors="Running:#3AFF83,Pumped Off:#dbda35,Alarmed:#e9821b,Locked Out:#cd2f34,Stopped:#3699b4"></div>
-        <!-- -->
+    <div class='col-xs-8 box-me' id="systemStatusTimelineContainer">
+        <div class="text-center">
+            <h2>Well Status</h2>
+        </div>
+        <div id="statusTimeline"
+        data-chart="timeline"
+        data-nodename="advvfdipp.wellstatus"
+        data-daysofhistory="2"
+        data-chartlabel=""
+        data-xlabel='Date'
+        data-colors="Running:#3AFF83,Pumped Off:#dbda35,Alarmed:#e9821b,Locked Out:#cd2f34,Stopped:#3699b4"></div>
     </div>
-</div>
 
-<div class='row row-flex box-me'>
-    <div class='col-xs-4 text-center'>
+    <div class='col-xs-4 box-me'>
+        <div class="text-center">
+            <h2>Last Note</h2>
+            <p class="note-text"><%= 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 note-btn" title="Note History"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-th-list icon-theme"></i> All Notes</button>
+            <br />
+            <button type="button" class="btn btn-theme note-btn" data-toggle="modal" data-target="#note-modal"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-pencil icon-theme"></i> New Note</button>
+        </div>
+    </div>
+    <div class='col-xs-4 text-center box-me'>
         <h2>Fluid Level</h2>
-        <div class="gauge-box" data-valueupdate="fluidlevel">
-            <gauge type="angular" channel="fluidlevel" max="600" label="ft." classes="extra" height="250" />
-            <span data-timeupdate="fluidlevel"><%= channels["advvfdipp.fluidlevel"].timestamp %></span>
+        <div class="gauge-box">
+            <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-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-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="fluidlevel">
+                <%= channels["advvfdipp.fluidlevel"].timestamp %>
+            </span>
         </div>
     </div>
-    <div class='col-xs-8'>
-        <div style="height:300px" id="chart-fluidlevel" data-chart="chart" data-nodename1="advvfdipp.fluidlevel" data-datalabel1="Fluid Level" data-daysofhistory="2"  data-chartlabel="Fluid Level" data-ylabel="" data-xlabel="Date" data-units=" ft"></div>
-    </div>
-</div>
 
-<div class='row row-flex box-me'>
-    <div class='col-xs-4 text-center'>
+
+    <div class='col-xs-4 text-center box-me'>
         <h2>Flow Rate</h2>
-        <div class="gauge-box" data-valueupdate="flowrate">
-            <gauge type="angular" channel="flowrate" max="400" label="GPM" classes="extra" height="250" />
-            <span data-timeupdate="flowrate"><%= channels["advvfdipp.flowrate"].timestamp %></span>
+        <div class="gauge-box">
+            <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-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-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="flowrate">
+                <%= channels["advvfdipp.flowrate"].timestamp %>
+            </span>
         </div>
     </div>
-    <div class='col-xs-8'>
-        <div style="height:300px" id="chart-flowrate" data-chart="chart" data-nodename1="advvfdipp.flowrate" data-datalabel1="Flow Rate" data-daysofhistory="2"  data-chartlabel="Flow Rate" data-ylabel="" data-xlabel="Date" data-units=" GPM"></div>
-    </div>
-</div>
 
-<div class='row row-flex box-me'>
-    <div class='col-xs-4 text-center'>
-        <h2>Downhole Pressure</h2>
-        <div class="gauge-box" data-valueupdate="intakepressure">
-            <gauge type="angular" channel="intakepressure" max="400" label="PSI" classes="extra" height="250"  data-valueupdate="intakepressure" />
-            <span data-timeupdate="intakepressure"><%= channels["advvfdipp.intakepressure"].timestamp %></span>
+    <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"
+            data-chart="solidgauge"
+            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-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="intakepressure">
+            <%= channels["advvfdipp.intakepressure"].timestamp %>
+        </span>
     </div>
-    <div class='col-xs-8'>
-        <div style="height:300px" id="chart-intakepressure" data-chart="chart" data-nodename1="advvfdipp.intakepressure" data-datalabel1="Downhole Pressure" data-daysofhistory="2"  data-chartlabel="Intake Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
     </div>
-</div>
 
-<div class='row row-flex box-me'>
-    <div class='col-xs-4 text-center'>
+    <div class='col-xs-4 text-center box-me'>
         <h2>Motor Frequency</h2>
-        <div class="gauge-box" data-valueupdate="vfdfrequency">
-            <gauge type="angular" channel="vfdfrequency" max="300" label="Hz" classes="extra" height="250" />
-            <span data-timeupdate="vfdfrequency"><%= channels["advvfdipp.vfdfrequency"].timestamp %></span>
+        <div class="gauge-box">
+            <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-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-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="vfdfrequency">
+            <%= channels["advvfdipp.vfdfrequency"].timestamp %>
+        </span>
     </div>
-    <div class='col-xs-8'>
-        <div style="height:300px" id="chart-vfdfrequency" data-chart="chart" data-nodename1="advvfdipp.vfdfrequency" data-datalabel1="Downhole Temperature" data-daysofhistory="2"  data-chartlabel="VFD Frequency" data-ylabel="" data-xlabel="Date" data-units=" Hz"></div>
     </div>
-</div>
 
-
-<div class='row row-flex box-me'>
-    <div class='col-xs-4 text-center'>
+    <div class='col-xs-4 text-center box-me'>
         <h2>Motor Current</h2>
-        <div class="gauge-box" data-valueupdate="vfdcurrent">
-            <gauge type="angular" channel="vfdcurrent" max="150" label="A" classes="extra" height="250" />
-            <span data-timeupdate="vfdcurrent"><%= channels["advvfdipp.vfdcurrent"].timestamp %></span>
+        <div class="gauge-box">
+            <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-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-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="vfdcurrent">
+            <%= channels["advvfdipp.vfdcurrent"].timestamp %>
+        </span>
     </div>
-    <div class='col-xs-8'>
-        <div style="height:300px" id="chart-vfdcurrent" data-chart="chart" data-nodename1="advvfdipp.vfdcurrent" data-datalabel1="Motor Current" data-daysofhistory="2"  data-chartlabel="Motor Current" data-ylabel="" data-xlabel="Date" data-units=" A"></div>
     </div>
-</div>
 
-<div class='row row-flex box-me'>
-    <div class='col-xs-4 text-center'>
+    <div class='col-xs-4 text-center box-me'>
         <h2>Tubing Pressure</h2>
-        <div class="gauge-box" data-valueupdate="tubingpressure">
-            <gauge type="angular" channel="tubingpressure" max="400" label="PSI" classes="extra" height="250" />
-            <span data-timeupdate="tubingpressure"><%= channels["advvfdipp.tubingpressure"].timestamp %></span>
+        <div class="gauge-box">
+            <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-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-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="tubingpressure">
+                <%= channels["advvfdipp.tubingpressure"].timestamp %>
+            </span>
         </div>
     </div>
-    <div class='col-xs-8'>
-        <div style="height:300px" id="chart-tubingpressure" data-chart="chart" data-nodename1="advvfdipp.tubingpressure" data-datalabel1="Tubing Pressure" data-daysofhistory="2"  data-chartlabel="Tubing Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
+
+    <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"
+            data-chart="solidgauge"
+            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-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="intaketemperature">
+                <%= channels["advvfdipp.intaketemperature"].timestamp %>
+            </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"
+        data-units=""></div>
     </div>
 </div>
 
-<div class='row row-flex box-me'>
-    <div class='col-xs-4 text-center'>
-        <h2>Downhole Temperature</h2>
-        <div class="gauge-box" data-valueupdate="intaketemperature">
-            <gauge type="angular" channel="intaketemperature" max="300" label="deg F" classes="extra" height="250" />
-            <span data-timeupdate="intaketemperature"><%= channels["advvfdipp.intaketemperature"].timestamp %></span>
-        </div>
-    </div>
-    <div class='col-xs-8'>
-        <div style="height:300px" id="chart-intaketemperature" data-chart="chart" data-nodename1="advvfdipp.intaketemperature" data-datalabel1="Downhole Temperature" data-daysofhistory="2"  data-chartlabel="Intake Temperature" data-ylabel="" data-xlabel="Date" data-units=" &deg; F"></div>
-    </div>
-</div>
+<style>
+.modal-backdrop {position: relative;}
+.note-btn {
+    margin-top: 10px;
+    width: 75%;
+}
+.note-text {
+    font-size: 1.5em;
+    font-style: italic;
+}
+.box-me {
+    position: relative;
+    padding: 0.5em;
+    padding-bottom: 1.5em;
+    border: 1px solid #eee;
+    /*margin: 1em 0;*/
+}
 
+.box-me .gauge-box {
+    margin-top: -0.25em;
+}
 
+.pad15 {
+    margin: 15px 15px;
+}
 
-    <style>
-    .box-me {
-        position: relative;
-        padding: 0.5em;
-        padding-bottom: 1.5em;
-        border: 1px solid #eee;
-        /*margin: 1em 0;*/
-    }
-    .box-me .gauge-box {
-        margin-top: -0.25em;
-    }
+.box-me h2 {
+    text-transform: uppercase;
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    letter-spacing: 1px;
+    z-index: 100;
+}
 
-    .pad15 {
-        margin: 15px 15px;
-    }
+.dynamic-chart-form {
+    background-color: whiteSmoke;
+    padding: 1em 0.5em;
+    margin-top: 1em;
+}
 
-    .box-me h2 {
-        text-transform: uppercase;
-        font-size: 14px;
-        color: #666;
-        font-weight: 400;
-        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;
+    display: -ms-flexbox;
+    display: flex;
+    flex-wrap: wrap;
+}
 
-    .row-flex {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display:         flex;
-        flex-wrap: wrap;
-    }
-    .row-flex > [class*='col-'] {
-        display: flex;
-        flex-direction: column;
-    }
+.row-flex > [class*='col-'] {
+    display: flex;
+    flex-direction: column;
+}
 
-    #systemStatusTimelineContainer h2 {
-        text-transform: uppercase;
-        font-size: 14px;
-        color: #666;
-        font-weight: 400;
-        letter-spacing: 1px;
-        z-index: 100;
-    }
-    </style>
+#systemStatusTimelineContainer h2 {
+    text-transform: uppercase;
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    letter-spacing: 1px;
+    z-index: 100;
+}
+</style>
diff --git a/POCloud/HTML/newOverview.html b/POCloud/HTML/newOverview.html
deleted file mode 100644
index aa1edf8..0000000
--- a/POCloud/HTML/newOverview.html
+++ /dev/null
@@ -1,331 +0,0 @@
-<div class="row row-flex box-me">
-    <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"
-            data-chartlabel=""
-            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"
-                data-chart="solidgauge"
-                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-table" title="Download Channel History">
-                    <i class="fa fa-download"></i>
-                </a>
-            </div>
-            <span data-timeupdate="fluidlevel">
-            <%= channels["advvfdipp.fluidlevel"].timestamp %>
-        </span>
-        </div>
-    </div>
-
-    <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"
-                data-chart="solidgauge"
-                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-table" title="Download Channel History">
-                    <i class="fa fa-download"></i>
-                </a>
-            </div>
-            <span data-timeupdate="flowrate">
-            <%= channels["advvfdipp.flowrate"].timestamp %>
-        </span>
-        </div>
-    </div>
-
-    <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"
-                data-chart="solidgauge"
-                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-table" title="Download Channel History">
-                    <i class="fa fa-download"></i>
-                </a>
-            </div>
-            <span data-timeupdate="intakepressure">
-            <%= channels["advvfdipp.intakepressure"].timestamp %>
-        </span>
-        </div>
-    </div>
-
-    <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"
-                data-chart="solidgauge"
-                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-table" title="Download Channel History">
-                    <i class="fa fa-download"></i>
-                </a>
-            </div>
-            <span data-timeupdate="vfdfrequency">
-            <%= channels["advvfdipp.vfdfrequency"].timestamp %>
-        </span>
-        </div>
-    </div>
-
-    <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"
-                data-chart="solidgauge"
-                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-table" title="Download Channel History">
-                    <i class="fa fa-download"></i>
-                </a>
-            </div>
-            <span data-timeupdate="vfdcurrent">
-            <%= channels["advvfdipp.vfdcurrent"].timestamp %>
-        </span>
-        </div>
-    </div>
-
-    <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"
-                data-chart="solidgauge"
-                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-table" title="Download Channel History">
-                    <i class="fa fa-download"></i>
-                </a>
-            </div>
-            <span data-timeupdate="tubingpressure">
-            <%= channels["advvfdipp.tubingpressure"].timestamp %>
-        </span>
-        </div>
-    </div>
-
-    <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"
-                data-chart="solidgauge"
-                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-table" title="Download Channel History">
-                    <i class="fa fa-download"></i>
-                </a>
-            </div>
-            <span data-timeupdate="intaketemperature">
-            <%= channels["advvfdipp.intaketemperature"].timestamp %>
-        </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"
-            data-units=""></div>
-    </div>
-</div>
-
-<style>
-    .box-me {
-        position: relative;
-        padding: 0.5em;
-        padding-bottom: 1.5em;
-        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;
-        color: #666;
-        font-weight: 400;
-        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;
-        display: -ms-flexbox;
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .row-flex > [class*='col-'] {
-        display: flex;
-        flex-direction: column;
-    }
-
-    #systemStatusTimelineContainer h2 {
-        text-transform: uppercase;
-        font-size: 14px;
-        color: #666;
-        font-weight: 400;
-        letter-spacing: 1px;
-        z-index: 100;
-    }
-</style>
diff --git a/POCloud/HTML/oldOverview.html b/POCloud/HTML/oldOverview.html
new file mode 100644
index 0000000..a7523cc
--- /dev/null
+++ b/POCloud/HTML/oldOverview.html
@@ -0,0 +1,153 @@
+<div class="row row-flex box-me">
+    <div class='col-xs-12' id="systemStatusTimelineContainer">
+        <h2>Well Status</h2>
+        <div id="statusTimeline" data-chart="timeline" data-nodename="advvfdipp.wellstatus" data-daysofhistory="2" data-chartlabel="" data-xlabel='Date' data-colors="Running:#3AFF83,Pumped Off:#dbda35,Alarmed:#e9821b,Locked Out:#cd2f34,Stopped:#3699b4"></div>
+        <!-- -->
+    </div>
+</div>
+
+<div class='row row-flex box-me'>
+    <div class='col-xs-4 text-center'>
+        <h2>Fluid Level</h2>
+        <div class="gauge-box" data-valueupdate="fluidlevel">
+            <gauge type="angular" channel="fluidlevel" max="600" label="ft." classes="extra" height="250" />
+            <span data-timeupdate="fluidlevel"><%= channels["advvfdipp.fluidlevel"].timestamp %></span>
+        </div>
+    </div>
+    <div class='col-xs-8'>
+        <div style="height:300px" id="chart-fluidlevel" data-chart="chart" data-nodename1="advvfdipp.fluidlevel" data-datalabel1="Fluid Level" data-daysofhistory="2"  data-chartlabel="Fluid Level" data-ylabel="" data-xlabel="Date" data-units=" ft"></div>
+    </div>
+</div>
+
+<div class='row row-flex box-me'>
+    <div class='col-xs-4 text-center'>
+        <h2>Flow Rate</h2>
+        <div class="gauge-box" data-valueupdate="flowrate">
+            <gauge type="angular" channel="flowrate" max="400" label="GPM" classes="extra" height="250" />
+            <span data-timeupdate="flowrate"><%= channels["advvfdipp.flowrate"].timestamp %></span>
+        </div>
+    </div>
+    <div class='col-xs-8'>
+        <div style="height:300px" id="chart-flowrate" data-chart="chart" data-nodename1="advvfdipp.flowrate" data-datalabel1="Flow Rate" data-daysofhistory="2"  data-chartlabel="Flow Rate" data-ylabel="" data-xlabel="Date" data-units=" GPM"></div>
+    </div>
+</div>
+
+<div class='row row-flex box-me'>
+    <div class='col-xs-4 text-center'>
+        <h2>Downhole Pressure</h2>
+        <div class="gauge-box" data-valueupdate="intakepressure">
+            <gauge type="angular" channel="intakepressure" max="400" label="PSI" classes="extra" height="250"  data-valueupdate="intakepressure" />
+            <span data-timeupdate="intakepressure"><%= channels["advvfdipp.intakepressure"].timestamp %></span>
+        </div>
+    </div>
+    <div class='col-xs-8'>
+        <div style="height:300px" id="chart-intakepressure" data-chart="chart" data-nodename1="advvfdipp.intakepressure" data-datalabel1="Downhole Pressure" data-daysofhistory="2"  data-chartlabel="Intake Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
+    </div>
+</div>
+
+<div class='row row-flex box-me'>
+    <div class='col-xs-4 text-center'>
+        <h2>Motor Frequency</h2>
+        <div class="gauge-box" data-valueupdate="vfdfrequency">
+            <gauge type="angular" channel="vfdfrequency" max="300" label="Hz" classes="extra" height="250" />
+            <span data-timeupdate="vfdfrequency"><%= channels["advvfdipp.vfdfrequency"].timestamp %></span>
+        </div>
+    </div>
+    <div class='col-xs-8'>
+        <div style="height:300px" id="chart-vfdfrequency" data-chart="chart" data-nodename1="advvfdipp.vfdfrequency" data-datalabel1="Downhole Temperature" data-daysofhistory="2"  data-chartlabel="VFD Frequency" data-ylabel="" data-xlabel="Date" data-units=" Hz"></div>
+    </div>
+</div>
+
+
+<div class='row row-flex box-me'>
+    <div class='col-xs-4 text-center'>
+        <h2>Motor Current</h2>
+        <div class="gauge-box" data-valueupdate="vfdcurrent">
+            <gauge type="angular" channel="vfdcurrent" max="150" label="A" classes="extra" height="250" />
+            <span data-timeupdate="vfdcurrent"><%= channels["advvfdipp.vfdcurrent"].timestamp %></span>
+        </div>
+    </div>
+    <div class='col-xs-8'>
+        <div style="height:300px" id="chart-vfdcurrent" data-chart="chart" data-nodename1="advvfdipp.vfdcurrent" data-datalabel1="Motor Current" data-daysofhistory="2"  data-chartlabel="Motor Current" data-ylabel="" data-xlabel="Date" data-units=" A"></div>
+    </div>
+</div>
+
+<div class='row row-flex box-me'>
+    <div class='col-xs-4 text-center'>
+        <h2>Tubing Pressure</h2>
+        <div class="gauge-box" data-valueupdate="tubingpressure">
+            <gauge type="angular" channel="tubingpressure" max="400" label="PSI" classes="extra" height="250" />
+            <span data-timeupdate="tubingpressure"><%= channels["advvfdipp.tubingpressure"].timestamp %></span>
+        </div>
+    </div>
+    <div class='col-xs-8'>
+        <div style="height:300px" id="chart-tubingpressure" data-chart="chart" data-nodename1="advvfdipp.tubingpressure" data-datalabel1="Tubing Pressure" data-daysofhistory="2"  data-chartlabel="Tubing Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
+    </div>
+</div>
+
+<div class='row row-flex box-me'>
+    <div class='col-xs-4 text-center'>
+        <h2>Downhole Temperature</h2>
+        <div class="gauge-box" data-valueupdate="intaketemperature">
+            <gauge type="angular" channel="intaketemperature" max="300" label="deg F" classes="extra" height="250" />
+            <span data-timeupdate="intaketemperature"><%= channels["advvfdipp.intaketemperature"].timestamp %></span>
+        </div>
+    </div>
+    <div class='col-xs-8'>
+        <div style="height:300px" id="chart-intaketemperature" data-chart="chart" data-nodename1="advvfdipp.intaketemperature" data-datalabel1="Downhole Temperature" data-daysofhistory="2"  data-chartlabel="Intake Temperature" data-ylabel="" data-xlabel="Date" data-units=" &deg; F"></div>
+    </div>
+</div>
+
+
+
+    <style>
+    .box-me {
+        position: relative;
+        padding: 0.5em;
+        padding-bottom: 1.5em;
+        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;
+        color: #666;
+        font-weight: 400;
+        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;
+        display: -ms-flexbox;
+        display:         flex;
+        flex-wrap: wrap;
+    }
+    .row-flex > [class*='col-'] {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #systemStatusTimelineContainer h2 {
+        text-transform: uppercase;
+        font-size: 14px;
+        color: #666;
+        font-weight: 400;
+        letter-spacing: 1px;
+        z-index: 100;
+    }
+    </style>