diff --git a/GaugeProjectApache/py/dollars.html b/GaugeProjectApache/py/dollars.html
old mode 100644
new mode 100755
index c78a2c5..72b9507
--- a/GaugeProjectApache/py/dollars.html
+++ b/GaugeProjectApache/py/dollars.html
@@ -1,52 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Electricity Statistics Dashboard</title>
     <style>
-    button.button {
-    background-color: transparent;
-    border: 2px solid black;
-    font-size: 12pt;
-    padding: 8px 16px;
-    color: black;
-    border-radius: 4px;
-    align: center;
-    }
-    button.button:hover {
-    background-color: black;
-    color: white;
-    cursor: pointer;
-    }
+        a {
+            text-decoration: none;
+        }
+
+        button.button {
+            transition: 1s all ease;
+            background-color: transparent;
+            font-size: 12pt;
+            padding: 8px 45px;
+            color: black;
+            border-radius: 8px;
+            margin: 4px auto;
+            display: block;
+        }
+
+        button.button:hover {
+            color: white;
+            cursor: pointer;
+        }
+
+        #btn-1:hover{
+            background-color: #f57970;
+        }
+
+        #btn-2:hover{
+            background-color: #4ab3a9;
+        }
+
+        #btn-3:hover{
+            background-color: #7683c9;
+        }
+
+        #btn-4:hover{
+            background-color: #fdd14f;
+        }
+
+        @media screen and (max-width: 1012px) {
+            aside {
+                width: 100% !important;
+            }
+
+            #mySVG {
+                width: 100% !important;
+            }
+        }
     </style>
+
 </head>
 
 
 <body style="background-color: #f9f9f9;">
 <h1 align="center" style="font-family: monospace">Electricity Statistics Dashboard</h1>
-<div style="float:left; padding-top: 20%; padding-left: 10%">
-        <a href="kW.html"><button class="button" style="padding: 8px 45px;"> kW<br></button></a><br>
-        <a href="kWh.html"><button class="button" style="padding: 8px 41px;"> kWh<br></button></a><br>
-        <a href="dollars.html"><button class="button" style="padding: 8px 28px;"> Cost $$</button></a><br>
-        <a href="kWhHourly.html"><button class="button"> kWh hourly</button></a><br>
-</div>
-<div id="mySVG" style="float: right; padding-right: 60%">
-    <object data="dollars.svg" type="image/svg+xml" width="700%"></object>
+<aside style="float:left; padding-top: 20%; padding-left: 10%; width: 10%; margin-right: 5%;">
+    <a href="kW.html">
+        <button class="button" style="border: 2px solid #f57970;" id="btn-1"> kW<br></button>
+    </a><br>
+    <a href="kWh.html">
+        <button class="button" style="border: 2px solid #4ab3a9;" id="btn-2"> kWh<br></button>
+    </a><br>
+    <a href="kWhHourly.html">
+        <button class="button" style="border: 2px solid #7683c9;" id="btn-3"> kWh (hourly)</button>
+    </a><br>
+    <a href="dollars.html">
+        <button class="button" style="border: 2px solid #fdd14f;" id="btn-4"> Cost</button>
+    </a><br>
+</aside>
+<div id="mySVG" style="float: left; width: 75%;">
 </div>
+<object data="" type="image/svg+xml" width="100%" style="margin: 0 auto; text-align: center; max-height: 80vh;"
+        id="svg"></object>
 <script>
-        function sleep(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-        async function my_function() {
-            while(true) {
-                $("#mySVG").load("dollars.html #mySVG");
-                await sleep(60000);
-                console.log("sleep")
-            }
-        }
-        my_function();
-    </script>
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function load_svg() {
+        $("#mySVG").load("dollars.html #svg");
+        await sleep(1000)
+        let child = document.getElementById('mySVG').firstChild;
+        child.setAttribute('data', 'dollars.svg')
+
+        await sleep(1200);
+        console.log("sleep")
+    }
+
+    load_svg();
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/GaugeProjectApache/py/index.html b/GaugeProjectApache/py/index.html
old mode 100644
new mode 100755
index 77ed9de..8fc83c5
--- a/GaugeProjectApache/py/index.html
+++ b/GaugeProjectApache/py/index.html
@@ -1,53 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Electricity Statistics Dashboard</title>
     <style>
-    button.button {
-    background-color: transparent;
-    border: 2px solid black;
-    font-size: 12pt;
-    padding: 8px 16px;
-    color: black;
-    border-radius: 4px;
-    align: center;
-    }
-    button.button:hover {
-    background-color: black;
-    color: white;
-    cursor: pointer;
-    }
+        a {
+            text-decoration: none;
+        }
+
+        button.button {
+            transition: 1s all ease;
+            background-color: transparent;
+            font-size: 12pt;
+            padding: 8px 45px;
+            color: black;
+            border-radius: 8px;
+            margin: 4px auto;
+            display: block;
+        }
+
+        button.button:hover {
+            color: white;
+            cursor: pointer;
+        }
+
+        #btn-1:hover{
+            background-color: #f57970;
+        }
+
+        #btn-2:hover{
+            background-color: #4ab3a9;
+        }
+
+        #btn-3:hover{
+            background-color: #7683c9;
+        }
+
+        #btn-4:hover{
+            background-color: #fdd14f;
+        }
+
+        @media screen and (max-width: 1012px) {
+            aside {
+                width: 100% !important;
+            }
+
+            #mySVG {
+                width: 100% !important;
+            }
+        }
     </style>
+
 </head>
 
 
 <body style="background-color: #f9f9f9;">
 <h1 align="center" style="font-family: monospace">Electricity Statistics Dashboard</h1>
-<div style="float:left; padding-top: 20%; padding-left: 10%">
-       <a href="kW.html"><button class="button" style="padding: 8px 45px;"> kW<br></button></a><br>
-        <a href="kWh.html"><button class="button" style="padding: 8px 41px;"> kWh<br></button></a><br>
-        <a href="dollars.html"><button class="button" style="padding: 8px 28px;"> Cost $$</button></a><br>
-        <a href="kWhHourly.html"><button class="button"> kWh hourly</button></a><br>
-</div>
-<div id="mySVG" style="float: right; padding-right: 60%">
-    <object data="kw.svg" type="image/svg+xml" width="700%"></object>
+<aside style="float:left; padding-top: 20%; padding-left: 10%; width: 10%; margin-right: 5%;">
+    <a href="kW.html">
+        <button class="button" style="border: 2px solid #f57970;" id="btn-1"> kW<br></button>
+    </a><br>
+    <a href="kWh.html">
+        <button class="button" style="border: 2px solid #4ab3a9;" id="btn-2"> kWh<br></button>
+    </a><br>
+    <a href="kWhHourly.html">
+        <button class="button" style="border: 2px solid #7683c9;" id="btn-3"> kWh (hourly)</button>
+    </a><br>
+    <a href="dollars.html">
+        <button class="button" style="border: 2px solid #fdd14f;" id="btn-4"> Cost</button>
+    </a><br>
+</aside>
+<div id="mySVG" style="float: left; width: 75%;">
 </div>
+<object data="" type="image/svg+xml" width="100%" style="margin: 0 auto; text-align: center; max-height: 80vh;"
+        id="svg"></object>
 <script>
-        function sleep(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-        async function my_function() {
-            while(true) {
-                $("#mySVG").load("kW.html #mySVG");
-                await sleep(60000);
-                console.log("sleep")
-            }
-        }
-        my_function();
-    </script>
-</body>
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function load_svg() {
+        $("#mySVG").load("kW.html #svg");
+        await sleep(1000)
+        let child = document.getElementById('mySVG').firstChild;
+        child.setAttribute('data', 'kw.svg')
 
+        await sleep(1200);
+        console.log("sleep")
+    }
+
+    load_svg();
+</script>
+</body>
 </html>
\ No newline at end of file
diff --git a/GaugeProjectApache/py/kW.html b/GaugeProjectApache/py/kW.html
old mode 100644
new mode 100755
index c4081b0..8fc83c5
--- a/GaugeProjectApache/py/kW.html
+++ b/GaugeProjectApache/py/kW.html
@@ -1,51 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Electricity Statistics Dashboard</title>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <style>
-    button.button {
-    background-color: transparent;
-    border: 2px solid black;
-    font-size: 12pt;
-    padding: 8px 16px;
-    color: black;
-    border-radius: 4px;
-    align: center;
-    }
-    button.button:hover {
-    background-color: black;
-    color: white;
-    cursor: pointer;
-    }
+        a {
+            text-decoration: none;
+        }
+
+        button.button {
+            transition: 1s all ease;
+            background-color: transparent;
+            font-size: 12pt;
+            padding: 8px 45px;
+            color: black;
+            border-radius: 8px;
+            margin: 4px auto;
+            display: block;
+        }
+
+        button.button:hover {
+            color: white;
+            cursor: pointer;
+        }
+
+        #btn-1:hover{
+            background-color: #f57970;
+        }
+
+        #btn-2:hover{
+            background-color: #4ab3a9;
+        }
+
+        #btn-3:hover{
+            background-color: #7683c9;
+        }
+
+        #btn-4:hover{
+            background-color: #fdd14f;
+        }
+
+        @media screen and (max-width: 1012px) {
+            aside {
+                width: 100% !important;
+            }
+
+            #mySVG {
+                width: 100% !important;
+            }
+        }
     </style>
+
 </head>
+
+
 <body style="background-color: #f9f9f9;">
-    <h1 align="center" style="font-family: monospace">Electricity Statistics Dashboard</h1>
-    <div style="float:left; padding-top: 20%; padding-left: 10%">
-           <a href="kW.html"><button class="button" style="padding: 8px 45px;"> kW<br></button></a><br>
-            <a href="kWh.html"><button class="button" style="padding: 8px 41px;"> kWh<br></button></a><br>
-            <a href="dollars.html"><button class="button" style="padding: 8px 28px;"> Cost $$</button></a><br>
-            <a href="kWhHourly.html"><button class="button"> kWh hourly</button></a><br>
-    </div>
-    <div id="mySVG" style="float: right; padding-right: 60%">
-        <object data="kw.svg" type="image/svg+xml" width="700%"></object>
-    </div>
-
-    <script>
-        function sleep(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-        async function my_function() {
-            while(true) {
-                $("#mySVG").load("kW.html #mySVG");
-                await sleep(60000);
-                console.log("sleep")
-            }
-        }
-        my_function();
-    </script>
+<h1 align="center" style="font-family: monospace">Electricity Statistics Dashboard</h1>
+<aside style="float:left; padding-top: 20%; padding-left: 10%; width: 10%; margin-right: 5%;">
+    <a href="kW.html">
+        <button class="button" style="border: 2px solid #f57970;" id="btn-1"> kW<br></button>
+    </a><br>
+    <a href="kWh.html">
+        <button class="button" style="border: 2px solid #4ab3a9;" id="btn-2"> kWh<br></button>
+    </a><br>
+    <a href="kWhHourly.html">
+        <button class="button" style="border: 2px solid #7683c9;" id="btn-3"> kWh (hourly)</button>
+    </a><br>
+    <a href="dollars.html">
+        <button class="button" style="border: 2px solid #fdd14f;" id="btn-4"> Cost</button>
+    </a><br>
+</aside>
+<div id="mySVG" style="float: left; width: 75%;">
+</div>
+<object data="" type="image/svg+xml" width="100%" style="margin: 0 auto; text-align: center; max-height: 80vh;"
+        id="svg"></object>
+<script>
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function load_svg() {
+        $("#mySVG").load("kW.html #svg");
+        await sleep(1000)
+        let child = document.getElementById('mySVG').firstChild;
+        child.setAttribute('data', 'kw.svg')
+
+        await sleep(1200);
+        console.log("sleep")
+    }
+
+    load_svg();
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/GaugeProjectApache/py/kWh.html b/GaugeProjectApache/py/kWh.html
old mode 100644
new mode 100755
index 66d7bd3..146469b
--- a/GaugeProjectApache/py/kWh.html
+++ b/GaugeProjectApache/py/kWh.html
@@ -1,52 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Electricity Statistics Dashboard</title>
     <style>
-    button.button {
-    background-color: transparent;
-    border: 2px solid black;
-    font-size: 12pt;
-    padding: 8px 16px;
-    color: black;
-    border-radius: 4px;
-    align: center;
-    }
-    button.button:hover {
-    background-color: black;
-    color: white;
-    cursor: pointer;
-    }
+        a {
+            text-decoration: none;
+        }
+
+        button.button {
+            transition: 1s all ease;
+            background-color: transparent;
+            font-size: 12pt;
+            padding: 8px 45px;
+            color: black;
+            border-radius: 8px;
+            margin: 4px auto;
+            display: block;
+        }
+
+        button.button:hover {
+            color: white;
+            cursor: pointer;
+        }
+
+        #btn-1:hover{
+            background-color: #f57970;
+        }
+
+        #btn-2:hover{
+            background-color: #4ab3a9;
+        }
+
+        #btn-3:hover{
+            background-color: #7683c9;
+        }
+
+        #btn-4:hover{
+            background-color: #fdd14f;
+        }
+
+        @media screen and (max-width: 1012px) {
+            aside {
+                width: 100% !important;
+            }
+
+            #mySVG {
+                width: 100% !important;
+            }
+        }
     </style>
+
 </head>
 
 
 <body style="background-color: #f9f9f9;">
 <h1 align="center" style="font-family: monospace">Electricity Statistics Dashboard</h1>
-<div style="float:left; padding-top: 20%; padding-left: 10%">
-       <a href="kW.html"><button class="button" style="padding: 8px 45px;"> kW<br></button></a><br>
-        <a href="kWh.html"><button class="button" style="padding: 8px 41px;"> kWh<br></button></a><br>
-        <a href="dollars.html"><button class="button" style="padding: 8px 28px;"> Cost $$</button></a><br>
-        <a href="kWhHourly.html"><button class="button"> kWh hourly</button></a><br>
-</div>
-<div id="mySVG" style="float: right; padding-right: 60%">
-    <object data="kwh.svg" type="image/svg+xml" width="700%"></object>
+<aside style="float:left; padding-top: 20%; padding-left: 10%; width: 10%; margin-right: 5%;">
+    <a href="kW.html">
+        <button class="button" style="border: 2px solid #f57970;" id="btn-1"> kW<br></button>
+    </a><br>
+    <a href="kWh.html">
+        <button class="button" style="border: 2px solid #4ab3a9;" id="btn-2"> kWh<br></button>
+    </a><br>
+    <a href="kWhHourly.html">
+        <button class="button" style="border: 2px solid #7683c9;" id="btn-3"> kWh (hourly)</button>
+    </a><br>
+    <a href="dollars.html">
+        <button class="button" style="border: 2px solid #fdd14f;" id="btn-4"> Cost</button>
+    </a><br>
+</aside>
+<div id="mySVG" style="float: left; width: 75%;">
 </div>
+<object data="" type="image/svg+xml" width="100%" style="margin: 0 auto; text-align: center; max-height: 80vh;"
+        id="svg"></object>
 <script>
-        function sleep(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-        async function my_function() {
-            while(true) {
-                $("#mySVG").load("kWh.html #mySVG");
-                await sleep(60000);
-                console.log("sleep")
-            }
-        }
-        my_function();
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function load_svg() {
+        $("#mySVG").load("kWh.html #svg");
+        await sleep(1000)
+        let child = document.getElementById('mySVG').firstChild;
+        child.setAttribute('data', 'kwh.svg')
+
+        await sleep(1200);
+        console.log("sleep")
+    }
+
+    load_svg();
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/GaugeProjectApache/py/kWhHourly.html b/GaugeProjectApache/py/kWhHourly.html
old mode 100644
new mode 100755
index 299f12e..f8b4361
--- a/GaugeProjectApache/py/kWhHourly.html
+++ b/GaugeProjectApache/py/kWhHourly.html
@@ -3,51 +3,95 @@
 <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Electricity Statistics Dashboard</title>
     <style>
-    button.button {
-    background-color: transparent;
-    border: 2px solid black;
-    font-size: 12pt;
-    padding: 8px 16px;
-    color: black;
-    border-radius: 4px;
-    align: center;
-    }
-    button.button:hover {
-    background-color: black;
-    color: white;
-    cursor: pointer;
-    }
+        a {
+            text-decoration: none;
+        }
+
+        button.button {
+            transition: 1s all ease;
+            background-color: transparent;
+            font-size: 12pt;
+            padding: 8px 45px;
+            color: black;
+            border-radius: 8px;
+            margin: 4px auto;
+            display: block;
+        }
+
+        button.button:hover {
+            color: white;
+            cursor: pointer;
+        }
+
+        #btn-1:hover{
+            background-color: #f57970;
+        }
+
+        #btn-2:hover{
+            background-color: #4ab3a9;
+        }
+
+        #btn-3:hover{
+            background-color: #7683c9;
+        }
+
+        #btn-4:hover{
+            background-color: #fdd14f;
+        }
+
+        @media screen and (max-width: 1012px) {
+            aside {
+                width: 100% !important;
+            }
+
+            #mySVG {
+                width: 100% !important;
+            }
+        }
     </style>
 
 </head>
 
 
-
 <body style="background-color: #f9f9f9;">
 <h1 align="center" style="font-family: monospace">Electricity Statistics Dashboard</h1>
-<div style="float:left; padding-top: 20%; padding-left: 10%">
-       <a href="kW.html"><button class="button" style="padding: 8px 45px;"> kW<br></button></a><br>
-        <a href="kWh.html"><button class="button" style="padding: 8px 41px;"> kWh<br></button></a><br>
-        <a href="dollars.html"><button class="button" style="padding: 8px 28px;"> Cost $$</button></a><br>
-        <a href="kWhHourly.html"><button class="button"> kWh hourly</button></a><br>
-</div>
-<div id="mySVG" style="float: right; padding-right: 60%">
-    <object data="kWhHourly.svg" type="image/svg+xml" width="700%"></object>
+<aside style="float:left; padding-top: 20%; padding-left: 10%; width: 10%; margin-right: 5%;">
+    <a href="kW.html">
+        <button class="button" style="border: 2px solid #f57970;" id="btn-1"> kW<br></button>
+    </a><br>
+    <a href="kWh.html">
+        <button class="button" style="border: 2px solid #4ab3a9;" id="btn-2"> kWh<br></button>
+    </a><br>
+    <a href="kWhHourly.html">
+        <button class="button" style="border: 2px solid #7683c9;" id="btn-3"> kWh (hourly)</button>
+    </a><br>
+    <a href="dollars.html">
+        <button class="button" style="border: 2px solid #fdd14f;" id="btn-4"> Cost</button>
+    </a><br>
+</aside>
+<div id="mySVG" style="float: left; width: 75%;">
 </div>
+<object data="" type="image/svg+xml" width="100%" style="margin: 0 auto; text-align: center; max-height: 80vh;"
+        id="svg"></object>
 <script>
-        function sleep(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-        async function my_function() {
-            while(true) {
-                $("#mySVG").load("kWhHourly.html #mySVG");
-                await sleep(120000);
-                console.log("sleep")
-            }
-        }
-        my_function();
-    </script>
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function load_svg() {
+        $("#mySVG").load("kWhHourly.html #svg");
+        await sleep(1000)
+        let child = document.getElementById('mySVG').firstChild;
+        child.setAttribute('data', 'kWhHourly.svg')
+
+        await sleep(1200);
+        console.log("sleep")
+    }
+
+    load_svg();
+</script>
 </body>
 </html>
\ No newline at end of file
