diff --git a/src/pflPlayer/index.tsx b/src/pflPlayer/index.tsx
new file mode 100644
index 0000000..791e02d
--- /dev/null
+++ b/src/pflPlayer/index.tsx
@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+
+export function PflPlayer() {
+  return (
+    <div id="pfl-player">
+      <div
+        className={"m-0 graph" + (playerState.loading !== -1 ? " loading" : "")}
+        id={"waveform-pfl"}
+        style={
+          playerState.loading !== -1
+            ? {
+                width: playerState.loading * 100 + "%",
+              }
+            : {}
+        }
+      ></div>
+    </div>
+  );
+}
diff --git a/src/showplanner/sidebar.tsx b/src/showplanner/sidebar.tsx
index 158d097..8731fe0 100644
--- a/src/showplanner/sidebar.tsx
+++ b/src/showplanner/sidebar.tsx
@@ -8,12 +8,15 @@ import { LibraryColumn } from "./libraries";
 
 import * as OptionsMenuState from "../optionsMenu/state";
 import * as MixerState from "../mixer/state";
+import { PflPlayer } from "../pflPlayer";
 
 export function Sidebar() {
   return (
     <div id="sidebar">
       <LibraryColumn />
       <div className="border-top"></div>
+      <PflPlayer />
+      <div className="border-top"></div>
       <MicControl />
     </div>
   );