diff --git a/src/modules/album/album.go b/src/modules/album/album.go
index fade5d1..0cd2daf 100644
--- a/src/modules/album/album.go
+++ b/src/modules/album/album.go
@@ -3,6 +3,7 @@ package album
 import (
 	"acide/src/modules/song"
 	"acide/src/utils"
+	"bytes"
 	"encoding/json"
 	"net/http"
 	"sync"
@@ -89,9 +90,9 @@ func albumPage(c echo.Context) error {
 	}
 
 	// convert the song list to json
-	clientSons := make([]ClientSong, len(songs))
+	clientSongs := make([]ClientSong, len(songs))
 	for i, song := range songs {
-		clientSons[i] = ClientSong{
+		clientSongs[i] = ClientSong{
 			Title:   song.Title,
 			Artist:  song.Artist,
 			AlbumId: album.ID,
@@ -99,11 +100,15 @@ func albumPage(c echo.Context) error {
 			SongId:  song.ID,
 		}
 	}
-	clientSongsJson, err := json.Marshal(clientSons)
-	if err != nil {
+
+	var buff bytes.Buffer
+	enc := json.NewEncoder(&buff)
+	enc.SetEscapeHTML(false)
+	if err := enc.Encode(&clientSongs); err != nil {
 		log.Printf("Error marshaling clientSongs: %s", err)
 		return err
 	}
+	clientSongsJson := buff.String()
 
 	return utils.RenderTempl(c, http.StatusOK, albumTempl(albumId, album, songs, string(clientSongsJson)))
 }
diff --git a/src/utils/utils.templ b/src/utils/utils.templ
index eadfa55..6fd9cf6 100644
--- a/src/utils/utils.templ
+++ b/src/utils/utils.templ
@@ -88,33 +88,73 @@ templ MusicPlayer() {
 				volume: 0.1,
 				playing: false,
 				loading: false,
+				progress: 0,
 
+				// sets the queue, and plays the song at idx
 				replaceQueueAndPlayAt(queue, idx) {
 					this.queue = queue;
 					this.idx = idx;
-					this.play();
-				},
-				// Plays the song at the current position
-				async play() {
-					const songId = this.queue[this.idx].songId;
+					this.play(idx);
+
+					// setup the preload and progress listener
+					setInterval(() => this.checkDuration(), 1000);
+				},
+
+				// Plays the song at the passed idx, sets this.idx to that,
+				// and plays a preloaded song
+				// 
+				// If preloaded=true, this function will assume that it is the
+				// next song. It will trust that idx is correct.
+				async play(idx) {
+					const preloaded = this.nextSound !== null && idx === this.idx + 1;
+
+					// if a song is currently playing
+					// then fade it out before playing the next sound
+					if (this.playing === true 
+						&& this.currentSound !== null 
+					) {
+						// this will not trigger when next() is called,
+						// because next() sets this.playing=false
 
-					if (this.currentSound !== null) {
 						this.currentSound.fade(this.volume, 0.0, 250);
 						await wait(250);
-						this.currentSound.unload();
 					}
 
-					const sound = new Howl({
-						src: `https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`,
-						html5: true,
-						volume: this.volume,
-					})
-					this.loading = true;
-					sound.play();
-					let preloadInterval;
-					sound.once("load", () => {
+					this.currentSound?.unload?.();
+					this.playing = false;
+					this.currentSound = null;
+					this.idx = idx;
+
+					// if a song is preloaded, assume it's the next song and play it
+					if (preloaded === true && this.nextSound !== null) {
+						this.currentSound = this.nextSound;
+						this.nextSound = null;
+						this.currentSound.play();
+						this.playing = true;
+					} else {
+						// otherwise, load the song at idx and play it
+						const songId = this.queue[idx].songId;
+
+						const sound = new Howl({
+							src: `https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`,
+							html5: true,
+							volume: this.volume,
+						});
+						this.currentSound = sound;
+						this.loading = true;
+						sound.play();
+						sound.once("load", () => {
+							this.loading = false;
+							this.playing = true;
+						});
+					}
+
+					// set-up preloading for the next song
+					const sound = this.currentSound;
+					sound.once("play", () => {
 						const length = sound.duration();
 						const targetLength = length - 5;
+						let preloadInterval;
 						preloadInterval = setInterval(() => {
 							const pos = sound.seek();
 							if (pos > targetLength) {
@@ -122,22 +162,37 @@ templ MusicPlayer() {
 								clearInterval(preloadInterval);
 							}
 						}, 1000);
-						this.loading = false;
-						this.playing = true;
 					});
+
+					// set-up playing the next song when the current finishes
 					sound.once("end", () => {
 						this.playing = false;
 						this.next();
 					});
 					this.currentSound = sound;
 				},
-				async playNext() {
-					this.currentSound?.unload();
-					this.nextSound.play();
-					this.playing = true;
-					this.currentSound = this.nextSound;
-					this.nextSound = null;
+
+				// checks the duration of the playing song and:
+				// - updates the song progress (0-100%)
+				// - begins preloading
+				checkDuration() {
+					const sound = this.currentSound;
+					if (this.playing) {
+						const length = sound.duration();
+						if (length <= 0) return;
+
+						const position = sound.seek();
+
+						// preload 5s before the song ends
+						if (position >= length - 5 && this.nextSound === null) {
+							this.preload();
+						}
+
+						// update the song progress percentage
+						this.progress = Math.floor((position * 100) / length);
+					}
 				},
+
 				togglePlayPause() {
 					if (this.playing === true) {
 						this.playing = false;
@@ -149,8 +204,7 @@ templ MusicPlayer() {
 				},
 				next() {
 					if (this.idx + 1 < this.queue.length) {
-						this.idx += 1;
-						this.playNext();
+						this.play(this.idx + 1);
 					}
 				},
 				preload() {
@@ -166,30 +220,13 @@ templ MusicPlayer() {
 						volume: 0,
 						preload: true,
 					});
-					// Attempt to play immediately the song, immediately pause it, rewind it and set volume back up
+					// Attempt to immediately play the song, immediately pause it, rewind it and set volume back up
 					nextSound.play();
-
 					let preloadInterval;
 					nextSound.once("load", () => {
 						nextSound.pause();
 						nextSound.seek(0);
 						nextSound.volume(this.volume);
-
-						const length = nextSound.duration();
-						const targetLength = length - 5;
-						preloadInterval = setInterval(() => {
-							const pos = nextSound.seek();
-							if (pos > targetLength) {
-								this.preload();
-								clearInterval(preloadInterval);
-							}
-						}, 1000);
-						this.loading = false;
-						this.playing = true;
-					});
-					nextSound.once("end", () => {
-						this.playing = false;
-						this.next();
 					});
 					this.nextSound = nextSound;
 				}
diff --git a/src/utils/utils_templ.go b/src/utils/utils_templ.go
index 688ecbb..a91ebdc 100644
--- a/src/utils/utils_templ.go
+++ b/src/utils/utils_templ.go
@@ -100,7 +100,7 @@ func MusicPlayer() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\n\t\tdocument.addEventListener('alpine:init', () => {\n\t\t\tAlpine.data(\"player\", () => ({\n\t\t\t\tinit() {\n\t\t\t\t\twindow.replaceQueueAndPlayAt = (...params) => this.replaceQueueAndPlayAt(...params);\n\t\t\t\t},\n\t\t\t\tqueue: [],\n\t\t\t\tidx: 0,\n\t\t\t\tcurrentSound: null,\n\t\t\t\tnextSound: null,\n\t\t\t\tvolume: 0.1,\n\t\t\t\tplaying: false,\n\t\t\t\tloading: false,\n\n\t\t\t\treplaceQueueAndPlayAt(queue, idx) {\n\t\t\t\t\tthis.queue = queue;\n\t\t\t\t\tthis.idx = idx;\n\t\t\t\t\tthis.play();\n\t\t\t\t},\n\t\t\t\t// Plays the song at the current position\n\t\t\t\tasync play() {\n\t\t\t\t\tconst songId = this.queue[this.idx].songId;\n\n\t\t\t\t\tif (this.currentSound !== null) {\n\t\t\t\t\t\tthis.currentSound.fade(this.volume, 0.0, 250);\n\t\t\t\t\t\tawait wait(250);\n\t\t\t\t\t\tthis.currentSound.unload();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst sound = new Howl({\n\t\t\t\t\t\tsrc: `https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`,\n\t\t\t\t\t\thtml5: true,\n\t\t\t\t\t\tvolume: this.volume,\n\t\t\t\t\t})\n\t\t\t\t\tthis.loading = true;\n\t\t\t\t\tsound.play();\n\t\t\t\t\tlet preloadInterval;\n\t\t\t\t\tsound.once(\"load\", () => {\n\t\t\t\t\t\tconst length = sound.duration();\n\t\t\t\t\t\tconst targetLength = length - 5;\n\t\t\t\t\t\tpreloadInterval = setInterval(() => {\n\t\t\t\t\t\t\tconst pos = sound.seek();\n\t\t\t\t\t\t\tif (pos > targetLength) {\n\t\t\t\t\t\t\t\tthis.preload();\n\t\t\t\t\t\t\t\tclearInterval(preloadInterval);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 1000);\n\t\t\t\t\t\tthis.loading = false;\n\t\t\t\t\t\tthis.playing = true;\n\t\t\t\t\t});\n\t\t\t\t\tsound.once(\"end\", () => {\n\t\t\t\t\t\tthis.playing = false;\n\t\t\t\t\t\tthis.next();\n\t\t\t\t\t});\n\t\t\t\t\tthis.currentSound = sound;\n\t\t\t\t},\n\t\t\t\tasync playNext() {\n\t\t\t\t\tthis.currentSound?.unload();\n\t\t\t\t\tthis.nextSound.play();\n\t\t\t\t\tthis.playing = true;\n\t\t\t\t\tthis.currentSound = this.nextSound;\n\t\t\t\t\tthis.nextSound = null;\n\t\t\t\t},\n\t\t\t\ttogglePlayPause() {\n\t\t\t\t\tif (this.playing === true) {\n\t\t\t\t\t\tthis.playing = false;\n\t\t\t\t\t\tthis.currentSound?.pause();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.playing = true;\n\t\t\t\t\t\tthis.currentSound?.play();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tnext() {\n\t\t\t\t\tif (this.idx + 1 < this.queue.length) {\n\t\t\t\t\t\tthis.idx += 1;\n\t\t\t\t\t\tthis.playNext();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tpreload() {\n\t\t\t\t\tconsole.log(\"preloading\");\n\t\t\t\t\tif (!(this.idx + 1 < this.queue.length)) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\n\t\t\t\t\tconst nextSongId = this.queue[this.idx + 1].songId;\n\t\t\t\t\tconst nextSound = new Howl({\n\t\t\t\t\t\tsrc: `https://navidrome.araozu.dev/rest/stream.view?id=${nextSongId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`,\n\t\t\t\t\t\thtml5: true,\n\t\t\t\t\t\tvolume: 0,\n\t\t\t\t\t\tpreload: true,\n\t\t\t\t\t});\n\t\t\t\t\t// Attempt to play immediately the song, immediately pause it, rewind it and set volume back up\n\t\t\t\t\tnextSound.play();\n\n\t\t\t\t\tlet preloadInterval;\n\t\t\t\t\tnextSound.once(\"load\", () => {\n\t\t\t\t\t\tnextSound.pause();\n\t\t\t\t\t\tnextSound.seek(0);\n\t\t\t\t\t\tnextSound.volume(this.volume);\n\n\t\t\t\t\t\tconst length = nextSound.duration();\n\t\t\t\t\t\tconst targetLength = length - 5;\n\t\t\t\t\t\tpreloadInterval = setInterval(() => {\n\t\t\t\t\t\t\tconst pos = nextSound.seek();\n\t\t\t\t\t\t\tif (pos > targetLength) {\n\t\t\t\t\t\t\t\tthis.preload();\n\t\t\t\t\t\t\t\tclearInterval(preloadInterval);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 1000);\n\t\t\t\t\t\tthis.loading = false;\n\t\t\t\t\t\tthis.playing = true;\n\t\t\t\t\t});\n\t\t\t\t\tnextSound.once(\"end\", () => {\n\t\t\t\t\t\tthis.playing = false;\n\t\t\t\t\t\tthis.next();\n\t\t\t\t\t});\n\t\t\t\t\tthis.nextSound = nextSound;\n\t\t\t\t}\n\t\t\t}));\n\t\t})\n\n\t\tfunction wait(ms) {\n\t\t\treturn new Promise(r => setTimeout(r, ms));\n\t\t}\n\t\t</script></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\n\t\tdocument.addEventListener('alpine:init', () => {\n\t\t\tAlpine.data(\"player\", () => ({\n\t\t\t\tinit() {\n\t\t\t\t\twindow.replaceQueueAndPlayAt = (...params) => this.replaceQueueAndPlayAt(...params);\n\t\t\t\t},\n\t\t\t\tqueue: [],\n\t\t\t\tidx: 0,\n\t\t\t\tcurrentSound: null,\n\t\t\t\tnextSound: null,\n\t\t\t\tvolume: 0.1,\n\t\t\t\tplaying: false,\n\t\t\t\tloading: false,\n\t\t\t\tprogress: 0,\n\n\t\t\t\t// sets the queue, and plays the song at idx\n\t\t\t\treplaceQueueAndPlayAt(queue, idx) {\n\t\t\t\t\tthis.queue = queue;\n\t\t\t\t\tthis.idx = idx;\n\t\t\t\t\tthis.play(idx);\n\n\t\t\t\t\t// setup the preload and progress listener\n\t\t\t\t\tsetInterval(() => this.checkDuration(), 1000);\n\t\t\t\t},\n\n\t\t\t\t// Plays the song at the passed idx, sets this.idx to that,\n\t\t\t\t// and plays a preloaded song\n\t\t\t\t// \n\t\t\t\t// If preloaded=true, this function will assume that it is the\n\t\t\t\t// next song. It will trust that idx is correct.\n\t\t\t\tasync play(idx) {\n\t\t\t\t\tconst preloaded = this.nextSound !== null && idx === this.idx + 1;\n\n\t\t\t\t\t// if a song is currently playing\n\t\t\t\t\t// then fade it out before playing the next sound\n\t\t\t\t\tif (this.playing === true \n\t\t\t\t\t\t&& this.currentSound !== null \n\t\t\t\t\t) {\n\t\t\t\t\t\t// this will not trigger when next() is called,\n\t\t\t\t\t\t// because next() sets this.playing=false\n\n\t\t\t\t\t\tthis.currentSound.fade(this.volume, 0.0, 250);\n\t\t\t\t\t\tawait wait(250);\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.currentSound?.unload?.();\n\t\t\t\t\tthis.playing = false;\n\t\t\t\t\tthis.currentSound = null;\n\t\t\t\t\tthis.idx = idx;\n\n\t\t\t\t\t// if a song is preloaded, assume it's the next song and play it\n\t\t\t\t\tif (preloaded === true && this.nextSound !== null) {\n\t\t\t\t\t\tthis.currentSound = this.nextSound;\n\t\t\t\t\t\tthis.nextSound = null;\n\t\t\t\t\t\tthis.currentSound.play();\n\t\t\t\t\t\tthis.playing = true;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// otherwise, load the song at idx and play it\n\t\t\t\t\t\tconst songId = this.queue[idx].songId;\n\n\t\t\t\t\t\tconst sound = new Howl({\n\t\t\t\t\t\t\tsrc: `https://navidrome.araozu.dev/rest/stream.view?id=${songId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`,\n\t\t\t\t\t\t\thtml5: true,\n\t\t\t\t\t\t\tvolume: this.volume,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tthis.currentSound = sound;\n\t\t\t\t\t\tthis.loading = true;\n\t\t\t\t\t\tsound.play();\n\t\t\t\t\t\tsound.once(\"load\", () => {\n\t\t\t\t\t\t\tthis.loading = false;\n\t\t\t\t\t\t\tthis.playing = true;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t// set-up preloading for the next song\n\t\t\t\t\tconst sound = this.currentSound;\n\t\t\t\t\tsound.once(\"play\", () => {\n\t\t\t\t\t\tconst length = sound.duration();\n\t\t\t\t\t\tconst targetLength = length - 5;\n\t\t\t\t\t\tlet preloadInterval;\n\t\t\t\t\t\tpreloadInterval = setInterval(() => {\n\t\t\t\t\t\t\tconst pos = sound.seek();\n\t\t\t\t\t\t\tif (pos > targetLength) {\n\t\t\t\t\t\t\t\tthis.preload();\n\t\t\t\t\t\t\t\tclearInterval(preloadInterval);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 1000);\n\t\t\t\t\t});\n\n\t\t\t\t\t// set-up playing the next song when the current finishes\n\t\t\t\t\tsound.once(\"end\", () => {\n\t\t\t\t\t\tthis.playing = false;\n\t\t\t\t\t\tthis.next();\n\t\t\t\t\t});\n\t\t\t\t\tthis.currentSound = sound;\n\t\t\t\t},\n\n\t\t\t\t// checks the duration of the playing song and:\n\t\t\t\t// - updates the song progress (0-100%)\n\t\t\t\t// - begins preloading\n\t\t\t\tcheckDuration() {\n\t\t\t\t\tconst sound = this.currentSound;\n\t\t\t\t\tif (this.playing) {\n\t\t\t\t\t\tconst length = sound.duration();\n\t\t\t\t\t\tif (length <= 0) return;\n\n\t\t\t\t\t\tconst position = sound.seek();\n\n\t\t\t\t\t\t// preload 5s before the song ends\n\t\t\t\t\t\tif (position >= length - 5 && this.nextSound === null) {\n\t\t\t\t\t\t\tthis.preload();\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// update the song progress percentage\n\t\t\t\t\t\tthis.progress = Math.floor((position * 100) / length);\n\t\t\t\t\t}\n\t\t\t\t},\n\n\t\t\t\ttogglePlayPause() {\n\t\t\t\t\tif (this.playing === true) {\n\t\t\t\t\t\tthis.playing = false;\n\t\t\t\t\t\tthis.currentSound?.pause();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.playing = true;\n\t\t\t\t\t\tthis.currentSound?.play();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tnext() {\n\t\t\t\t\tif (this.idx + 1 < this.queue.length) {\n\t\t\t\t\t\tthis.play(this.idx + 1);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tpreload() {\n\t\t\t\t\tconsole.log(\"preloading\");\n\t\t\t\t\tif (!(this.idx + 1 < this.queue.length)) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\n\t\t\t\t\tconst nextSongId = this.queue[this.idx + 1].songId;\n\t\t\t\t\tconst nextSound = new Howl({\n\t\t\t\t\t\tsrc: `https://navidrome.araozu.dev/rest/stream.view?id=${nextSongId}&v=1.13.0&c=music-to-go&u=fernando&s=49805d&t=4148cd1c83ae1bd01334facf4e70a947`,\n\t\t\t\t\t\thtml5: true,\n\t\t\t\t\t\tvolume: 0,\n\t\t\t\t\t\tpreload: true,\n\t\t\t\t\t});\n\t\t\t\t\t// Attempt to immediately play the song, immediately pause it, rewind it and set volume back up\n\t\t\t\t\tnextSound.play();\n\t\t\t\t\tlet preloadInterval;\n\t\t\t\t\tnextSound.once(\"load\", () => {\n\t\t\t\t\t\tnextSound.pause();\n\t\t\t\t\t\tnextSound.seek(0);\n\t\t\t\t\t\tnextSound.volume(this.volume);\n\t\t\t\t\t});\n\t\t\t\t\tthis.nextSound = nextSound;\n\t\t\t\t}\n\t\t\t}));\n\t\t})\n\n\t\tfunction wait(ms) {\n\t\t\treturn new Promise(r => setTimeout(r, ms));\n\t\t}\n\t\t</script></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -181,7 +181,7 @@ func playIcon(size int) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 250, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 287, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -194,7 +194,7 @@ func playIcon(size int) templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 251, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 288, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -236,7 +236,7 @@ func pauseIcon(size int) templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 271, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 308, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -249,7 +249,7 @@ func pauseIcon(size int) templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 272, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 309, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -291,7 +291,7 @@ func skipForwardIcon(size int) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 280, Col: 67}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 317, Col: 67}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
@@ -304,7 +304,7 @@ func skipForwardIcon(size int) templ.Component {
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 280, Col: 97}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 317, Col: 97}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
@@ -346,7 +346,7 @@ func circleNotchIcon(size int) templ.Component {
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 294, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 331, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
@@ -359,7 +359,7 @@ func circleNotchIcon(size int) templ.Component {
 		var templ_7745c5c3_Var15 string
 		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 295, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 332, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 		if templ_7745c5c3_Err != nil {
@@ -401,7 +401,7 @@ func playlistIcon(size int) templ.Component {
 		var templ_7745c5c3_Var17 string
 		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 310, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 347, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 		if templ_7745c5c3_Err != nil {
@@ -414,7 +414,7 @@ func playlistIcon(size int) templ.Component {
 		var templ_7745c5c3_Var18 string
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 311, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 348, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
@@ -456,7 +456,7 @@ func caretDoubleDownIcon(size int) templ.Component {
 		var templ_7745c5c3_Var20 string
 		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 325, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 362, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 		if templ_7745c5c3_Err != nil {
@@ -469,7 +469,7 @@ func caretDoubleDownIcon(size int) templ.Component {
 		var templ_7745c5c3_Var21 string
 		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(size))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 326, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/utils/utils.templ`, Line: 363, Col: 29}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 		if templ_7745c5c3_Err != nil {