diff --git a/src/lib/player.svelte.ts b/src/lib/player.svelte.ts
new file mode 100644
index 0000000..16e0ce6
--- /dev/null
+++ b/src/lib/player.svelte.ts
@@ -0,0 +1,33 @@
+export enum PlaybackMode {
+    Linear,
+    LoopOne,
+    LoopQueue,
+}
+
+export class PlaybackStateSvelte {
+    values = {
+        [PlaybackMode.Linear]: "1",
+        [PlaybackMode.LoopOne]: "0",
+        [PlaybackMode.LoopQueue]: "00",
+    }
+
+    current: PlaybackMode = $state(PlaybackMode.Linear);
+
+    next = function() {
+        if (this.current == PlaybackMode.LoopQueue) {
+            this.current = -1;
+        }
+        return this.values[++this.current];
+    }
+
+    prev = function() {
+        if (this.current == PlaybackMode.Linear) {
+            this.current = this.values.length;
+        }
+        return this.values[--this.current];
+    }
+
+    get = function() {
+        return this.values[this.current];
+    }
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7ecf43d..0b96017 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,50 +4,18 @@
     import {OpenSubsonic} from "$lib/opensubsonic";
     import {onMount} from "svelte";
     import QueueFrame from "$lib/components/custom/QueueFrame.svelte";
-    //import PlayerFrame from "$lib/components/custom/PlayerFrame.svelte";
+    //import PlayerFrame from "$lib/components/custom/PlayerControls.svelte";
     import {Button} from "$lib/components/ui/button";
+    import {PlaybackMode, PlaybackStateSvelte} from "$lib/player.svelte.js";
+    import PlayerSidebar from "$lib/components/custom/PlayerSidebar.svelte";
 
     function toFixedNumber(num, digits, base){
         const pow = Math.pow(base ?? 10, digits);
         return Math.round(num*pow) / pow;
     }
 
-    enum PlaybackMode {
-        Linear,
-        LoopOne,
-        LoopQueue,
-    }
-
-    class PlaybackState {
-        values = {
-            [PlaybackMode.Linear]: "1",
-            [PlaybackMode.LoopOne]: "0",
-            [PlaybackMode.LoopQueue]: "00",
-        }
-
-        current: PlaybackMode = $state(PlaybackMode.Linear);
-
-        next = function() {
-            if (this.current == PlaybackMode.LoopQueue) {
-                this.current = -1;
-            }
-            return this.values[++this.current];
-        }
-
-        prev = function() {
-            if (this.current == PlaybackMode.Linear) {
-                this.current = this.values.length;
-            }
-            return this.values[--this.current];
-        }
-
-        get = function() {
-            return this.values[this.current];
-        }
-    }
-
     let source: HTMLAudioElement = $state();
-    let mode = $state(new PlaybackState());
+    let mode = $state(new PlaybackStateSvelte());
     let title = $state("");
     let artist = $state("");
     let queueIndex = $state(0);
@@ -201,7 +169,7 @@
     }
 
     function displayTime(rawSeconds: number) {
-        const intSeconds = rawSeconds.toFixed(0);
+        const intSeconds = Math.round(rawSeconds);
         const seconds = intSeconds % 60;
         const minutes = Math.floor((intSeconds / 60)) % 60;
         const hours = Math.floor((intSeconds / 3600));
@@ -218,7 +186,7 @@
         fetchQueue().then(() => {
             fetchNowPlaying();
         });
-        currentSong.source = new Audio();
+        currentSong.source = new Audio(); // needed so source is not undefined
     })
 </script>
 
@@ -228,9 +196,7 @@
 </svelte:head>
 
 <div class="border border-2 flex-1 grid grid-cols-5">
-    <div class="border border-2 col-span-1">
-        <h1>Left Sidebar</h1>
-    </div>
+    <!--<PlayerSidebar bind:selectedPlayerView />-->
     <div class="border border-2 col-span-3">
         <h1>Center</h1>
     </div>