diff --git a/index.html b/index.html
index fe961f9..cbabd4a 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <script>
     window.jQuery = window.$ = require('jquery');
     const loudness = require('loudness')
+    const axios = require('axios')
 </script>
     <script>
     // Needs window render
@@ -33,6 +34,7 @@
   <script src="./YoutubeJS/video.js"></script>
   <link href="./YoutubeJS/video-js.css" rel="stylesheet">
   <script src="./YoutubeJS/Youtube.js"></script>
+  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <title>SnailFM</title>
@@ -99,10 +101,14 @@
       display: none;
     }
 
-    .hiddentext {
+    .video-stream html5-main-video  {
       display: none;
     }
 
+    .hiddentext {
+      text-indent: -9999px; 
+    }
+
     .settings {
   position: absolute;
   top: 30px;
@@ -160,6 +166,10 @@
   .sidenav a {font-size: 18px;}
 }
 
+.nowplay  {
+  font-size: 25px;
+}
+
 #cookie{
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
@@ -259,11 +269,13 @@ <h3>Powered by <b>SnailDOS</b></h3>
       ipcRenderer.send('restart_app');
     }
   </script>
-
+<p>
+  <h1 class="hiddentext">h</h1>
+</p>
   <video
     id="vid1"
     class="video-js vjs-default-skin center"
-    width="700" height="300"
+    width="0" height="0"
     controls
     poster="play.png"
     data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=KRr1ZPF-mp4"}] }'
@@ -277,6 +289,20 @@ <h3>Powered by <b>SnailDOS</b></h3>
 });
   </script>
   
+  <body>
+    <p id='nowPlaying' class="nowplay">Nothing</p>
+<script>
+   setInterval(()=>{
+    axios.get('http://api.snaildos.tk/now/playing').then((value) => {
+      document.getElementById('nowPlaying').innerText = value.data.playing || 'Nothing'
+    })
+  },1000);
+</script>
+<p>
+  <h2 class="hiddentext">h</h2>
+</p>
+<button onclick="window.location.reload();" class="w3-btn w3-black">Reload</button>
+
 <div id="mySidenav" class="sidenav">
   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
   <a href="myaccount.html">My Account</a>
diff --git a/package-lock.json b/package-lock.json
index abe5ce3..5e473ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -250,6 +250,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1156,6 +1164,11 @@
         }
       }
     },
+    "follow-redirects": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
+      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
diff --git a/package.json b/package.json
index 38da0bb..a24fef0 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "discord-rpc": "^3.1.4",
     "isdev": "^1.0.1",
+    "axios": "^0.21.1",
     "jquery": "^3.6.0",
     "electron-updater": "^4.0.6",
     "loudness": "^0.4.0"
