diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index a11777c..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..21f52fb
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/index.html b/public/index.html
index aa069f2..6250e03 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,14 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="MooreForge weather station of sensors"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,11 +23,16 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>MooreForge Weather Station</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script>
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register("./serviceworker.js");
+      }
+    </script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/public/logo192.png b/public/logo192.png
index fc44b0a..cda0ed3 100644
Binary files a/public/logo192.png and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
index a4e47a6..e485926 100644
Binary files a/public/logo512.png and b/public/logo512.png differ
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..7f6a9f2 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,11 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Weather Station",
+  "name": "MooreForge Weather Station",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "favicon.png",
+      "sizes": "32x32",
+      "type": "image/png"
     },
     {
       "src": "logo192.png",
diff --git a/public/serviceworker.js b/public/serviceworker.js
new file mode 100644
index 0000000..d50ec90
--- /dev/null
+++ b/public/serviceworker.js
@@ -0,0 +1,6 @@
+// This code executes in its own worker or thread
+self.addEventListener("install", event => {
+});
+self.addEventListener("activate", event => {
+});
+self.addEventListener('fetch',() => console.log("fetch"));
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index aac9f61..722afc6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,11 +5,27 @@
 .rainfall-gauge {
   border: .01em solid black;
   padding: .6em;
+  height: 3vh;
 }
 
-@media (max-width: 400px) {
+@media (max-width: 400px)  {
   .sensors {
-    display: block;
+    display: display !important;
+  }
+
+  .rainfall-gauge {
+    color: blue;
+    height: 5vh;
+  }
+}
+
+@media (max-width: 501px) and (display-mode: standalone) {
+  .sensors {
+    display: block !important;
+  }
+
+  .rainfall-gauge {
+    height: 5vh;
   }
 }
 
@@ -21,9 +37,18 @@
   padding: .5em;
 }
 
+.merrysky {
+  width: 100%;
+  height: 80vh;
+  border: 0;
+  flex: 10 !important;
+}
+
 .sensors {
   display: flex;
+  flex-direction: column-reverse;
   flex-wrap: wrap;
+  flex-direction: row;
   justify-content: space-between;
   align-content: space-between;
 }
@@ -31,3 +56,7 @@
 .sensor-col {
   flex: 1;
 }
+
+.sensors >* {
+  flex: 1 1 160px;
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 0507e5f..9cde89a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import Rainfall from './components/rainfall';
 
@@ -10,6 +9,7 @@ function App() {
       <p>Welcome to the MooreForge Weather Station. While a work in progress, there are some functional sensors shown below.</p>
       <div className={'sensors'}>
         <div className={'rainfall-gauge sensor-col'}><Rainfall /></div>
+        <iframe src={'https://merrysky.net/'} className={'sensor-col merrysky'} title={'Merry Sky'}></iframe>
       </div>
     </div>
   );
diff --git a/src/components/rainfall/index.tsx b/src/components/rainfall/index.tsx
index 05c7b07..8ac1a7c 100644
--- a/src/components/rainfall/index.tsx
+++ b/src/components/rainfall/index.tsx
@@ -7,9 +7,9 @@ const INCHES_PER_CLICK = .01;
 
 const Sensor = () => {
   const [totalRainfall, setTotalRainfall] = useState(0);
-
+  console.log(process.env);
   async function pullDataFromBackend() {
-    const response = await fetch('http://localhost:4050/rainfall');
+    const response = await fetch(process.env.REACT_APP_RAIN_GAUGE_DATA ?? '');
     const data = await response.json();
     const rainfall = data
       .map((datum: any) => datum.value)
