diff --git a/app/handlers/apis/history.go b/app/handlers/apis/history.go
index 34d9bdf..b4e34e3 100644
--- a/app/handlers/apis/history.go
+++ b/app/handlers/apis/history.go
@@ -6,10 +6,13 @@ import (
 	"dankmuzikk/handlers"
 	"dankmuzikk/log"
 	"dankmuzikk/services/history"
+	"dankmuzikk/views/components/playlist"
 	"dankmuzikk/views/components/song"
 	"fmt"
 	"net/http"
 	"strconv"
+
+	"github.com/a-h/templ"
 )
 
 type historyApi struct {
@@ -43,8 +46,12 @@ func (h *historyApi) HandleGetMoreHistoryItems(w http.ResponseWriter, r *http.Re
 	}
 
 	outBuf := bytes.NewBuffer([]byte{})
-	for _, s := range recentPlays {
-		song.Song(s, []string{"Played " + s.AddedAt}, nil, entities.Playlist{}).
+	for idx, s := range recentPlays {
+		song.Song(s, []string{"Played " + s.AddedAt},
+			[]templ.Component{
+				playlist.PlaylistsPopup((idx+1)*page, s.YtId),
+			},
+			entities.Playlist{}).
 			Render(r.Context(), outBuf)
 	}
 
diff --git a/app/services/youtube/search/search_scraper.go b/app/services/youtube/search/search_scraper.go
index 62a9022..3c004cd 100644
--- a/app/services/youtube/search/search_scraper.go
+++ b/app/services/youtube/search/search_scraper.go
@@ -12,9 +12,9 @@ import (
 )
 
 var (
-	pat0 = regexp.MustCompile(`"innertubeApiKey":"([^"]*)`)
-	pat  = regexp.MustCompile(`ytInitialData[^{]*(.*?);\s*<\/script>`)
-	pat2 = regexp.MustCompile(`ytInitialData"[^{]*(.*);\s*window\["ytInitialPlayerResponse"\]`)
+	keyPattern   = regexp.MustCompile(`"innertubeApiKey":"([^"]*)`)
+	dataPattern  = regexp.MustCompile(`ytInitialData[^{]*(.*?);\s*<\/script>`)
+	dataPattern2 = regexp.MustCompile(`ytInitialData"[^{]*(.*);\s*window\["ytInitialPlayerResponse"\]`)
 )
 
 type videoResult struct {
@@ -95,15 +95,15 @@ func search(q string) ([]videoResult, error) {
 		Parser:  "json_format",
 		Key:     "",
 	}
-	key := pat0.FindSubmatch(respBody)
+	key := keyPattern.FindSubmatch(respBody)
 	jojo.Key = string(key[1])
 
-	matches := pat.FindSubmatch(respBody)
+	matches := dataPattern.FindSubmatch(respBody)
 	if len(matches) > 1 {
 		jojo.Parser += ".object_var"
 	} else {
 		jojo.Parser += ".original"
-		matches = pat2.FindSubmatch(respBody)
+		matches = dataPattern2.FindSubmatch(respBody)
 	}
 	data := ytSearchData{}
 	err = json.Unmarshal(matches[1], &data)
@@ -134,7 +134,7 @@ func search(q string) ([]videoResult, error) {
 	return resSuka, nil
 }
 
-// ScraperSearch is a scrapper enabled YouTube search, using the search service under ~/ytscraper
+// ScraperSearch is a scrapper enabled YouTube search.
 type ScraperSearch struct{}
 
 func (y *ScraperSearch) Search(query string) (results []entities.Song, err error) {
diff --git a/app/static/css/refresher.css b/app/static/css/refresher.css
new file mode 100644
index 0000000..57a5fce
--- /dev/null
+++ b/app/static/css/refresher.css
@@ -0,0 +1,77 @@
+/* I herby admit that this code is a copy-pasta from https://developer.chrome.com/blog/overscroll-behavior/ */
+
+body.refreshing #main-contents,
+body.refreshing header {
+  filter: blur(1px);
+  touch-action: none;
+}
+
+body.refreshing .refresher {
+  transform: translate3d(0, 150%, 0) scale(1);
+  z-index: 50;
+  visibility: visible;
+}
+
+.refresher {
+  pointer-events: none;
+  --refresh-width: 55px;
+  background: var(--secondary-color);
+  width: var(--refresh-width);
+  height: var(--refresh-width);
+  border-radius: 50%;
+  position: absolute;
+  left: calc(50% - var(--refresh-width) / 2);
+  padding: 8px;
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
+  will-change: transform;
+  display: inline-flex;
+  justify-content: space-evenly;
+  align-items: center;
+  visibility: hidden;
+}
+
+body.refreshing .refresher.shrink {
+  transform: translate3d(0, 150%, 0) scale(0);
+  opacity: 0;
+}
+
+.refresher.done {
+  transition: none;
+}
+
+.loading-bar {
+  background-color: var(--primary-color);
+  width: 4px;
+  height: 18px;
+  border-radius: 4px;
+  animation: loading 0.81s ease-in-out infinite;
+}
+
+.loading-bar:nth-child(1) {
+  animation-delay: 0;
+}
+.loading-bar:nth-child(2) {
+  animation-delay: 0.09s;
+}
+.loading-bar:nth-child(3) {
+  animation-delay: 0.18s;
+}
+.loading-bar:nth-child(4) {
+  animation-delay: 0.27s;
+}
+
+@keyframes loading {
+  0% {
+    transform: scale(1);
+  }
+  20% {
+    transform: scale(1, 2.2);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
diff --git a/app/static/js/player.js b/app/static/js/player.js
index 642dbd1..f1a2a32 100644
--- a/app/static/js/player.js
+++ b/app/static/js/player.js
@@ -376,7 +376,8 @@ function playlister(state) {
         ? 0
         : state.currentSongIdx + 1;
     const songToPlay = state.playlist.songs[state.currentSongIdx];
-    playSongFromPlaylist(songToPlay.yt_id, state.playlist);
+    await highlightSongInPlaylist(songToPlay.yt_id, state.playlist);
+    await playSong(songToPlay);
     __setSongInPlaylistStyle(songToPlay.yt_id, state.playlist);
   };
 
@@ -415,7 +416,8 @@ function playlister(state) {
         ? state.playlist.songs.length - 1
         : state.currentSongIdx - 1;
     const songToPlay = state.playlist.songs[state.currentSongIdx];
-    playSongFromPlaylist(songToPlay.yt_id, state.playlist);
+    await highlightSongInPlaylist(songToPlay.yt_id, state.playlist);
+    await playSong(songToPlay);
     __setSongInPlaylistStyle(songToPlay.yt_id, state.playlist);
   };
 
@@ -645,6 +647,46 @@ async function playSingleSongNext(song) {
   alert(`Playing ${song.title} next!`);
 }
 
+/**
+ * @param {Playlist} playlist
+ */
+async function playPlaylistNext(playlist) {
+  if (!playlist || !playlist.songs || playlist.songs.length === 0) {
+    alert("Can't do that!");
+    return;
+  }
+  if (playerState.playlist.songs.length === 0) {
+    playSongFromPlaylist(playlist.songs[0].yt_id, playlist);
+    return;
+  }
+  playerState.playlist.songs.splice(
+    playerState.currentSongIdx + 1,
+    0,
+    ...playlist.songs.map((s) => {
+      return { ...s, votes: 1 };
+    }),
+  );
+  playerState.playlist.title = `${playerState.playlist.title} + ${playlist.title}`;
+  alert(`Playing ${playlist.title} next!`);
+}
+
+/**
+ * @param {Playlist} playlist
+ */
+async function appendPlaylistToCurrentQueue(playlist) {
+  if (!playlist || !playlist.songs || playlist.songs.length === 0) {
+    alert("Can't do that!");
+    return;
+  }
+  if (playerState.playlist.songs.length === 0) {
+    playSongFromPlaylist(playlist.songs[0].yt_id, playlist);
+    return;
+  }
+  playerState.playlist.songs.push(...playlist.songs);
+  playerState.playlist.title = `${playerState.playlist.title} + ${playlist.title}`;
+  alert(`Playing ${playlist.title} next!`);
+}
+
 /**
  * @param {string} songYtId
  * @param {Playlist} playlist
@@ -684,12 +726,6 @@ async function playSongFromPlaylist(songYtId, playlist) {
  * @param {Song} song
  */
 function appendSongToCurrentQueue(song) {
-  if (
-    playerState.playlist.songs.findIndex((s) => s.yt_id === song.yt_id) !== -1
-  ) {
-    alert(`${song.title} exists in the queue!`);
-    return;
-  }
   if (playerState.playlist.songs.length === 0) {
     playSingleSong(song);
     return;
@@ -917,8 +953,10 @@ window.Player.hidePlayer = hide;
 window.Player.playSingleSong = playSingleSong;
 window.Player.playSingleSongNext = playSingleSongNext;
 window.Player.playSongFromPlaylist = playSongFromPlaylist;
+window.Player.playPlaylistNext = playPlaylistNext;
 window.Player.removeSongFromPlaylist = removeSongFromPlaylist;
 window.Player.addSongToQueue = appendSongToCurrentQueue;
+window.Player.appendPlaylistToCurrentQueue = appendPlaylistToCurrentQueue;
 window.Player.stopMuzikk = stopMuzikk;
 window.Player.expand = () => expand();
 window.Player.collapse = () => collapse();
diff --git a/app/static/js/refresher.js b/app/static/js/refresher.js
new file mode 100644
index 0000000..9e03bd5
--- /dev/null
+++ b/app/static/js/refresher.js
@@ -0,0 +1,62 @@
+/* I herby admit that this code is a copy-pasta from https://developer.chrome.com/blog/overscroll-behavior/ */
+
+"use strict";
+
+const mainContentsEl = document.getElementById("main-contents");
+let _startY = 0;
+
+async function simulateRefreshAction() {
+  const sleep = (timeout) =>
+    new Promise((resolve) => setTimeout(resolve, timeout));
+
+  const transitionEnd = function (propertyName, node) {
+    return new Promise((resolve) => {
+      function callback(e) {
+        e.stopPropagation();
+        if (e.propertyName === propertyName) {
+          node.removeEventListener("transitionend", callback);
+          resolve(e);
+        }
+      }
+      node.addEventListener("transitionend", callback);
+    });
+  };
+
+  const refresher = document.querySelector(".refresher");
+
+  document.body.classList.add("refreshing");
+  await sleep(500);
+
+  refresher.classList.add("shrink");
+  await transitionEnd("transform", refresher);
+  refresher.classList.add("done");
+
+  refresher.classList.remove("shrink");
+  document.body.classList.remove("refreshing");
+  await sleep(0); // let new styles settle.
+  refresher.classList.remove("done");
+}
+
+document.body.addEventListener(
+  "touchstart",
+  (e) => {
+    _startY = e.touches[0].pageY;
+  },
+  { passive: true },
+);
+
+document.body.addEventListener(
+  "touchmove",
+  async (e) => {
+    const y = e.touches[0].pageY;
+    if (
+      document.scrollingElement.scrollTop === 0 &&
+      y > _startY + 150 &&
+      !document.body.classList.contains("refreshing")
+    ) {
+      await simulateRefreshAction();
+      await updateMainContent(window.location.pathname);
+    }
+  },
+  { passive: true },
+);
diff --git a/app/static/js/router.js b/app/static/js/router.js
index e316c9b..537e45f 100644
--- a/app/static/js/router.js
+++ b/app/static/js/router.js
@@ -27,6 +27,35 @@ window.addEventListener("load", () => {
   updateActiveNavLink();
 });
 
+/**
+ * @param {string} path the requested path to update.
+ */
+async function updateMainContent(path) {
+  Utils.showLoading();
+  await fetch(path + "?no_layout=true")
+    .then((res) => res.text())
+    .then((page) => {
+      mainContentsEl.innerHTML = page;
+    })
+    .catch(() => {
+      window.location.reload();
+    })
+    .finally(() => {
+      Utils.hideLoading();
+      updateActiveNavLink();
+    });
+}
+
+window.addEventListener("popstate", async (e) => {
+  const mainContentsEl = document.getElementById("main-contents");
+  if (!!mainContentsEl && !!e.target.location.pathname) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    await updateMainContent(e.target.location.pathname);
+    return;
+  }
+});
+
 document.addEventListener("htmx:afterRequest", function (e) {
   if (!!e.detail && !!e.detail.xhr) {
     const newTitle = e.detail.xhr.getResponseHeader("HX-Title");
@@ -36,4 +65,4 @@ document.addEventListener("htmx:afterRequest", function (e) {
   }
 });
 
-window.Router = { updateActiveNavLink };
+window.Router = { updateActiveNavLink, updateMainContent };
diff --git a/app/views/components/menus/mobile_menu.templ b/app/views/components/menus/mobile_menu.templ
index df79df4..958dee0 100644
--- a/app/views/components/menus/mobile_menu.templ
+++ b/app/views/components/menus/mobile_menu.templ
@@ -39,31 +39,36 @@ templ MobileMenu(id, title string, button, child templ.Component) {
         .mobile-menu-collapsed {
             height: 0;
             max-height: 0;
-        }
-        .mobile-menu-exapnded {
-            min-height: 200px;
-            max-height: 500px;
+            min-height: 0;
         }
     </style>
 }
 
 script toggleMobileMenu(id string) {
     const popover = document.getElementById(`mobile-menu-${id}`);
-    popover.classList.toggle("mobile-menu-exapnded");
+    if (popover.classList.contains("mobile-menu-collapsed")) {
+        const player = document.getElementById("ze-player");
+        const rect = popover.getBoundingClientRect();
+        popover.style.bottom = `-${
+            (window.innerHeight-(rect.y+rect.height)) -
+            65 -
+            (!player.classList.contains("hidden")?
+            player.getBoundingClientRect().height + 5:
+            0)
+        }px`
+        popover.style.height = (
+            popover.children[0].getBoundingClientRect().height + 4 +
+            popover.children[1].getBoundingClientRect().height
+        ).toString() + "px" ;
+        popover.style.maxHeight = "500px";
+        popover.style.minHeight = "200px";
 
-    const player = document.getElementById("ze-player");
-    console.log(player.getBoundingClientRect())
+        popover.classList.remove("mobile-menu-collapsed");
+    } else {
+        popover.classList.add("mobile-menu-collapsed");
+        popover.style.height = 0;
+        popover.style.maxHeight = 0;
+        popover.style.minHeight = 0;
+    }
 
-    const rect = popover.getBoundingClientRect();
-    popover.style.bottom = `-${
-        (window.innerHeight-(rect.y+rect.height)) -
-        65 -
-        (!player.classList.contains("hidden")?
-        player.getBoundingClientRect().height + 5:
-        0)
-    }px`
-    popover.style.height = (
-        popover.children[0].getBoundingClientRect().height + 4 +
-        popover.children[1].getBoundingClientRect().height
-    ).toString() + "px" ;
 }
diff --git a/app/views/components/menus/popover.templ b/app/views/components/menus/popover.templ
index c789757..7f688e3 100644
--- a/app/views/components/menus/popover.templ
+++ b/app/views/components/menus/popover.templ
@@ -39,6 +39,7 @@ script toggleTheThing(id string) {
 
     if (popover.style.display !== "block") {
       popover.style.display = "block";
+      popover.scrollIntoView({ block: "nearest" });
     } else {
       popover.style.display = "none";
     }
diff --git a/app/views/components/playlist/options.templ b/app/views/components/playlist/options.templ
index b752a24..41a6d94 100644
--- a/app/views/components/playlist/options.templ
+++ b/app/views/components/playlist/options.templ
@@ -8,24 +8,67 @@ import (
 	"dankmuzikk/views/icons"
 )
 
-templ PlaylistsOptionsPopover(playlist entities.Playlist) {
-	@menus.Popover("playlist-"+playlist.PublicId, "Playlist options", icons.Options(), playlistOptions(playlist))
+templ PlaylistsOptions(playlist entities.Playlist) {
+	if isMobile, ok := ctx.Value("is-mobile").(bool); ok && isMobile {
+		@menus.MobileMenu("playlist-"+playlist.PublicId, "Playlist's options", icons.Options(), playlistOptions(playlist))
+	} else {
+		@menus.Popover("playlist-"+playlist.PublicId, "Playlist's options", icons.Options(), playlistOptions(playlist))
+	}
 }
 
 templ playlistOptions(playlist entities.Playlist) {
 	<div
 		class={
-			"w-[250px]", "h-full", "bg-accent-trans-20", "p-[10px]", "rounded-[10px]",
-			"flex", "flex-col", "gap-y-4", "backdrop-blur-lg",
+			"min-w-[250px]", "bg-accent-trans-20", "p-[15px]", "rounded-[10px]",
+			"flex", "flex-col", "gap-y-2", "backdrop-blur-lg",
 		}
 	>
-		<h3 class={ "text-lg", "font-medium" }>Options</h3>
+		<h3 class={ "text-lg", "font-medium" }>Playlist's Options</h3>
+		<hr/>
 		@publicPlaylistToggle(playlist.PublicId, playlist.IsPublic)
+		<button
+			class={
+				"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
+				"flex", "items-center", "gap-x-2", "w-full",
+			}
+			title="Copy link to this playlist"
+			type="button"
+			onClick={ copyLink(playlist.IsPublic, playlist.PublicId) }
+		>
+			@icons.ShareLink()
+			<span>Share playlist</span>
+		</button>
+		if len(playlist.Songs) != 0 {
+			<button
+				class={
+					"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
+					"flex", "items-center", "gap-x-2", "w-full",
+				}
+				title="Add to queue"
+				type="button"
+				onClick={ addToQueue(playlist) }
+			>
+				@icons.AddToQueue()
+				<span>Add to queue</span>
+			</button>
+			<button
+				class={
+					"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
+					"flex", "items-center", "gap-x-2", "w-full",
+				}
+				title="Play next"
+				type="button"
+				onClick={ playPlaylistNext(playlist) }
+			>
+				@icons.AddToQueue()
+				<span>Play next</span>
+			</button>
+		}
 		if perm, ok := ctx.Value("playlist-permission").(models.PlaylistPermissions); ok && (perm & models.JoinerPermission) != 0 {
 			<button
 				class={
-					"bg-[#DE3333]", "hover:bg-secondary", "text-secondary", "hover:text-[#DE3333]",
-					"rounded-[5px]", "py-[5px]", "px-[10px]", "w-full",
+					"popover-trigger", "p-1", "rounded-md", "hover:bg-[#DE3333]", "text-secondary", "hover:text-white",
+					"flex", "items-center", "gap-x-2", "w-full",
 				}
 				title={ "Remove " + playlist.Title + "!" }
 				type="button"
@@ -47,14 +90,26 @@ templ playlistOptions(playlist entities.Playlist) {
 						playlist.PublicId,
 					),
 				}
-			>Delete playlist</button>
+			>
+				<svg class={ "hover:stroke-white" } width="30" height="34" viewBox="0 0 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M11.6129 14.8387V24.5161" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+					<path d="M18.0647 14.8387V24.5161" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+					<path d="M1.93555 8.38712H27.742" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+					<path d="M5.16125 8.38712H14.8387H24.5161V26.129C24.5161 28.8015 22.3498 30.9678 19.6774 30.9678H9.99996C7.32763 30.9678 5.16125 28.8015 5.16125 26.129V8.38712Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+					<path d="M10 5.16128C10 3.37971 11.4442 1.93547 13.2258 1.93547H16.4516C18.2332 1.93547 19.6774 3.37971 19.6774 5.16128V8.38708H10V5.16128Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+				</svg>
+				<span>Delete playlist</span>
+			</button>
 		}
 	</div>
 }
 
 templ publicPlaylistToggle(publicId string, isPublic bool) {
 	<div
-		class={ "flex", "gap-x-2", "items-center", "cursor-pointer" }
+		class={
+			"flex", "gap-x-2", "items-center", "cursor-pointer",
+			"p-2", "rounded-md", "hover:bg-accent-trans-20", "w-full",
+		}
 		hx-put={
 			fmt.Sprintf(
 				"/api/playlist/public?playlist-id=%s",
@@ -71,7 +126,7 @@ templ publicPlaylistToggle(publicId string, isPublic bool) {
 				"/api/playlist/public?playlist-id=%s", publicId,
 			),
 		}
-		title="Toggling this will change the playlist's visibility!"
+		title="Toggling this will change whether if anyone can see the playlist or not."
 	>
 		<div
 			id={ fmt.Sprintf("public-playlist-%s", publicId) }
@@ -85,8 +140,25 @@ templ publicPlaylistToggle(publicId string, isPublic bool) {
 				}
 			></div>
 		</div>
-		<p class={ "max-w-[300px]", "text-secondary", "text-lg" }>
-			Public
+		<p class={ "max-w-[300px]", "text-secondary", "text-md" }>
+			Sharable
 		</p>
 	</div>
 }
+
+script playPlaylistNext(pl entities.Playlist) {
+    Player.playPlaylistNext(pl)
+}
+
+script addToQueue(pl entities.Playlist) {
+    Player.appendPlaylistToCurrentQueue(pl)
+}
+
+script copyLink(isPublic bool, plPubId string) {
+    window.Utils.copyTextToClipboard(`${location.protocol}//${location.host}/playlist/${plPubId}`)
+    if (isPublic) {
+        alert("Playlist's links was copied!");
+    } else {
+        alert("Playlist's links was copied!\nMake sure to make it public before sharing the link 😁")
+    }
+}
diff --git a/app/views/components/playlist/popup.templ b/app/views/components/playlist/popup.templ
index ef44f21..e7b35d8 100644
--- a/app/views/components/playlist/popup.templ
+++ b/app/views/components/playlist/popup.templ
@@ -9,7 +9,7 @@ import (
 )
 
 templ PlaylistsPopup(index int, songId string) {
-	@menus.Popup(fmt.Sprint(index), "Add to playlist", popupButton(songId), playlistSelector(songId))
+	@menus.Popup(fmt.Sprint(index), "Add to playlist", popupButton(), playlistSelector(songId))
 }
 
 templ playlistSelector(songId string) {
@@ -19,11 +19,14 @@ templ playlistSelector(songId string) {
 			"min-w-[350px]", "bg-accent-trans-30", "backdrop-blur-xl", "p-3", "text-secondary",
 			"rounded-b-[10px]", "rounded-l-[10px]",
 		}
+		hx-get={ "/api/playlist/all?song-id=" + songId }
+		hx-swap="outerHTML"
+		hx-trigger="intersect"
 	>
-		<div id="playlist-loading" class={ "w-full", "flex", "justify-center" }>
+		<div id="playlist-loading" class={ "w-full", "flex", "flex-col", "items-center", "justify-center" }>
 			<div class={ "loader", "!h-20", "!w-20" }></div>
+			<span class={ "text-secondary", "text-xl" }>Loading playlists...</span>
 		</div>
-		<span class={ "text-secondary", "text-xl" }>Loading playlists...</span>
 	</div>
 }
 
@@ -84,13 +87,9 @@ templ PlaylistsSelector(songId string, playlists []entities.Playlist, songsInPla
 	</div>
 }
 
-templ popupButton(songId string) {
+templ popupButton() {
 	<div
 		class={ "flex", "gap-x-2", "items-center", "p-2", "w-full" }
-		hx-get={ "/api/playlist/all?song-id=" + songId }
-		hx-swap="outerHTML"
-		hx-trigger="click"
-		hx-target={ "#playlists-" + songId }
 	>
 		@icons.AddToPlaytlist()
 		<span>Save to a playlist</span>
diff --git a/app/views/components/song/mobile_details.templ b/app/views/components/song/mobile_details.templ
index c649477..9be7681 100644
--- a/app/views/components/song/mobile_details.templ
+++ b/app/views/components/song/mobile_details.templ
@@ -5,9 +5,9 @@ import "fmt"
 
 templ DetailsMobile(song entities.Song) {
 	<div
-		class={ "w-[250px]", "h-full", "flex", "flex-col", "gap-y-2", "p-2" }
+		class={ "w-[250px]", "h-full", "flex", "flex-col", "gap-y-2", "py-2" }
 	>
-		<h3 class={ "text-lg", "font-medium" }>Details and options</h3>
+		<h3 class={ "text-lg", "font-medium" }>Details</h3>
 		<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
 		if song.PlayTimes == 1 {
 			<p class={ "text-md", "max-w-[200px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
diff --git a/app/views/components/song/song.templ b/app/views/components/song/song.templ
index 30da0e6..24c0d41 100644
--- a/app/views/components/song/song.templ
+++ b/app/views/components/song/song.templ
@@ -91,10 +91,12 @@ templ Song(s entities.Song, additionalData []string, additionalOptions []templ.C
 templ options(song entities.Song, additionalOptions []templ.Component) {
 	<div
 		class={
-			"flex", "flex-col", "gap-y-1", "p-2", "rounded-md", "min-w-[250px]",
-			"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-sm", "shadow-accent",
+			"min-w-[250px]", "bg-accent-trans-20", "p-[15px]", "rounded-[10px]",
+			"flex", "flex-col", "gap-y-2", "backdrop-blur-lg",
 		}
 	>
+		<h3 class={ "text-lg", "font-medium" }>Song's Options</h3>
+		<hr/>
 		for _, option := range additionalOptions {
 			@option
 		}
diff --git a/app/views/layouts/default.templ b/app/views/layouts/default.templ
index 4a22067..5c22230 100644
--- a/app/views/layouts/default.templ
+++ b/app/views/layouts/default.templ
@@ -39,6 +39,7 @@ templ Default(title string, children ...templ.Component) {
 				type="text/css"
 				href="/static/css/ubuntu-font.css"
 			/>
+			<link defer href="/static/css/refresher.css" rel="stylesheet"/>
 			<link href="/static/css/tailwind.css" rel="stylesheet"/>
 			<link href={ fmt.Sprintf("/static/css/themes/%s.css", ctx.Value("theme-name").(string)) } rel="stylesheet"/>
 			<script src="/static/js/htmx/htmx.min.js"></script>
@@ -50,7 +51,13 @@ templ Default(title string, children ...templ.Component) {
 			class={ "min-w-screen", "min-h-screen", "p-0", "m-0", "font-Ubuntu" }
 		>
 			@header.Header()
-			<div id="main-contents" style="display: contents">
+			<div class="refresher">
+				<div class="loading-bar"></div>
+				<div class="loading-bar"></div>
+				<div class="loading-bar"></div>
+				<div class="loading-bar"></div>
+			</div>
+			<div id="main-contents" class={ "contents" }>
 				for _, child := range children {
 					@child
 				}
@@ -71,6 +78,7 @@ templ Default(title string, children ...templ.Component) {
 			//
 			<script src="/static/js/utils.js"></script>
 			<script src="/static/js/router.js"></script>
+			<script src="/static/js/refresher.js"></script>
 			<script type="module">
 			    function registerServiceWorkers() {
 			    	if (!("serviceWorker" in navigator)) {
diff --git a/app/views/pages/playlist.templ b/app/views/pages/playlist.templ
index 8029602..5bd8bc5 100644
--- a/app/views/pages/playlist.templ
+++ b/app/views/pages/playlist.templ
@@ -19,20 +19,20 @@ templ playlistHeader(pl entities.Playlist) {
 	<div class={ "mb-4", "flex", "justify-between", "items-center" }>
 		@navlink.LinkContainer("/playlists", "Playlists", backButton())
 		<div class={ "flex", "gap-x-2", "items-center" }>
-			<button
-				class={
-					"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
-					"flex", "justify-center", "items-center",
-				}
-				title="Copy link to this playlist"
-				type="button"
-				onClick={ copyLink(pl.IsPublic) }
-			>
-				@icons.ShareLink()
-			</button>
 			if perm, ok := ctx.Value("playlist-permission").(models.PlaylistPermissions); ok && (perm & models.OwnerPermission) != 0 {
-				@playlist.PlaylistsOptionsPopover(pl)
+				@playlist.PlaylistsOptions(pl)
 			} else {
+				<button
+					class={
+						"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
+						"flex", "justify-center", "items-center",
+					}
+					title="Copy link to this playlist"
+					type="button"
+					onClick={ copyLink(pl.IsPublic) }
+				>
+					@icons.ShareLink()
+				</button>
 				@joinLeavePlaylist(pl.PublicId, perm)
 			}
 		</div>
diff --git a/app/views/pages/playlists.templ b/app/views/pages/playlists.templ
index 78413b8..bf0fc19 100644
--- a/app/views/pages/playlists.templ
+++ b/app/views/pages/playlists.templ
@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"dankmuzikk/views/components/navlink"
 	"dankmuzikk/views/components/page"
+	"dankmuzikk/views/icons"
 )
 
 templ Playlists(pls []entities.Playlist) {
@@ -33,8 +34,7 @@ templ JustPlaylists(pls []entities.Playlist) {
 	<div
 		class={
 			"w-full", "overflow-y-scroll", "max-h-[55vh]", "md:max-h-[65vh]",
-			"grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "xl:grid-cols-4", "2xl:grid-cols-5",
-			"gap-x-5", "gap-y-2", "lg:my-10",
+			"flex", "flex-col", "gap-x-5", "gap-y-2", "lg:mt-10",
 		}
 	>
 		for _, playlist := range pls {
@@ -46,19 +46,14 @@ templ JustPlaylists(pls []entities.Playlist) {
 templ singlePlaylist(pl entities.Playlist) {
 	<div
 		class={
-			"lg:w-[200px]", "lg:h-[200px]", "bg-secondary-trans-20", "hover:bg-secondary-trans-30", "rounded-[10px]", "px-5", "py-2",
-			"flex", "flex-row", "lg:flex-col", "lg:justify-center", "items-center", "gap-x-5", "lg:gap-x-0",
+			"hover:bg-secondary-trans-30", "rounded-[10px]", "py-4", "pe-2",
+			"flex", "justify-between", "items-center", "gap-x-5", "lg:gap-x-0",
 		}
 	>
-		<svg class={ "w-[70px] h-[70px] lg:w-[125px]", "lg:h-[125px]" } width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path d="M2.8125 6V54H56.8125V6H2.8125ZM4.81313 8.00063H9.81375V52.0012H4.81313V8.00063ZM54.8119 51.9994H11.8125V7.99875H54.8119V51.9994Z" fill="var(--secondary-color)"></path>
-			<path d="M33.8119 48.9994C44.3119 48.9994 52.8113 40.5 52.8113 30C52.8113 19.5 44.3119 11.0006 33.8119 11.0006C23.3119 11.0006 14.8125 19.5 14.8125 30C14.8125 40.5 23.3119 48.9994 33.8119 48.9994ZM33.8119 12.9994C43.2113 12.9994 50.8125 20.5987 50.8125 30C50.8125 39.4012 43.2131 47.0006 33.8119 47.0006C24.4125 47.0006 16.8112 39.4012 16.8112 30C16.8112 20.5987 24.4106 12.9994 33.8119 12.9994Z" fill="var(--secondary-color)"></path>
-			<path d="M33.8119 36C37.1119 36 39.8119 33.3 39.8119 30C39.8119 26.7 37.1119 24 33.8119 24C30.5119 24 27.8119 26.7 27.8119 30C27.8119 33.3 30.5119 36 33.8119 36ZM33.8119 26.0006C36.0113 26.0006 37.8113 27.8006 37.8113 30C37.8113 32.1994 36.0113 33.9994 33.8119 33.9994C31.6125 33.9994 29.8125 32.1994 29.8125 30C29.8125 27.8006 31.6125 26.0006 33.8119 26.0006Z" fill="var(--secondary-color)"></path>
-			<path d="M34.8131 30C34.8131 30.5531 34.365 30.9994 33.8138 30.9994C33.2625 30.9994 32.8144 30.5513 32.8144 30C32.8144 29.4469 33.2625 29.0006 33.8138 29.0006C34.365 29.0006 34.8131 29.4488 34.8131 30Z" fill="var(--secondary-color)"></path>
-		</svg>
-		<div class={ "lg:text-center" }>
-			<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis", "font-bold", "text-xl" }>{ pl.Title }</p>
-			<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
+		<div class={ "flex", "items-center", "gap-x-4" }>
+			@icons.Playlist()
+			<p class={ "text-lg", "max-w-[230px]", "overflow-hidden", "text-nowrap", "text-ellipsis", "font-bold" }>{ pl.Title }</p>
 		</div>
+		<p class={ "text-md", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
 	</div>
 }