diff --git a/src/assets/base.css b/src/assets/base.css
index b322135..c76076b 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -322,7 +322,7 @@ img {
   padding: 0.5rem;
   border-radius: 0.125rem;
   z-index: 999;
-  bottom: 1.25rem;
+  bottom: 1.5rem;
   box-shadow: 0 0 0.5rem var(--color-border);
 }
 
diff --git a/src/components/Lyrics.vue b/src/components/Lyrics.vue
index 001324a..3968a66 100644
--- a/src/components/Lyrics.vue
+++ b/src/components/Lyrics.vue
@@ -64,6 +64,6 @@ watch(
 
 <style scoped>
 .placeholder:empty::before {
-  --ico: '\f3a5';
+  --ico: '\f262';
 }
 </style>
diff --git a/src/components/Playlists.vue b/src/components/Playlists.vue
index 28b20ab..45dfbe4 100644
--- a/src/components/Playlists.vue
+++ b/src/components/Playlists.vue
@@ -43,7 +43,7 @@ defineEmits(['playthis']);
   position: fixed;
   top: 2rem;
   bottom: calc(5rem + 5vh);
-  right: 1rem;
+  left: 1rem;
   width: 30rem;
   max-width: calc(100% - 2rem);
   background: var(--color-background-mute);
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index 0535bc8..4db1660 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -32,6 +32,17 @@ const emit = defineEmits(['save']),
   liked = ref(undefined),
   liking = ref(false);
 
+function getFormattedTime(sec) {
+  let seconds = parseInt(sec);
+  let minutes = parseInt(seconds / 60);
+  seconds -= minutes * 60;
+  const hours = parseInt(minutes / 60);
+  minutes -= hours * 60;
+
+  if (hours === 0) return `${minutes}:${String(seconds % 60).padStart(2, '0')}`;
+  else return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+}
+
 function List() {
   showme.pl = true;
   useListPlaylists(res => {
@@ -126,6 +137,7 @@ async function Like() {
           <button aria-label="Cancel" @click="showme.pl = false">
             {{ t('action.cancel') }}
           </button>
+
           <button
             aria-label="Add Song"
             @click="
@@ -140,14 +152,8 @@ async function Like() {
   </Teleport>
 
   <div id="statusbar" class="flex">
-    <div class="flex statusbar-left">
-      <button
-        id="btn-play-pause"
-        aria-label="Play or Pause"
-        class="bi clickable"
-        :class="'bi-' + player.state.status"
-        @click="player.toggle('play')"></button>
-
+    <div class="flex statusbar-progress-container">
+      <span>{{ getFormattedTime(player.state.realTime) }}</span>
       <div id="statusbar-progress" class="range-wrap">
         <input
           aria-label="Change Time"
@@ -160,224 +166,160 @@ async function Like() {
               ($event.target.value / 100) * player.state.duration
           " />
       </div>
+      <span>{{ getFormattedTime(player.state.duration) }}</span>
     </div>
 
-    <div class="flex statusbar-right">
-      <button
-        id="vol-btn"
-        aria-label="Volume Buttons"
-        @click="showme.vol = !showme.vol"
-        class="popup-wrap bi bi-volume-up clickable">
+    <div class="flex statusbar-controls-container">
+      <div class="statusbar-control-item left">
+        <button
+          id="list-btn"
+          title="Current Playlist"
+          aria-label="Current Playlist"
+          class="bi bi-music-note-list clickable"
+          :data-active="player.state.playlist"
+          @click="player.toggle('playlist')"></button>
+
+        <button
+          id="loop-btn"
+          title="Loop"
+          aria-label="Loop"
+          class="bi clickable"
+          :class="player.state.loop < 2 ? 'bi-repeat' : 'bi-repeat-1'"
+          :data-active="player.state.loop > 0"
+          @click="
+            player.state.loop < 2
+              ? player.state.loop++
+              : (player.state.loop = 0)
+          "></button>
+      </div>
+      <div class="statusbar-control-item center">
+        <button
+          :style="{
+            visibility: (data.state.urls[data.state.urls.map(s => s.url).indexOf(data.state.url) - 1] ||
+              (player.state.loop == 1 && data.state.urls.length > 1)
+            )
+            ? 'visible'
+            : 'hidden'
+          }"
+          id="btn-previoustrack"
+          aria-label="Play previous track"
+          class="bi bi-chevron-bar-left clickable"
+          @click="data.prevTrack"></button>
+
+        <button
+          id="btn-play-pause"
+          aria-label="Play or Pause"
+          class="bi clickable"
+          :class="'bi-' + player.state.status"
+          @click="player.toggle('play')"></button>
+
+        <button
+          :style="{
+            visibility: (data.state.urls[data.state.urls.map(s => s.url).indexOf(data.state.url) + 1] ||
+              (player.state.loop == 1 && data.state.urls.length > 1)
+            )
+            ? 'visible'
+            : 'hidden'
+          }"
+          id="btn-nexttrack"
+          aria-label="Play next track"
+          class="bi bi-chevron-bar-right clickable"
+          @click="data.nextTrack"></button>
+      </div>
+      <div class="statusbar-control-item right">
+        <button
+          id="vol-btn"
+          aria-label="Volume Buttons"
+          @click="showme.vol = !showme.vol"
+          class="popup-wrap bi bi-volume-up clickable">
+          <Transition name="fade">
+            <div v-if="showme.vol" id="vol" class="popup">
+              <input
+                id="vol-input"
+                aria-label="Volume Input"
+                type="range"
+                :value="player.state.vol"
+                max="1"
+                step=".01"
+                @input="player.state.vol = $event.target.value" />
+            </div>
+          </Transition>
+        </button>
+
+        <button
+          class="bi bi-three-dots clickable"
+          aria-label="More Controls"
+          @click="
+            showme.menu = !showme.menu;
+            player.state.lyrics ? player.toggle('lyrics') : '';
+            player.state.info ? player.toggle('info') : '';
+          "></button>
         <Transition name="fade">
-          <div v-if="showme.vol" id="vol" class="popup">
-            <input
-              id="vol-input"
-              aria-label="Volume Input"
-              type="range"
-              :value="player.state.vol"
-              max="1"
-              step=".01"
-              @input="player.state.vol = $event.target.value" />
+          <div id="menu" v-if="showme.menu" class="popup">
+            <button
+              id="info-btn"
+              class="bi bi-info-circle clickable"
+              aria-label="Show Information About Song"
+              :data-active="player.state.info"
+              @click="player.toggle('info')"></button>
+
+            <button
+              v-if="store.auth"
+              id="like-btn"
+              title="Add song to favorites"
+              class="bi blink clickable"
+              :class="data.state.url == liked ? 'bi-heart-fill' : 'bi-heart'"
+              :data-active="data.state.url == liked"
+              :data-loading="liking"
+              @click="Like"></button>
+
+            <button
+              id="addToPlaylist"
+              title="Add Current Song to a Playlist"
+              aria-label="Add Current Song to a Playlist"
+              class="bi bi-collection clickable"
+              @click="List"></button>
+
+            <button
+              id="btn-lyrics"
+              title="Lyrics"
+              aria-label="Lyrics"
+              class="bi bi-chat-square-quote clickable"
+              :data-active="player.state.lyrics"
+              @click="player.toggle('lyrics')"></button>
           </div>
         </Transition>
-      </button>
-      <button
-        class="bi bi-three-dots clickable"
-        aria-label="More Controls"
-        @click="
-          showme.menu = !showme.menu;
-          player.state.playlist ? player.toggle('playlist') : '';
-          player.state.lyrics ? player.toggle('lyrics') : '';
-          player.state.info ? player.toggle('info') : '';
-        "></button>
-      <Transition name="fade">
-        <div id="menu" v-if="showme.menu" class="popup">
-          <button
-            id="info-btn"
-            class="bi bi-info-circle clickable"
-            aria-label="Show Information About Song"
-            :data-active="player.state.info"
-            @click="player.toggle('info')"></button>
-
-          <button
-            v-if="store.auth"
-            id="like-btn"
-            title="Add song to favorites"
-            class="bi blink clickable"
-            :class="data.state.url == liked ? 'bi-heart-fill' : 'bi-heart'"
-            :data-active="data.state.url == liked"
-            :data-loading="liking"
-            @click="Like"></button>
-
-          <button
-            id="addToPlaylist"
-            title="Add Current Song to a Playlist"
-            aria-label="Add Current Song to a Playlist"
-            class="bi bi-collection clickable"
-            @click="List"></button>
-
-          <button
-            id="list-btn"
-            title="Current Playlist"
-            aria-label="Current Playlist"
-            class="bi bi-music-note-list clickable"
-            :data-active="player.state.playlist"
-            @click="player.toggle('playlist')"></button>
-
-          <button
-            id="btn-lyrics"
-            title="Lyrics"
-            aria-label="Lyrics"
-            class="bi bi-chat-square-quote clickable"
-            :data-active="player.state.lyrics"
-            @click="player.toggle('lyrics')"></button>
-
-          <button
-            id="loop-btn"
-            title="Loop"
-            aria-label="Loop"
-            class="bi clickable"
-            :class="player.state.loop < 2 ? 'bi-repeat' : 'bi-repeat-1'"
-            :data-active="player.state.loop > 0"
-            @click="
-              player.state.loop < 2
-                ? player.state.loop++
-                : (player.state.loop = 0)
-            "></button>
-        </div>
-      </Transition>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
 #statusbar {
+  flex-direction: column;
+  row-gap: 0.5rem;
   position: fixed;
   left: 0;
   bottom: 0;
   right: 0;
-  padding: 0.5rem 0;
+  padding: 1.5rem 0;
   border-top: 0.25rem solid var(--color-foreground);
   background: var(--color-background);
   min-height: 15vh;
   z-index: 2;
 }
-.statusbar-right {
-  margin-left: 0.5rem;
-}
-.bi-play,
-.bi-pause {
-  font-size: 2.5rem !important;
-}
-.bi-circle {
-  font-size: 2rem;
-  animation: blink infinite ease 1s;
-}
-.bi-volume-up,
-.bi-repeat,
-.bi-repeat-1 {
-  font-size: 1.5rem !important;
-}
-.ml-auto {
-  margin-left: auto;
-}
-.item {
-  background: var(--color-background);
-  border-radius: 0.5rem;
-  margin: 0.5rem 0;
-}
-.item:hover {
-  background: var(--color-background-mute);
+
+.statusbar-progress-container,
+.statusbar-controls-container {
+  width: 80vw;
+  min-width: 200px;
+  max-width: 600px;
 }
 
-.item[data-active='true'] {
-  color: var(--color-background);
-  background: linear-gradient(135deg, cornflowerblue, #88c0d0);
+/* Progress */
+.statusbar-progress-container {
+  column-gap: 0.5rem;
 }
-#menu {
-  bottom: 1.5rem;
-  left: -1.75rem;
-  box-shadow: 0.5rem 0.5rem 2rem var(--color-shadow);
-}
-#vol {
-  --h: 6.5rem;
-  --w: 1rem;
-  display: flex;
-  box-shadow: -0.5rem -0.5rem 2rem var(--color-shadow);
-  transform: rotateZ(270deg) translateX(calc(calc(var(--h) / 2) - 0.5rem))
-    translateY(calc(calc(var(--w) + 2rem) * -1));
-}
-input[type='range'] {
-  width: var(--h);
-  height: var(--w);
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border: none;
-  border-radius: 5rem;
-  background: transparent;
-  color: transparent;
-  cursor: pointer;
-  position: relative;
-}
-input[type='range']:hover,
-input[type='range']:focus {
-  outline-style: none;
-}
-input[type='range']:focus-visible {
-  outline-style: solid;
-}
-
-/* Webkit */
-input[type='range']::-webkit-slider-thumb {
-  background-color: var(--color-foreground);
-  -webkit-appearance: none;
-  appearance: none;
-  opacity: 0;
-  transition: opacity 0.4s ease;
-}
-input[type='range']:hover::-webkit-slider-thumb,
-#vol input[type='range']::-webkit-slider-thumb {
-  opacity: 1;
-  height: 1rem;
-  width: 1rem;
-  border-radius: 50%;
-  margin-top: -0.4rem;
-}
-input[type='range']::-webkit-slider-runnable-track {
-  height: 100%;
-  background-color: var(--color-border);
-}
-#vol input[type='range']::-webkit-slider-runnable-track {
-  height: 0.1rem;
-}
-
-/* Moz */
-input[type='range']::-moz-range-thumb {
-  -moz-appearance: none;
-  appearance: none;
-  opacity: 0;
-  border: none;
-  outline: none;
-  transition: opacity 0.4s ease;
-}
-input[type='range']:hover::-moz-range-thumb,
-#vol input[type='range']::-moz-range-thumb {
-  background-color: var(--color-foreground);
-  opacity: 1;
-  height: 1rem;
-  width: 1rem;
-  border-radius: 50%;
-  margin-top: -0.45rem;
-}
-input[type='range']::-moz-range-track {
-  height: 100%;
-  background-color: var(--color-border);
-}
-#vol input[type='range']::-moz-range-track {
-  height: 0.1rem;
-}
-
 .range-wrap {
   --fw: 0%;
   display: flex;
@@ -405,18 +347,152 @@ input[type='range']::-moz-range-track {
 }
 #statusbar-progress {
   --fw: v-bind('player.state.time + "%"');
-  width: 50vw;
-  min-width: 200px;
-  max-width: 500px;
+  width: 100%;
+}
+
+/* Controls */
+.statusbar-controls-container {
+  display: grid;
+  grid-template-columns: 30% 40% 30%;
+}
+.statusbar-control-item {
+  display: flex;
+}
+.statusbar-control-item.left {
+  justify-content: flex-start;
+}
+.statusbar-control-item.center {
+  justify-content: center;
+}
+.statusbar-control-item.right {
+  justify-content: flex-end;
+}
+.bi-play,
+.bi-pause,
+.bi-circle {
+  font-size: 2.5rem !important;
+}
+.bi-circle {
+  animation: blink infinite ease 1s;
+}
+.bi-volume-up,
+.bi-repeat,
+.bi-repeat-1 {
+  font-size: 1.5rem !important;
+}
+#vol {
+  --h: 6.5rem;
+  --w: 1rem;
+  display: flex;
+  box-shadow: -0.5rem -0.5rem 2rem var(--color-shadow);
+  transform: rotateZ(270deg) translateX(calc(calc(var(--h) / 2) - 0.5rem))
+    translateY(calc(calc(var(--w) + 2rem) * -1));
+}
+#menu {
+  left: 50%;
+  box-shadow: 0.5rem 0.5rem 2rem var(--color-shadow);
+}
+
+/* Range */
+input[type='range'] {
+  width: var(--h);
+  height: var(--w);
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  border-radius: 5rem;
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
+  position: relative;
+}
+input[type='range']:hover,
+input[type='range']:focus {
+  outline-style: none;
+}
+input[type='range']:focus-visible {
+  outline-style: solid;
+}
+
+/* Range Webkit */
+input[type='range']::-webkit-slider-thumb {
+  background-color: var(--color-foreground);
+  -webkit-appearance: none;
+  appearance: none;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+input[type='range']:hover::-webkit-slider-thumb,
+#vol input[type='range']::-webkit-slider-thumb {
+  opacity: 1;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 50%;
+  margin-top: -0.4rem;
+}
+input[type='range']::-webkit-slider-runnable-track {
+  height: 100%;
+  background-color: var(--color-border);
+}
+#vol input[type='range']::-webkit-slider-runnable-track {
+  height: 0.1rem;
+}
+
+/* Range Moz */
+input[type='range']::-moz-range-thumb {
+  -moz-appearance: none;
+  appearance: none;
+  opacity: 0;
+  border: none;
+  outline: none;
+  transition: opacity 0.4s ease;
+}
+input[type='range']:hover::-moz-range-thumb,
+#vol input[type='range']::-moz-range-thumb {
+  background-color: var(--color-foreground);
+  opacity: 1;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 50%;
+  margin-top: -0.45rem;
+}
+input[type='range']::-moz-range-track {
+  height: 100%;
+  background-color: var(--color-border);
+}
+#vol input[type='range']::-moz-range-track {
+  height: 0.1rem;
+}
+
+/* Playlist addition */
+.ml-auto {
+  margin-left: auto;
+}
+.item {
+  background: var(--color-background);
+  border-radius: 0.5rem;
+  margin: 0.5rem 0;
+  transition: background-color 0.1s ease;
+}
+.item:hover {
+  background: var(--color-background-mute);
+}
+.item:active {
+  background: var(--color-border);
+}
+.item[data-active='true'] {
+  color: var(--color-background);
+  background: linear-gradient(135deg, cornflowerblue, #88c0d0);
 }
 
 @media (max-width: 500px) {
+  .statusbar-progress-container {
+    min-width: initial;
+  }
   #menu {
     left: initial;
     right: -0.5rem;
   }
-  #statusbar-progress {
-    min-width: initial;
-  }
 }
 </style>
diff --git a/src/stores/player.js b/src/stores/player.js
index 8a6d90f..f0eba1c 100644
--- a/src/stores/player.js
+++ b/src/stores/player.js
@@ -116,7 +116,33 @@ export const useData = defineStore('data', () => {
     } else state.urls = [];
   }
 
-  return { state, getSong, playNext };
+  function prevTrack() {
+    const now = state.urls.filter(s => s.url === state.url)[0],
+      i = state.urls.indexOf(now);
+
+    if (state.urls[i - 1]) getSong(state.urls[i - 1].url);
+    else if (player.state.loop == 1) {
+      console.log(state.url, state.urls[state.urls.length - 1]);
+
+      state.url = state.urls[state.urls.length - 1].url;
+      getSong(state.urls[state.urls.length - 1].url);
+    } else state.urls = [];
+  }
+
+  function nextTrack() {
+    const now = state.urls.filter(s => s.url === state.url)[0],
+      i = state.urls.indexOf(now);
+
+    if (state.urls[i + 1]) getSong(state.urls[i + 1].url);
+    else if (player.state.loop == 1) {
+      console.log(state.url, state.urls[0]);
+
+      state.url = state.urls[0].url;
+      getSong(state.urls[0].url);
+    } else state.urls = [];
+  }
+
+  return { state, getSong, playNext, prevTrack, nextTrack };
 });
 
 export const usePlayer = defineStore('player', () => {
@@ -128,6 +154,7 @@ export const usePlayer = defineStore('player', () => {
     streams: [],
     duration: 0,
     time: 0,
+    realTime: 0,
     currentTime: 0,
     playlist: false,
     lyrics: false,
@@ -145,6 +172,7 @@ export const usePlayer = defineStore('player', () => {
 
   function setTime(t) {
     state.time = Math.floor((t / state.duration) * 100);
+    state.realTime = Math.floor(t);
   }
 
   return { state, toggle, setTime };