diff --git a/function.py b/function.py
index 556b329..665085c 100644
--- a/function.py
+++ b/function.py
@@ -3,6 +3,7 @@ import json
 import aiohttp
 import os
 
+from importlib import import_module
 from discord.ext import commands
 from dotenv import load_dotenv
 from random import choice
@@ -204,7 +205,7 @@ async def similar_track(player) -> bool:
     return False
 
 async def connect_channel(ctx: commands.Context, channel: discord.VoiceChannel = None):
-    import voicelink
+    voicelink = import_module("voicelink");
     try:
         channel = channel or ctx.author.voice.channel
     except:
diff --git a/voicelink/player.py b/voicelink/player.py
index 6ec2c62..1986495 100644
--- a/voicelink/player.py
+++ b/voicelink/player.py
@@ -221,7 +221,7 @@ class Player(VoiceProtocol):
                 return False        
         return True
     
-    def is_privileged(self, user: Member, check_user_join: bool = True):
+    def is_privileged(self, user: Member, check_user_join: bool = True) -> bool:
         if user.id in func.settings.bot_access_user:
             return True
         
@@ -233,18 +233,19 @@ class Player(VoiceProtocol):
             return manage_perm or (self.settings['dj'] in [role.id for role in user.roles])
         return self.dj.id == user.id or manage_perm
     
-    async def _update_state(self, data: dict):
+    async def _update_state(self, data: dict) -> None:
         state: dict = data.get("state")
         self._last_update = time.time() * 1000
         self._is_connected = state.get("connected")
         self._last_position = state.get("position")
         self._ping = state.get("ping")
-        if self.bot.ipc.connections:
-            await self.send_ws({ "op": "playerUpdate",
-                                "last_update": self._last_update,
-                                "is_connected": self._is_connected,
-                                "last_position": self._last_position
-                                })
+        if self.is_ipc_connected:
+            await self.send_ws({
+                "op": "playerUpdate",
+                "last_update": self._last_update,
+                "is_connected": self._is_connected,
+                "last_position": self._last_position
+            })
 
     async def _dispatch_voice_update(self, voice_data: Dict[str, Any]):
         if {"sessionId", "event"} != self._voice_state.keys():
diff --git a/web/ipc/methods.py b/web/ipc/methods.py
index d89d252..a540e3b 100644
--- a/web/ipc/methods.py
+++ b/web/ipc/methods.py
@@ -139,6 +139,9 @@ async def getTracks(player: Player, member: Member, data: dict):
         if not tracks:
             return payload
         
+        if isinstance(tracks, Playlist):
+            tracks = [ track for track in tracks.tracks[:20] ]
+
         payload["tracks"] = [ track.toDict() for track in tracks ]
         return payload
     
diff --git a/web/static/css/main.css b/web/static/css/main.css
index 77ca8f5..e613282 100644
--- a/web/static/css/main.css
+++ b/web/static/css/main.css
@@ -23,6 +23,11 @@ a {
     text-decoration: none;
 }
 
+:root {
+    --grey: rgba(142, 142, 142, 20%);
+    --grey-hover: rgba(142, 142, 142, 30%);
+}
+
 /* width */
 ::-webkit-scrollbar {
     width: 10px;
@@ -45,6 +50,14 @@ a {
     min-height: 100%;
 }
 
+.box {
+    position: absolute;
+    opacity: 20%;
+    border-radius: 40%;
+    filter: blur(60px);
+    transition: all 2s ease-in-out;
+}
+
 .dropdown-container {
     position: relative;
     display: inline-block;
@@ -54,12 +67,12 @@ a {
 }
 
 .dropdown-container:hover {
-    background-color: rgba(142, 142, 142, 20%);
+    background-color: var(--grey);
 }
 
 .dropdown-container:hover .dropdown-item {
     display: block;
-    background-color: rgba(142, 142, 142, 20%);
+    background-color: var(--grey);
 }
 
 .dropdown-content {
@@ -78,7 +91,7 @@ a {
     position: absolute;
     left: 0;
     margin-top: 10px;
-    padding: 10px;
+    padding: 5px;
     border-radius: 0 0 10px 10px;
     width: 100%;
     font-size: 15px;
@@ -95,7 +108,7 @@ a {
 }
 
 .dropdown-item a:hover {
-    background-color: rgba(142, 142, 142, 30%);
+    background-color: var(--grey-hover);
 }
 
 .header {
@@ -105,6 +118,7 @@ a {
     align-items: center;
     position: sticky;
     top: 0;
+    z-index: 2;
 }
 
 .header .left {
@@ -121,16 +135,16 @@ a {
 }
 
 .header .left p:hover {
-    background-color: rgba(142, 142, 142, 20%);
+    background-color: var(--grey);
 }
 
-.header .center .search-contrainer {
+.header .center .search-container {
     display: flex;
     justify-content: center;
     position: relative;
 }
 
-.header .center .search-contrainer .search-bar {
+.header .center .search-container .search-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -195,7 +209,7 @@ a {
 }
 
 .header .search-result:hover {
-    background-color: rgba(142, 142, 142, 20%);
+    background-color: var(--grey);
 }
 
 .header .search-result-left {
@@ -203,14 +217,13 @@ a {
     align-items: center;
     overflow: hidden;
     margin-right: .6rem;
-    max-width: 90%;
+    max-width: 85%;
 }
 
 .header .search-result-info p.info {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-
 }
 
 .header .search-result-info p.desc {
@@ -235,6 +248,7 @@ a {
 .main .toastContrainer {
     position: absolute;
     left: 2%;
+    z-index: 2;
 }
 
 .toastContrainer .toast {
@@ -242,7 +256,7 @@ a {
     position: relative;
     padding: .8rem;
     margin-top: 1rem;
-    background-color: rgba(142, 142, 142, 30%);
+    background-color: var(--grey-hover);
     border-radius: 10px;
     overflow: hidden;
     transform: translateX(-100%);
@@ -291,6 +305,7 @@ a {
 
 .main .thumbnail {
     display: flex;
+    position: relative;
     justify-content: center;
     align-items: center;
     flex: 1;
@@ -298,13 +313,24 @@ a {
 
 .main .thumbnail img {
     padding: 1rem;
-    width: 80%;
+    width: 75%;
     height: auto;
+    z-index: 1;
+}
+
+.main .thumbnail-background {
+    position: absolute;
+    padding: 1rem;
+    filter: blur(80px);
+    transform: translate3d(0px, 0px, 0) scale(1);
+    opacity: var(0.6);
+    border-radius: inherit;
 }
 
 .player-controller {
     position: sticky;
     bottom: 0;
+    z-index: 2;
 }
 
 .progress-bar-container {
@@ -436,7 +462,7 @@ a {
 }
 
 .track:hover {
-    background-color: rgba(142, 142, 142, 20%);
+    background-color: var(--grey);
 }
 
 .track:hover .time {
@@ -448,7 +474,7 @@ a {
 }
 
 .track.active {
-    background-color: rgba(142, 142, 142, 30%);
+    background-color: var(--grey-hover);
 }
 
 .track .left {
@@ -504,6 +530,7 @@ a {
     list-style: none;
     width: 90%;
     padding: 1rem;
+    padding-bottom: 5rem;
     max-height: 300px;
 }
 
@@ -530,7 +557,6 @@ a {
 
 .users-bar .info h5 {
     color: rgba(142, 142, 142);
-    ;
 }
 
 .users-container {
diff --git a/web/static/js/action.js b/web/static/js/action.js
index 70c6372..f7cdcbd 100644
--- a/web/static/js/action.js
+++ b/web/static/js/action.js
@@ -51,7 +51,7 @@ $(document).ready(function () {
         var position = player.current_queue_position;
 
         if ($(event.target).hasClass('action')) {
-            selectedTrack = {position: index, track: player.queue[index]};
+            selectedTrack = { position: index, track: player.queue[index] };
             $("#context-menu").css({ "left": `${event.pageX - 150}px`, "top": `${event.pageY + 30}px` }).fadeIn(200);
             return
         }
@@ -129,12 +129,12 @@ $(document).ready(function () {
 
     })
 
-    $("#remove-track-button").on('click', function() {
+    $("#remove-track-button").on('click', function () {
         player.removeTrack(selectedTrack?.position, selectedTrack?.track)
         $("#context-menu").fadeOut(200);
     })
 
-    $("#copy-track-button").on('click', function() {
+    $("#copy-track-button").on('click', function () {
         navigator.clipboard.writeText(selectedTrack?.track.uri);
         $("#context-menu").fadeOut(200);
     })
diff --git a/web/static/js/objects.js b/web/static/js/objects.js
index 10a0019..aed6961 100644
--- a/web/static/js/objects.js
+++ b/web/static/js/objects.js
@@ -31,9 +31,9 @@ class Timer {
 const actions = {
     initPlayer: function (player, data) {
         player.init();
+        player.isDJ = data['is_dj'];
         player.addTrack(data["tracks"]);
         player.updateCurrentQueuePos(data['current_queue_position']);
-        player.isDJ = data['is_dj'];
         player.is_paused = data['is_paused'];
         player.current_position = data['current_position'];
         player.repeat = data['repeat_mode'];
@@ -92,7 +92,7 @@ const actions = {
     updateGuild: function (player, data) {
         const user = data["user"];
         player.channelName = data["channel_name"];
-        
+
         if (user["user_id"] == player.userId) {
             if (data['is_joined']) {
                 player.send({ "op": "initPlayer" });
@@ -231,7 +231,7 @@ class Track {
 
 class Player {
     constructor(userId) {
-        this.socket = new Socket(`http://${window.location.hostname}:${window.location.port}`);
+        this.socket = new Socket(`${window.location.protocol}//${window.location.hostname}:${window.location.port}`);
         this.socket.connect(this);
         this.socket.addMessageListener((msg) => this.handleMessage(msg));
         this.timer = new Timer(() => this.updateTime(), 1000);
@@ -278,7 +278,7 @@ class Player {
         $('#sortable').empty();
         for (var i in this.queue) {
             var track = this.queue[i];
-            $("#sortable").append(`<li><div class="track"><div class="left"><i class="fa-solid fa-bars handle"></i><img src=${track.imageUrl} /><div class="info"><p>${track.title}</p><p class="desc">${track.author}</p></div></div><p class="time">${this.msToReadableTime(track.length)}</p><i class="fa-solid fa-ellipsis-vertical action"></i></div></li>`)
+            $("#sortable").append(`<li><div class="track"><div class="left">${(this.isDJ) ? '<i class="fa-solid fa-bars handle"></i>' : ''}<img src=${track.imageUrl} /><div class="info"><p>${track.title}</p><p class="desc">${track.author}</p></div></div><p class="time">${this.msToReadableTime(track.length)}</p><i class="fa-solid fa-ellipsis-vertical action"></i></div></li>`)
         }
         this.updateCurrentQueuePos();
     }
@@ -292,8 +292,8 @@ class Player {
         $('#sortable li div').removeClass('active');
         const li = $(`#sortable li:eq(${this.current_queue_position})`);
         li.find('div').addClass('active');
-        
-        const queue = $('.queue-list') 
+
+        const queue = $('.queue-list')
         if (queue.prop('scrollHeight') > queue.prop('clientHeight')) {
             queue.animate({ scrollTop: li.position().top - queue.position().top }, 'slow');
         }
@@ -315,7 +315,7 @@ class Player {
         for (var i in tracks) {
             var track = new Track(tracks[i]);
             this.queue.push(track);
-            $("#sortable").append(`<li><div class="track"><div class="left"><i class="fa-solid fa-bars handle"></i><img src=${track.imageUrl} /><div class="info"><p>${track.title}</p><p class="desc">${track.author}</p></div></div><p class="time">${this.msToReadableTime(track.length)}</p><i class="fa-solid fa-ellipsis-vertical action"></i></div></li>`)
+            $("#sortable").append(`<li><div class="track"><div class="left">${(this.isDJ) ? '<i class="fa-solid fa-bars handle"></i>' : ''}<img src=${track.imageUrl} /><div class="info"><p>${track.title}</p><p class="desc">${track.author}</p></div></div><p class="time">${this.msToReadableTime(track.length)}</p><i class="fa-solid fa-ellipsis-vertical action"></i></div></li>`)
         }
     }
 
@@ -336,7 +336,7 @@ class Player {
         } else if (target == c) {
             this.current_queue_position = to;
         }
-        
+
         this.send({ "op": "moveTrack", "position": target, "newPosition": to })
     }
 
@@ -346,7 +346,7 @@ class Player {
             return this.showToast("error", "You are not allow to remove playing track!");
         }
         if (rawTrack.track_id == track.track_id) {
-            this.send({"op": "removeTrack", "position": position, "track_id": track.track_id});
+            this.send({ "op": "removeTrack", "position": position, "track_id": track.track_id });
         } else {
             this.showToast("error", "Track not found!");
         }