diff --git a/playlist/static/img/pause-inactive.svg b/playlist/static/img/pause-inactive.svg
new file mode 100644
index 0000000..bb7f84c
--- /dev/null
+++ b/playlist/static/img/pause-inactive.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="pause.svg"
+   inkscape:export-xdpi="12.7"
+   inkscape:export-ydpi="12.7"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       id="rect2"
+       width="16"
+       height="48"
+       x="8"
+       y="8"
+       style="fill:#808080;stroke-width:0.304549" />
+    <rect
+       id="rect2-5"
+       width="16"
+       height="48"
+       x="40"
+       y="8"
+       style="fill:#808080;stroke-width:0.304549" />
+  </g>
+</svg>
diff --git a/playlist/static/img/pause.svg b/playlist/static/img/pause.svg
new file mode 100644
index 0000000..8ba271c
--- /dev/null
+++ b/playlist/static/img/pause.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="play.svg"
+   inkscape:export-xdpi="12.7"
+   inkscape:export-ydpi="12.7"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       id="rect2"
+       width="16"
+       height="48"
+       x="8"
+       y="8"
+       style="stroke-width:0.304549" />
+    <rect
+       id="rect2-5"
+       width="16"
+       height="48"
+       x="40"
+       y="8"
+       style="stroke-width:0.304549" />
+  </g>
+</svg>
diff --git a/playlist/static/img/play-inactive.svg b/playlist/static/img/play-inactive.svg
new file mode 100644
index 0000000..407aa11
--- /dev/null
+++ b/playlist/static/img/play-inactive.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="play.svg"
+   inkscape:export-xdpi="12.7"
+   inkscape:export-ydpi="12.7"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       id="path2"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="3.9214177"
+       sodipodi:cy="28.775017"
+       sodipodi:r1="30.64756"
+       sodipodi:r2="15.32378"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 34.568978,28.775017 -45.97134,26.541565 0,-53.0831308 z"
+       inkscape:transform-center-x="-8.0000004"
+       style="fill:#808080;stroke-width:0.264583"
+       transform="matrix(1.0441288,0,0,0.90424206,19.905535,5.9804195)" />
+  </g>
+</svg>
diff --git a/playlist/static/img/play.svg b/playlist/static/img/play.svg
new file mode 100644
index 0000000..f7a3809
--- /dev/null
+++ b/playlist/static/img/play.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       id="path2"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="3.9214177"
+       sodipodi:cy="28.775017"
+       sodipodi:r1="30.64756"
+       sodipodi:r2="15.32378"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 34.568978,28.775017 -45.97134,26.541565 0,-53.0831308 z"
+       inkscape:transform-center-x="-8.0000004"
+       style="stroke-width:0.264583"
+       transform="matrix(1.0441288,0,0,0.90424206,19.905535,5.9804195)" />
+  </g>
+</svg>
diff --git a/playlist/static/img/stop-inactive.svg b/playlist/static/img/stop-inactive.svg
new file mode 100644
index 0000000..83d3277
--- /dev/null
+++ b/playlist/static/img/stop-inactive.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="stop.svg"
+   inkscape:export-xdpi="12.7"
+   inkscape:export-ydpi="12.7"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       id="rect2"
+       width="48"
+       height="49.048836"
+       x="8"
+       y="8"
+       style="fill:#808080;stroke-width:0.533226" />
+  </g>
+</svg>
diff --git a/playlist/static/img/stop.svg b/playlist/static/img/stop.svg
new file mode 100644
index 0000000..7eead70
--- /dev/null
+++ b/playlist/static/img/stop.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="pause.svg"
+   inkscape:export-xdpi="12.7"
+   inkscape:export-ydpi="12.7"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       id="rect2"
+       width="48"
+       height="49.048836"
+       x="8"
+       y="8"
+       style="stroke-width:0.533226" />
+    <rect
+       id="rect2-5"
+       width="16"
+       height="48"
+       x="40"
+       y="8"
+       style="stroke-width:0.304549" />
+  </g>
+</svg>
diff --git a/playlist/static/style.css b/playlist/static/style.css
index 8cb8ff5..f537b85 100644
--- a/playlist/static/style.css
+++ b/playlist/static/style.css
@@ -185,9 +185,41 @@ iframe {
 	height: 22px;
 }
 
+
 #media-control button {
 	min-width: 0;
-	width: 20px;
+	width: 32px;
+	height: 32px;
+	background-size: 50%;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	box-shadow:none;
+}
+
+#media-control:not(.waiting) button:hover {
+	box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf
+}
+
+#media-control button#play {
+	background-image:url(img/play.svg);
+}
+
+#media-control button#pause {
+	background-image:url(img/pause.svg);
+}
+
+#media-control button#stop {
+	background-image:url(img/stop.svg);
+}
+
+#media-control.waiting button#play {
+	background-image:url(img/play-inactive.svg);
+}
+#media-control.waiting button#pause {
+	background-image:url(img/pause-inactive.svg);
+}
+#media-control.waiting button#stop {
+	background-image:url(img/stop-inactive.svg);
 }
 
 /* Clippy */
diff --git a/playlist/templates/Base.html b/playlist/templates/Base.html
index 4083629..dce31a4 100644
--- a/playlist/templates/Base.html
+++ b/playlist/templates/Base.html
@@ -43,17 +43,20 @@
     {% block clippy %}{% endblock %}
     <script>
       position.get_pos(); // Gets position from localStorage
-      interact('.main-title-bar').draggable({
-        listeners: {
-          move (event) {
-            position.x += event.dx
-            position.y += event.dy
-            event.target.parentElement.style.transform =
-              `translate(${position.x}px, ${position.y}px)`
-          },
-        }
+      window.addEventListener('load', function () {
+        interact('.main-title-bar').draggable({
+          listeners: {
+            move (event) {
+              position.x += event.dx
+              position.y += event.dy
+              event.target.parentElement.style.transform =
+                `translate(${position.x}px, ${position.y}px)`
+            },
+          }
+        })
       })
 
+
       function hideWindow() {
         document.getElementById("main-window").classList.add("hide");
       }
diff --git a/playlist/templates/MediaPlayer.html b/playlist/templates/MediaPlayer.html
index b84f109..42e1403 100644
--- a/playlist/templates/MediaPlayer.html
+++ b/playlist/templates/MediaPlayer.html
@@ -11,25 +11,71 @@
 <h2 title="{{track.artist}}">{{track.artist}}</h2>
 </div>
 <input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
-<div id="media-control">
-<button id="play">&gt;</button>
-<button id="pause">||</button>
-<button id="stop">[]</button>
+<div id="media-control" class="waiting">
+<button id="play"></button>
+<button id="pause"></button>
+<button id="stop"></button>
 </div>
+<script src="https://open.spotify.com/embed/iframe-api/v1"></script>
 <script>
-  window.onSpotifyIframeApiReady = (IFrameAPI) => {
+  window.onSpotifyIframeApiReady = doSpotify;
+  doSpotify();
+  function doSpotify (IFrameAPI) {
+    if (IFrameAPI) {
+      ifa = IFrameAPI;
+    } else if (!ifa) return;
     let element = document.getElementById('embed');
+    let playing = false;
+    let playingPosition = 0;
+    let duration = {{track.duration_ms}};
     let options = {
       uri: 'spotify:track:{{track.id}}'
     };
     const callback = (EmbedController) => {
         document.getElementById("play").addEventListener('click', () => {
-          EmbedController.play()
+          EmbedController.play();
+          playing = true;
+          if (playingPosition) {
+            setTimeout(() => {
+              EmbedController.seek(parseInt(playingPosition/1000));
+              playingPosition = 0
+            }, 100)
+          }
+        });
+        function pause() {
+          if (playing) {
+            EmbedController.togglePlay();
+            playing = false;
+          }
+        }
+        document.getElementById("pause").addEventListener('click', pause);
+        document.getElementById("stop").addEventListener('click', () => {
+          setTimeout(() => {
+            playingPosition = 0;
+            EmbedController.seek(0);
+            document.getElementById("seek").value = 0;
+          }, 500);
+          pause();
+        });
+        EmbedController.addListener('ready', e => {
+          document.getElementById('media-control').classList.remove('waiting')
+          document.getElementById("seek").addEventListener('change', (e) => {
+            let percentile = parseFloat(e.target.value)/100;
+            EmbedController.seek(duration/1000*percentile);
+          });
         });
         EmbedController.addListener('playback_update', e => {
-          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
+          duration = e.data.duration;
+          if (playingPosition == 0) document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
+          if (e.data.isPaused) {
+            playingPosition = e.data.position;
+          }
+          else if (playingPosition != 0 && e.data.position != 0) {
+            EmbedController.seek(parseInt(playingPosition/1000));
+            playingPosition = 0;
+          }
         })
       };
-      IFrameAPI.createController(element, options, callback);
+      ifa.createController(element, options, callback);
   };
 </script>
\ No newline at end of file
diff --git a/playlist/templates/head.html b/playlist/templates/head.html
index ff2776e..13c378d 100644
--- a/playlist/templates/head.html
+++ b/playlist/templates/head.html
@@ -12,7 +12,6 @@
 <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
 <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">
 <link rel="manifest" href="/site.webmanifest">
-<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
 <title>HD Muzak: {{ request.path }}</title>
 <script>
 	//Global position object for cross-page window positioning
@@ -45,4 +44,7 @@
 			localStorage.removeItem("position")
 		}
 	}
+
+	//global spotify IFrameAPI cache
+	ifa = null;
 </script>