diff --git a/src/ui/package-lock.json b/src/ui/package-lock.json
index 697300cb..897f8691 100644
--- a/src/ui/package-lock.json
+++ b/src/ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reaudioplayer.one",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reaudioplayer.one",
-      "version": "1.1.1",
+      "version": "1.1.2",
       "dependencies": {
         "@domchristie/needles": "^0.0.2-1",
         "chart.js": "^4.4.1",
diff --git a/src/ui/package.json b/src/ui/package.json
index 2c0113a0..b79883bd 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reaudioplayer.one",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/ui/src/views/BigPlayer/index.vue b/src/ui/src/views/BigPlayer/index.vue
index 287685b6..73415d00 100644
--- a/src/ui/src/views/BigPlayer/index.vue
+++ b/src/ui/src/views/BigPlayer/index.vue
@@ -60,64 +60,29 @@ const animate = ref(false); // animations
         <BiggerPlayer ref="biggerPlayer" />
         <template v-if="player.loaded">
             <div class="upNow">
-                <Cover
-                    :class="{ playing, animate }"
-                    :src="cover"
-                    class="drop-shadow-2xl"
-                    type="track"
-                    with-ambient
-                    :name="player.song.title"
-                />
+                <Cover :class="{ playing, animate }" :src="cover" class="drop-shadow-2xl" type="track" with-ambient
+                    :name="player.song.title" />
                 <div :class="{ playing, animate }" class="blocks">
-                    <div
-                        :style="{ 'animation-delay': '0s' }"
-                        class="block"
-                    ></div>
-                    <div
-                        :style="{ 'animation-delay': '.25s' }"
-                        class="block"
-                    ></div>
-                    <div
-                        :style="{ 'animation-delay': '.5s' }"
-                        class="block"
-                    ></div>
+                    <div :style="{ 'animation-delay': '0s' }" class="block"></div>
+                    <div :style="{ 'animation-delay': '.25s' }" class="block"></div>
+                    <div :style="{ 'animation-delay': '.5s' }" class="block"></div>
                 </div>
             </div>
 
-            <Card
-                v-if="player.queue && player.playlist"
-                class="playlist-overflow drop-shadow-2xl relative"
-                :key="player.playlist.id"
-            >
-                <Playlist
-                    ref="playlistScroll"
-                    :playlist="{ ...player.playlist, queue: player.queue }"
-                    use-queue
-                    draggable
-                    @rearrange="player.rearrangeQueue"
-                />
+            <Card v-if="player.queue && player.playlist && !noPlaylist"
+                class="playlist-overflow drop-shadow-2xl relative" :key="player.playlist.id">
+                <Playlist ref="playlistScroll" :playlist="{ ...player.playlist, queue: player.queue }" use-queue
+                    draggable @rearrange="player.rearrangeQueue" />
             </Card>
             <div class="settings">
-                <span
+                <span class="iconButton material-symbols-rounded" @click="toggleMaximise">{{ maximised ?
+                    "fullscreen_exit" : "fullscreen" }}</span>
+                <span :style="{ transform: `rotate(${noPlaylist ? 0 : 180}deg)` }"
                     class="iconButton material-symbols-rounded"
-                    @click="toggleMaximise"
-                    >{{ maximised ? "fullscreen_exit" : "fullscreen" }}</span
-                >
-                <span
-                    :style="{ transform: `rotate(${noPlaylist ? 0 : 180}deg)` }"
-                    class="iconButton material-symbols-rounded"
-                    @click="() => (noPlaylist = !noPlaylist)"
-                    >menu_open</span
-                >
-                <span
-                    class="iconButton material-symbols-rounded"
-                    @click="() => (animate = !animate)"
-                    >{{ !animate ? "animation" : "motion_photos_off" }}</span
-                >
-                <span
-                    class="iconButton material-symbols-rounded"
-                    @click="$router.push('/player/insights')"
-                >
+                    @click="() => (noPlaylist = !noPlaylist)">menu_open</span>
+                <span class="iconButton material-symbols-rounded" @click="() => (animate = !animate)">{{ !animate ?
+                    "animation" : "motion_photos_off" }}</span>
+                <span class="iconButton material-symbols-rounded" @click="$router.push('/player/insights')">
                     insights
                 </span>
             </div>
@@ -127,10 +92,7 @@ const animate = ref(false); // animations
                 <div class="wrapper">
                     <h2>Nothing playing yet...</h2>
                     <div class="playlists">
-                        <playlist-item
-                            v-for="playlist in playlists"
-                            :playlist="playlist"
-                        />
+                        <playlist-item v-for="playlist in playlists" :playlist="playlist" />
                     </div>
                 </div>
             </div>
@@ -142,7 +104,7 @@ const animate = ref(false); // animations
 .bigPlayer .upNow img {
     width: 80%;
     height: auto;
-    max-width: 600px;
+    max-width: min(600px, calc(100vh - 300px));
     border-radius: 20px;
     transition: transform 0.5s;
     animation: pump 20s infinite ease-in-out;
@@ -166,26 +128,32 @@ div.body:has(.bigPlayer) {
         transform: scale(1);
         opacity: 0;
     }
+
     6% {
         transform: scale(1);
         opacity: 0;
     }
+
     7% {
         transform: scale(1);
         opacity: 1;
     }
+
     85% {
         transform: scale(1);
         opacity: 1;
     }
+
     95% {
         transform: scale(5);
         opacity: 0;
     }
+
     97% {
         transform: scale(0);
         opacity: 0;
     }
+
     100% {
         transform: scale(1);
         opacity: 0;
@@ -207,7 +175,7 @@ div.body:has(.bigPlayer) {
 
 .playlist-overflow {
     flex: 2;
-    height: calc(100% - 220px);
+    height: 70%;
     margin: 100px 0;
     overflow: hidden;
 
@@ -270,20 +238,25 @@ div.body:has(.bigPlayer) {
                 transform: scaleX(0);
                 transform-origin: 0% 50%;
             }
+
             1% {
                 transform: scaleX(0);
             }
+
             4% {
                 transform: scaleX(1);
                 transform-origin: 0% 50%;
             }
+
             6% {
                 transform: scaleX(1);
                 transform-origin: 100% 50%;
             }
+
             9% {
                 transform: scaleX(0);
             }
+
             100% {
                 transform: scaleX(0);
                 transform-origin: 100% 50%;
diff --git a/src/ui/src/views/Collection/Releases.vue b/src/ui/src/views/Collection/Releases.vue
index def6566f..dfbf4f7c 100644
--- a/src/ui/src/views/Collection/Releases.vue
+++ b/src/ui/src/views/Collection/Releases.vue
@@ -8,16 +8,11 @@
         <Loader />
     </div>
     <div v-else>
-        <add-album-to-playlist
-            v-if="selectedElement"
-            :id="
-                selectedElement.url?.replace(
-                    'https://open.spotify.com/album/',
-                    ''
-                )
-            "
-            ref="addReleaseRef"
-            :album="{
+        <add-album-to-playlist v-if="selectedElement" :id="selectedElement.url?.replace(
+            'https://open.spotify.com/album/',
+            ''
+        )
+            " ref="addReleaseRef" :album="{
                 id: selectedElement.url?.replace(
                     'https://open.spotify.com/album/',
                     ''
@@ -27,46 +22,26 @@
                 cover: selectedElement.cover,
                 href: selectedElement.url,
                 releaseDate: selectedElement.releaseDate,
-            }"
-            :artist="selectedElement.artist"
-            :cover="selectedElement.cover"
-            :href="selectedElement.url"
-            :title="selectedElement.title"
-        />
+            }" :artist="selectedElement.artist" :cover="selectedElement.cover" :href="selectedElement.url"
+            :title="selectedElement.title" />
         <div class="releases w-full">
             <div class="current">
                 <div class="w-max flex flex-col gap-4" v-if="nextInQueue">
-                    <Cover
-                        class="rounded-3xl"
-                        v-if="nextInQueue"
-                        :src="nextInQueue.cover"
-                        with-ambient
-                    />
+                    <Cover class="rounded-3xl" v-if="nextInQueue" :src="nextInQueue.cover" with-ambient />
                     <div class="flex justify-between w-full items-center">
                         <div class="flex gap-4 items-center">
-                            <span
-                                class="preview material-symbols-rounded ms-fill text-5xl cursor-pointer"
-                                @click="previewRelease(nextInQueue)"
-                            >
+                            <span class="preview material-symbols-rounded ms-fill text-5xl cursor-pointer"
+                                @click="previewRelease(nextInQueue)">
                                 play_circle
                             </span>
                             <div class="info">
                                 <h3 v-if="nextInQueue">
                                     <Marquee :text="nextInQueue.title" />
                                 </h3>
-                                <p
-                                    v-if="nextInQueue"
-                                    class="m-0 text-muted text-sm"
-                                >
-                                    <ArtistMarquee
-                                        :artist="nextInQueue.artist"
-                                    />
+                                <p v-if="nextInQueue" class="m-0 text-muted text-sm">
+                                    <ArtistMarquee :artist="nextInQueue.artist" />
                                 </p>
-                                <p
-                                    v-if="nextInQueue"
-                                    class="m-0 text-muted text-xs"
-                                    :title="nextInQueue.releaseDate"
-                                >
+                                <p v-if="nextInQueue" class="m-0 text-muted text-xs" :title="nextInQueue.releaseDate">
                                     {{
                                         formatReleaseDate(
                                             nextInQueue.releaseDate
@@ -76,24 +51,18 @@
                             </div>
                         </div>
                         <div class="actions">
-                            <span
-                                class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
-                                @click.stop="importRelease(nextInQueue)"
-                                title="Add to playlist"
-                            >
+                            <span class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
+                                @click.stop="importRelease(nextInQueue)" title="Add to playlist">
                                 add
                             </span>
-                            <span
-                                class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
+                            <span class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
                                 @click.stop="
                                     remember.find(
                                         (x) => x.url === nextInQueue.url
                                     )
                                         ? forgetRelease(nextInQueue)
                                         : rememberRelease(nextInQueue)
-                                "
-                                title="Pin"
-                            >
+                                    " title="Pin">
                                 {{
                                     remember.find(
                                         (x) => x.url === nextInQueue.url
@@ -102,11 +71,8 @@
                                         : "push_pin"
                                 }}
                             </span>
-                            <span
-                                class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
-                                @click.stop="seeRelease(nextInQueue)"
-                                title="Mark as seen"
-                            >
+                            <span class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
+                                @click.stop="seeRelease(nextInQueue)" title="Mark as seen">
                                 done_all
                             </span>
                         </div>
@@ -120,71 +86,43 @@
             </div>
             <Card class="queue w-full p-2 h-full flex flex-col gap-2 relative">
                 <div class="flex items-center gap-4 w-max">
-                    <h5
-                        class="cursor-pointer"
-                        :class="{ selected: activeQueue == 'unseen' }"
-                        @click="activeQueue = 'unseen'"
-                    >
+                    <h5 class="cursor-pointer" :class="{ selected: activeQueue == 'unseen' }"
+                        @click="activeQueue = 'unseen'">
                         Unseen
                     </h5>
-                    <h5
-                        class="cursor-pointer"
-                        :class="{ selected: activeQueue == 'out-today' }"
-                        @click="activeQueue = 'out-today'"
-                    >
+                    <h5 class="cursor-pointer" :class="{ selected: activeQueue == 'out-today' }"
+                        @click="activeQueue = 'out-today'">
                         Out Today
                     </h5>
-                    <h5
-                        class="cursor-pointer"
-                        :class="{ selected: activeQueue == 'watching' }"
-                        @click="activeQueue = 'watching'"
-                    >
+                    <h5 class="cursor-pointer" :class="{ selected: activeQueue == 'watching' }"
+                        @click="activeQueue = 'watching'">
                         Pinned
                     </h5>
-                    <h5
-                        class="cursor-pointer"
-                        :class="{ selected: activeQueue == 'seen' }"
-                        @click="activeQueue = 'seen'"
-                    >
+                    <h5 class="cursor-pointer" :class="{ selected: activeQueue == 'seen' }"
+                        @click="activeQueue = 'seen'">
                         Seen
                     </h5>
-                    <h5
-                        class="cursor-pointer"
-                        :class="{ selected: activeQueue == 'all' }"
-                        @click="activeQueue = 'all'"
-                    >
+                    <h5 class="cursor-pointer" :class="{ selected: activeQueue == 'all' }" @click="activeQueue = 'all'">
                         All
                     </h5>
                 </div>
-                <div
-                    class="flex justify-between mb-2"
-                    v-if="activeQueue === 'unseen' && queue.length"
-                >
-                    <span
-                        class="cursor-pointer text-sm text-muted hover:text-primary flex items-center gap-2"
-                        @click="forceReload"
-                    >
+                <div class="flex justify-between mb-2" v-if="activeQueue === 'unseen' && queue.length">
+                    <span class="cursor-pointer text-sm text-muted hover:text-primary flex items-center gap-2"
+                        @click="forceReload">
                         Refresh
                         <span class="material-symbols-rounded"> refresh </span>
                     </span>
-                    <span
-                        class="cursor-pointer text-sm text-muted hover:text-primary flex items-center gap-2"
-                        @click="queue.forEach(seeRelease)"
-                    >
+                    <span class="cursor-pointer text-sm text-muted hover:text-primary flex items-center gap-2"
+                        @click="queue.forEach(seeRelease)">
                         Mark all as seen
                         <span class="material-symbols-rounded"> done_all </span>
                     </span>
                 </div>
                 <div class="entries overflow-y-auto flex flex-col gap-2">
-                    <div
-                        class="entry"
-                        @click="
-                            nextInQueue = entry;
-                            previewRelease(entry);
-                        "
-                        v-for="entry in queue"
-                        v-if="queue.length"
-                    >
+                    <div class="entry" @click="
+                        nextInQueue = entry;
+                    previewRelease(entry);
+                    " v-for="entry in queue" v-if="queue.length">
                         <Cover class="rounded-xl" :src="entry.cover" />
                         <div class="info overflow-hidden">
                             <p class="m-0 overflow-hidden">
@@ -194,39 +132,26 @@
                                 <ArtistMarquee :artist="entry.artist" />
                             </p>
                         </div>
-                        <p
-                            class="text-sm m-0 text-muted"
-                            :title="entry.releaseDate"
-                        >
+                        <p class="text-sm m-0 text-muted" :title="entry.releaseDate">
                             {{ formatReleaseDate(entry.releaseDate) }}
                         </p>
-                        <span
-                            class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
-                            @click.stop="importRelease(entry)"
-                            title="Add to playlist"
-                        >
+                        <span class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
+                            @click.stop="importRelease(entry)" title="Add to playlist">
                             add
                         </span>
-                        <span
-                            class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
-                            @click.stop="
-                                remember.find((x) => x.url === entry.url)
-                                    ? forgetRelease(entry)
-                                    : rememberRelease(entry)
-                            "
-                            title="Pin"
-                        >
+                        <span class="material-symbols-rounded cursor-pointer text-muted hover:text-primary" @click.stop="
+                            remember.find((x) => x.url === entry.url)
+                                ? forgetRelease(entry)
+                                : rememberRelease(entry)
+                            " title="Pin">
                             {{
                                 remember.find((x) => x.url === entry.url)
                                     ? "playlist_remove"
                                     : "push_pin"
                             }}
                         </span>
-                        <span
-                            class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
-                            @click.stop="seeRelease(entry)"
-                            title="Mark as seen"
-                        >
+                        <span class="material-symbols-rounded cursor-pointer text-muted hover:text-primary"
+                            @click.stop="seeRelease(entry)" title="Mark as seen">
                             done_all
                         </span>
                     </div>
@@ -467,11 +392,11 @@ h5.selected {
 }
 
 .queue {
-    height: calc(100% - 150px);
+    height: 80%;
     overflow: hidden;
 }
 
-.queue > .entries {
+.queue>.entries {
     padding: 0.5em;
 }