From f4164ccf24060162b60898e82fe32de306b56520 Mon Sep 17 00:00:00 2001
From: ju09279 <julian.schlueter@studmail.w-hs.de>
Date: Sun, 1 Sep 2024 01:38:52 +0200
Subject: [PATCH] localstorage upgrage, custome colors, fixed broken files
 (encoding issues)

---
 backend/Program.cs                            |  12 +-
 backend/SqliteDB.cs                           |  70 +---------
 backend/default-bg.png                        | Bin 0 -> 3787 bytes
 backend/osudb.cs                              |  10 +-
 backend/shitweb.csproj                        |   6 +
 backend/types.cs                              |  54 +++++---
 frontend/public/default-bg.png                | Bin 0 -> 3787 bytes
 frontend/src/App.vue                          |  15 +-
 frontend/src/assets/base.css                  |  39 +++++-
 frontend/src/assets/main.css                  |   5 +-
 frontend/src/components/ActiveSearchList.vue  |  62 +++++----
 .../src/components/CollectionListItem.vue     |  10 +-
 frontend/src/components/Footer.vue            |  13 +-
 frontend/src/components/NowPlaying.vue        |  42 +++---
 frontend/src/components/SongItem.vue          |  31 +++--
 frontend/src/public                           |   0
 frontend/src/stores/audioStore.ts             |  67 ++++++---
 frontend/src/views/MeView.vue                 | 131 +++++++++++++++++-
 frontend/src/views/NowPlayingView.vue         |  27 ++--
 frontend/src/views/RecentView.vue             |   2 +-
 frontend/src/views/SearchView.vue             |  94 ++++++++-----
 21 files changed, 454 insertions(+), 236 deletions(-)
 create mode 100644 backend/default-bg.png
 create mode 100644 frontend/public/default-bg.png
 create mode 100644 frontend/src/public

diff --git a/backend/Program.cs b/backend/Program.cs
index 2312198..230e6a5 100644
--- a/backend/Program.cs
+++ b/backend/Program.cs
@@ -90,9 +90,8 @@ app.MapGet("/api/v1/audio/{*fileName}", async (string fileName, HttpContext cont
     var decodedFileName = Uri.UnescapeDataString(fileName);
     var filePath = Path.Combine(Osudb.osufolder, "Songs", decodedFileName);
 
-    if (!System.IO.File.Exists(filePath))
+    if (!File.Exists(filePath))
     {
-        Console.WriteLine($"Not Found: {filePath}");
         return Results.NotFound();
     }
 
@@ -125,11 +124,15 @@ app.MapGet("/api/v1/search/artist", async (string? q, int? limit, int? offset) =
 
 app.MapGet("/api/v1/search/songs", async (string? q, int? limit, int? offset) =>
 {
+    var limitv = limit ?? 100;
+    var offsetv = offset ?? 0;
     return Results.Ok();
 });
 
 app.MapGet("/api/v1/search/collections", async (string? q, int? limit, int? offset) =>
 {
+    var limitv = limit ?? 100;
+    var offsetv = offset ?? 0;
     return Results.Ok();
 });
 
@@ -138,10 +141,9 @@ app.MapGet("/api/v1/images/{*filename}", async (string filename, int? h, int? w)
     var decodedFileName = Uri.UnescapeDataString(filename);
     var filePath = Path.Combine(Osudb.osufolder, "Songs", decodedFileName);
 
-    if (!System.IO.File.Exists(filePath))
+    if (!File.Exists(filePath))
     {
-        Console.WriteLine($"Not Found: {filePath}");
-        return Results.NotFound();
+        filePath = "default-bg.png";
     }
 
     var fileExtension = Path.GetExtension(filePath).ToLowerInvariant();
diff --git a/backend/SqliteDB.cs b/backend/SqliteDB.cs
index 67dd38b..c30dedd 100644
--- a/backend/SqliteDB.cs
+++ b/backend/SqliteDB.cs
@@ -184,22 +184,7 @@ namespace shitweb
                     {
                         while (reader.Read())
                         {
-                            string folder = reader.GetString(reader.GetOrdinal("FolderName"));
-                            string file = reader.GetString(reader.GetOrdinal("FileName"));
-                            string audio = reader.GetString(reader.GetOrdinal("AudioFileName"));
-
-                            var img = Osudb.getBG(folder, file);
-                            Song song = new Song(
-                                hash: reader.GetString(reader.GetOrdinal("MD5Hash")),
-                                name: reader.GetString(reader.GetOrdinal("Title")),
-                                artist: reader.GetString(reader.GetOrdinal("Artist")),
-                                length: reader.GetInt32(reader.GetOrdinal("TotalTime")),
-                            url: $"{folder}/{audio}",
-                            previewimage: img,
-                                mapper: reader.GetString(reader.GetOrdinal("Creator"))
-                            );
-
-                            songs.Add(song);
+                            songs.Add(new Song(reader));
                         }
                     }
                 }
@@ -281,23 +266,7 @@ namespace shitweb
                     {
                         while (reader.Read())
                         {
-
-                            string folder = reader.GetString(reader.GetOrdinal("FolderName"));
-                            string file = reader.GetString(reader.GetOrdinal("FileName"));
-                            string audio = reader.GetString(reader.GetOrdinal("AudioFileName"));
-
-                            var img = Osudb.getBG(folder, file);
-                            Song song = new Song(
-                                hash: reader.GetString(reader.GetOrdinal("MD5Hash")),
-                                name: reader.GetString(reader.GetOrdinal("Title")),
-                                artist: reader.GetString(reader.GetOrdinal("Artist")),
-                                length: reader.GetInt32(reader.GetOrdinal("TotalTime")),
-                            url: $"{folder}/{audio}",
-                            previewimage: img,
-                                mapper: reader.GetString(reader.GetOrdinal("Creator"))
-                            );
-
-                            return song;
+                            return new Song(reader);
                         }
                     }
                 }
@@ -336,22 +305,7 @@ namespace shitweb
 
                         while (reader.Read()) {
 
-                            string folder = reader.GetString(reader.GetOrdinal("FolderName"));
-                            string file = reader.GetString(reader.GetOrdinal("FileName"));
-                            string audio = reader.GetString(reader.GetOrdinal("AudioFileName"));
-
-                            var img = Osudb.getBG(folder, file);
-                            Song song = new Song(
-                                hash: reader.GetString(reader.GetOrdinal("MD5Hash")),
-                                name: reader.GetString(reader.GetOrdinal("Title")),
-                                artist: reader.GetString(reader.GetOrdinal("Artist")),
-                                length: reader.GetInt32(reader.GetOrdinal("TotalTime")),
-                            url: $"{folder}/{audio}",
-                            previewimage: img,
-                                mapper: reader.GetString(reader.GetOrdinal("Creator"))
-                            );
-
-                            search.Songs.Add(song);
+                            search.Songs.Add(new Song(reader));
                         }
                     }
                 }
@@ -360,6 +314,7 @@ namespace shitweb
                         Artist
                     FROM Beatmap
                     WHERE Artist LIKE @query
+                    OR Title LIKE @query
                     Group By Artist
                     LIMIT 5";
 
@@ -417,22 +372,7 @@ namespace shitweb
 
                         while (reader.Read())
                         {
-                            string folder = reader.GetString(reader.GetOrdinal("FolderName"));
-                            string file = reader.GetString(reader.GetOrdinal("FileName"));
-                            string audio = reader.GetString(reader.GetOrdinal("AudioFileName"));
-
-                            var img = Osudb.getBG(folder, file);
-                            Song song = new Song(
-                                hash: reader.GetString(reader.GetOrdinal("MD5Hash")),
-                                name: reader.GetString(reader.GetOrdinal("Title")),
-                                artist: reader.GetString(reader.GetOrdinal("Artist")),
-                                length: reader.GetInt32(reader.GetOrdinal("TotalTime")),
-                            url: $"{folder}/{audio}",
-                            previewimage: img,
-                                mapper: reader.GetString(reader.GetOrdinal("Creator"))
-                            );
-
-                            songs.Add(song);
+                            songs.Add(new Song(reader));
                         }
                     }
                 }
diff --git a/backend/default-bg.png b/backend/default-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c31f5a67c026cf01a1e7d11043ffaadb393823f
GIT binary patch
literal 3787
zcmeHKYdn<e79WvY=%<V8AeT(T%$SQ|W?Y6!3?W65!O%pg+(RNvXU3*TQ<JdCvEzh|
zNQg4FtvJ!xxyzkg3WIUmA?JO^hx28h@8`pQKg_(p^~|%@v;J$X|Nohv&Nx`hN~=gi
zAP`xK&B?P6i0BdEy+u+K_=Gt{90R^MXHGj?8Jb#Z!;v@>i=+AmI(jG!(OegS#*)Zz
zw4s5Ki9Xf{LohpLfYX5^(Z;4IBN75<3`1g&h6ET2i!>x6@kA`q97{6S!{AYPl0Meh
z(9{A=Fh$@9Xo8s@8gF21YG7<~423<4K<ntEU`VWv9ujVV(?w!Xcp{EO*25SbL*d{C
zhWZ#I4ABf>NWhtpo7*8!;N**xla|g=p7TS!*P(W=?u;e1A@~C^*5B@}{4j_daMD^I
z>n_PD>bJPnVRb^0N>;GYX|%nOZ?C1LMPV1tzN!wZDd{eA%bap_@_TOUQsj}|kn@Nk
zrZ_PbROVOtn(h2duX|x#wRPh%+OsgH-fQA`raQKN^%UclO@&5PZjtk|0W0IlHBp#r
zY(;p@oxRbxNP?}xx=h4pp||nbv@e~<8i$|yMCYxxrLGnlsG4EB<_q*(p5ORj9#p`!
zR<ZfsjJxkb<s!6WrWG5#d9t(Y^XDEFIoEl~$ln(r=-eb15$);PZ75e#0_8j4TXgnO
z!1NvoF6TC$tFJ-p%8%UX+aFMI1>^GEwo0|rr0q{Dn{v&<@+GKf@I+c?T!l=`QLl@q
zU5d`m+oDEI8!|=GppEo@k3uF_-fx$*s92mD@d14*)*NpSN^DAmpAPW6WN>uIn=IQ8
z37-6=3WNZqnfu2?q^jXulg_0dO>v{Ofk-f1iVf`@A3LYi^vhUT?pmi`=S9$y@lmzV
zIM<1Pzs((X+>EC82#wP%Qm3|1za{meYscpbx5Y{a?7$=W7-cMGDfMAll*Wy3aTT3$
zTFa3!Aap}_;b)eMF;tqb`4cUO{VKC5?g0NFByi1Ln9BJQ-3+lG-4gHWBg$*d)m|)o
zV>nL}190G}>MlujCFG8a@p8<RF4LEIS>k5my+YioHG3@#C!O$N7v3(vYb-LI)Q~Y>
z53@@BY!9C0<|KrxcU!4|AvLOg;a3_b%3QZE%aiBuO$zbZ0sMh4J#(~ES68(!PjW@s
zymoK&^hHO|u0W4+BSLs?6sC;gl01965Wbe21Jj^N2zx*+jIX;k7?Ux6d@#le`}>j^
zWv9yt#Od*)1c|uwqlpD684}&WbFYPfaGc&07uM9!D?cADodBR;9dSJQKOU-4ivIZ!
zQe@4;E3xyfXzHPzufT=~;^Nk!n+sTNyB`>8<I~Te=@YD}1pd!7#5$eIU2wG;-Y&|&
zg4d%=*(rr*04=OgEz<yX7~J6GF}v?VfB2`Vw|r`RS_$q9{Xp1rrtNmSG30^f36ZSq
zxv`YO<RJ760swj*=Mb+um7pPV{YtE2=UwR5B3WGR8PM9=Oi9$2!a&yVI97sSaGcgz
z9MW^ihSos=vVOfn6@|N93sM^9w~ieMV~#NM9A)HUtgL!+!+e@P)&ZqITc!lXehLb<
zPCKS6!Igbqz$j-iFs=BHQ!D5h9UyS*v_ewr;nWitsTH|>oB~JZv|zMUiF9^t%yn9a
z6%b@#8Y=%}-1HF9E&tW6YW_?JHaa=}>cdgm6~ZGD7{Sc7rDclOahS+`7|zuAR=U)i
zc~@=Cm&$#b0%Tp~lYnvCQC3Ocr^Ct9=4=GE2;dxnn)t7UKyoC@IItPq|E#@EN{jcU
zZOOl^1NN-`!~KYF)t{SL3GS@nolgcBVL2;#tbNTPGm{N}275~}UIBC6#dn1HVNR%{
zmcm0%^UGZqwf3K_11ry4cURx=k80dR7JJ^StQymEhy>c_YXxt^7~L?Ipn)7?t|&HW
zx`jX(rDp*@t;mVi+0^aMueaXEg^ii436l4tXHWn-LxWfu=*Ov?G3oQ4%WglzQ(9dm
z7;<3fne_VDR`UWUPRw#a{LpJH7K4;|_0(mnDLL_<K}uR^*m97M#LJMtuJ)+Br@vgm
z$9Jg?KNv$9(0XD4V7~@O+hv4<wD)84r=-7p5cxN&ZG%I2&84YSmT&;p6rx7Gq^V~<
zr9_|cAlF_8PVZbtn#xH_V~iZ2CVk*jn0>A~+w~yy-PbLdZu1ZwdvKQIn<potq-ky|
zrcYk?2su&tiSEYBWH)^Ii4ePyQTB({yg(v2^6u;g$W?`)-dUP-&4X@f-=F-lp<eZG
zM@RJ*^M*jTrAK-#!rSw|HaB_*fXSb<Ph^M?iO3{qbtcH+LodX>avehwCpm#i9_gyk
zZ7pr+>WoK<kcpDJ#n{}2g?RZljCOo=pL^U;ngCh_4$i<E^j`Ii?t@gC_`%4Fw&$L`
z-_{w1L3-w@g{#e1(PPG#`yja~#lUCfHd|Z7El&QpF67RzNipp>MepAOGpHeJ5#)A%
zvLv;N13I;*u(C(GYkXwb%s07ff|in93f4+cZun4M$)E0Z+^oH{OSO;h^JbRnWL4I@
zA7FO;$vJgvLU6f<1L6)s6;6Af6|Azh3D^Jw5G4J6hF~i|+%!~-J*%nKG8@vzOD++i
z*Iy%pt8tUxv%T)Xr9-7vc^HVXUh1Z0C#`I<q#1<o<6gP=hoIotDXq>7k%Lsa=zr`o
zs&7(!wqKseJ31gz#Lf3{)V7!1!aDZ*Wkak0bu$&ING7(aRInI#ch&8Nu#(RU%S3AY
zL)tW)5s%A1v?{XRq>06_%})&70NN}-F*;OrZ1QU=LJg$}o2YGas*sd%od?J725-NP
z#)!nkY7cwejA|2R$9!q5{-r5-&idzHz~wqk-h!VzYARYjN`Yr0q|}0m$1H3+j+GKx
z=XsG+Y57M45aK%@2HXMu@@cMlY;Y>;C~7+L)ki@Dd+P%@JJUJSt=Do!u{SO^v%N(b
zrJyb3NO7H;d7T{nLX#YY@~Pp?wEyWQud&D+po*w-*tk$aaJ#k}>B2SBT4eB{FY7YO
zG9*yF&V`0R!!q&zB82xmNeD?G>qgSW86Ux+RwqgfUQvn~@iL()5*U>6{+*tATc+eL
zty(pUoQcU9G_pA5*{JoUo!=RrU2C%D-2sZp#pS~-dKJ>F+mn)gSf-_A&opHT=b*cO
zb(eKj()Si54C+R%pkT#&TFnBRI*@kIHi}#@Crpyz07l01<B?B9BUiZb&^>UkMGbeR
z;Q8b9><NU{L8b6?AR!L5X$a?;!}76lKv!qG@8zqdDlBat2qq-=@3Q79)3q;M^p@PU
z7TC!W&W0m??za7+%YF%X40=Wj=rCCX8upERLc4->Cw#;4-i7h92h##QKRE^pj4$XY
z-Y2JaTQ&1RcgRegH(4ko7+e>f&+8x(ts7&MQh&AH!YdEo<#qP%I*g_5M|ITk^3v#u
zFTOngD51|{T)yc=y0zT4s{$k+nMwLh^-Ok<g+EC)sDJdSCh<2nOY<fn$>TKxO=Ff{
z*W{-Sx1cTQn>MqNayvU6%77-afpiPzM6<Y#F5(ZNza7!4?0j+9mc>pSY<!vpG<Sqb
zhNx36Y)M?{zUqZ~!Hwh~YTE&E525r`NF4cW{+)0QVw%1$qb6gi`gz0Vij)iq?8Go^
z>^s=HLjgK7YS?!p|E>3h#-~kyzbb2{)g8v{02`NK?-QCqoU1LC_!LCz@COR}I)(E6
z+wuT=MRsn~)8>5I<^BfP6J7KS0YEfDpy{Y?E%#Xd&B*extH$VAbHKRmLB99SRSGqm
zuY7N+`GC=oaBBXt(f@1w`!4+VUHJd{F1&CX6sg1MJEBwYc~djZh%n&aDTHF>aI*9`
GE%85oCk|%-

literal 0
HcmV?d00001

diff --git a/backend/osudb.cs b/backend/osudb.cs
index c6cdfc1..7a453da 100644
--- a/backend/osudb.cs
+++ b/backend/osudb.cs
@@ -144,9 +144,9 @@ public class Osudb
 
             if (match.Success)
             {
-                string background = match.Groups["image_filename"].Value;
+                string background = Uri.EscapeDataString(match.Groups["image_filename"].Value);
 
-                return Path.Combine(songfolder, background);
+                return Path.Combine(Uri.EscapeDataString(songfolder), background);
             }
 
             pattern = @"\d+,\d+,""(?<image_filename>[^""]+\.[a-zA-Z]+)""";
@@ -155,10 +155,10 @@ public class Osudb
 
             if (match.Success)
             {
-                string background = match.Groups["image_filename"].Value;
-                return Path.Combine(songfolder, background);
+                string background = Uri.EscapeDataString(match.Groups["image_filename"].Value);
+                return Path.Combine(Uri.EscapeDataString(songfolder), background);
             }
         }
-        return null;
+        return "default-bg.png";
     }
 }
diff --git a/backend/shitweb.csproj b/backend/shitweb.csproj
index 84f95c5..9026d11 100644
--- a/backend/shitweb.csproj
+++ b/backend/shitweb.csproj
@@ -12,4 +12,10 @@
     <PackageReference Include="System.Drawing.Common" Version="8.0.8" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Update="default-bg.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </None>
+  </ItemGroup>
+
 </Project>
diff --git a/backend/types.cs b/backend/types.cs
index af8ccb6..424cdb0 100644
--- a/backend/types.cs
+++ b/backend/types.cs
@@ -1,6 +1,8 @@
 using OsuParsers.Database.Objects;
 using OsuParsers.Enums.Database;
-using OsuParsers.Enums;
+using OsuParsers.Enums;
+using System.Data.SQLite;
+using System.CodeDom;
 
 public class Song{
     public string hash {get; set;}
@@ -15,13 +17,27 @@ public class Song{
         this.hash = hash; this.name = name; this.artist = artist; this.length = length; this.url = url; this.previewimage = previewimage; this.mapper = mapper;
     }
 
+    public Song(SQLiteDataReader reader) {
+        string folder = reader.GetString(reader.GetOrdinal("FolderName"));
+        string file = reader.GetString(reader.GetOrdinal("FileName"));
+        string audio = reader.GetString(reader.GetOrdinal("AudioFileName"));
+
+        this.hash = reader.GetString(reader.GetOrdinal("MD5Hash"));
+        this.name = reader.GetString(reader.GetOrdinal("Title"));
+        this.artist = reader.GetString(reader.GetOrdinal("Artist"));
+        this.length = reader.GetInt32(reader.GetOrdinal("TotalTime"));
+        this.url = Uri.EscapeDataString($"{folder}/{audio}");
+        this.previewimage = Osudb.getBG(folder, file);
+        this.mapper = reader.GetString(reader.GetOrdinal("Creator"));
+
+    }
 }
 
 public class CollectionPreview{
     public int index { get; set;}
-    public string name {get; set;}
+    public string? name {get; set;}
     public int length {get; set;}
-    public string previewimage {get; set;}
+    public string? previewimage {get; set;}
 
     private CollectionPreview() { }
 
@@ -31,9 +47,9 @@ public class CollectionPreview{
     
 }
 public class Collection{
-    public string name {get; set;}
+    public string? name {get; set;}
     public int length {get; set;}
-    public List<Song> songs { get; set;}
+    public List<Song> songs { get; set;}  = new List<Song>();
 
     private Collection() { }
 
@@ -50,31 +66,31 @@ public class ActiveSearch{
 
 public class Beatmap
 {
-    public string Artist { get; set; }
-    public string ArtistUnicode { get; set; }
-    public string Title { get; set; }
-    public string TitleUnicode { get; set; }
-    public string Creator { get; set; }
-    public string Difficulty { get; set; }
-    public string AudioFileName { get; set; }
-    public string MD5Hash { get; set; }
-    public string FileName { get; set; }
+    public string? Artist { get; set; }
+    public string? ArtistUnicode { get; set; }
+    public string? Title { get; set; }
+    public string? TitleUnicode { get; set; }
+    public string? Creator { get; set; }
+    public string? Difficulty { get; set; }
+    public string? AudioFileName { get; set; }
+    public string? MD5Hash { get; set; }
+    public string? FileName { get; set; }
     public RankedStatus RankedStatus { get; set; }
     public DateTime LastModifiedTime { get; set; }
     public int TotalTime { get; set; }
     public int AudioPreviewTime { get; set; }
     public int BeatmapId { get; set; }
     public int BeatmapSetId { get; set; }
-    public string Source { get; set; }
-    public string Tags { get; set; }
+    public string? Source { get; set; }
+    public string? Tags { get; set; }
     public DateTime LastPlayed { get; set; }
-    public string FolderName { get; set; }
+    public string? FolderName { get; set; }
 }
 
 public class BeatmapSet {
     public int BeatmapSetId { get; set; }
-    public string FolderName { get; set; }
-    public string Creator { get; set; }
+    public string? FolderName { get; set; }
+    public string? Creator { get; set; }
     public DateTime LastModifiedTime { get; set; }
     public List<Beatmap> Beatmaps { get; private set; } = new List<Beatmap>();
 
diff --git a/frontend/public/default-bg.png b/frontend/public/default-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c31f5a67c026cf01a1e7d11043ffaadb393823f
GIT binary patch
literal 3787
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
GE%85oCk|%-

literal 0
HcmV?d00001

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 96f06cd..7ef6981 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -32,11 +32,24 @@ watch(route, async (to) => {
 
 })
 
+function loadColors() {
+
+  document.documentElement.style.setProperty('--background-color', localStorage.getItem('bgColor') || '#1c1719');
+  document.documentElement.style.setProperty('--action-color', localStorage.getItem('actionColor') || '#eab308');
+
+  document.documentElement.style.setProperty('--information-color', localStorage.getItem('infoColor') || '#ec4899');
+  document.documentElement.style.setProperty('--border-color', localStorage.getItem('borderColor') || '#ec4899');
+
+  console.log(localStorage.getItem('bgColor'));
+}
+
+loadColors();
+
 </script>
 
 <template>
 
-  <contentw class="flex flex-col h-screen max-h-screen wrapper text-pink-500 text-xl">
+  <contentw class="flex flex-col h-screen max-h-screen wrapper info text-xl">
 
     <RouterView />
 
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
index 30e041c..acc3bf6 100644
--- a/frontend/src/assets/base.css
+++ b/frontend/src/assets/base.css
@@ -1,5 +1,5 @@
 body {
-    background-color: rgba(28, 23, 25, 0);
+    background-color: var(--background-color);
     margin:0;
     padding: 0;
 }
@@ -28,5 +28,40 @@ min-height: 0px;
 }
 
 .router-link-active {
-    color: #ec4899;
+    color: var(--action-color);
+}
+
+:root {
+  --background-color: rgba(28, 23, 25, 1);
+  --information-color: #ec4899;
+  --border-color: #ec4899;
+  --action-color: #eab308;
+}
+
+.bordercolor {
+  border-color: var(--border-color);
+}
+
+.bg {
+  background-color: var(--background-color)
+}
+
+.action {
+  color: var(--action-color)
+}
+
+.info {
+  color: var(--information-color)
+}
+
+.info:hover {
+  color: var(--information-color)
+}
+
+searcheven {
+    background-color: lighten(var(--background-color),10%);
+}
+
+searchodd {
+    background-color: lighten(var(--background-color),15%);
 }
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index fcb607a..cc632d3 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4,14 +4,13 @@
   max-width: 1280px;
   margin: 0 auto;
   font-weight: normal;
-  background-color: rgba(28, 23, 25, 1);
+  background-color: rgba(--background-color);
 }
 
 a,
 .green {
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  color: rgba(221, 159, 8, 1);
+  color: --information-color;
   transition: 0.4s;
   padding: 3px;
 }
diff --git a/frontend/src/components/ActiveSearchList.vue b/frontend/src/components/ActiveSearchList.vue
index d2ef334..961ac3d 100644
--- a/frontend/src/components/ActiveSearchList.vue
+++ b/frontend/src/components/ActiveSearchList.vue
@@ -8,35 +8,49 @@ import { RouterLink } from 'vue-router';
 const audioStore = useAudioStore()
 
 const props = defineProps<{
-   songs :Song[];
-   artist: string[];
+  songs: Song[];
+  artist: string[];
+  search: string;
 }>();
 
-function update(hash: string){
+function update(hash: string) {
 
-audioStore.setSong(props.songs.at(props.songs.findIndex(s => s.hash==hash)))
+  audioStore.setSong(props.songs.at(props.songs.findIndex(s => s.hash == hash)))
 }
+
+function highlightText(text: string, searchterm: string) {
+  if (!searchterm) return text;
+  const regex = new RegExp(`(${searchterm})`, 'gi');
+  return text.replace(regex, '<span style="color: yellow;">$1</span>');
+}
+
 </script>
 
 <template>
-<div class="h-full overflow-scroll border border-pink-500 rounded-lg bg-gray-800">
-    <h3>Artists</h3>
-    <ul>
-      <li v-for="(artist, index) in props.artist" :key="index">
-        <RouterLink class="flex"  :to="'/search?a=' + artist">{{ artist }}</RouterLink>
-      </li>
-    </ul>
-        <h3>Songs</h3>
-    <ul>
-      <li v-for="(song, index) in props.songs" :key="index">
-        <button @click="update(song.hash)" class="flex">
-            <img class="h-12 w-12" :src="song.previewimage">
-            <div class="flex flex-col">
-            {{ song.name }} - {{ song.artist }}
-            </div>
-        </button>
-    </li>
-    </ul>
+  <div class="h-full w-full overflow-scroll overflow-x-hidden border bordercolor rounded-lg text-xs bg">
+    <div v-if="props.artist && props.artist.length > 0" class="border bordercolor">
+      <h2 class="text-2xl action">Artists</h2>
+      <ul>
+        <li v-for="(artist, index) in props.artist" :key="index" class="rounded-lg">
+          <RouterLink class="flex" :to="'/search?a=' + artist" v-html="highlightText(artist, props.search)">
+          </RouterLink>
+        </li>
+      </ul>
+    </div>
+    <div v-if="props.songs && props.songs.length > 0" class="border bordercolor">
+      <h2 class="text-2xl action">Songs</h2>
+      <ul>
+        <li v-for="(song, index) in props.songs" :key="index" class="rounded-lg">
+          <button @click="update(song.hash)" class="flex">
+            <img :src="encodeURI(song.previewimage + '?h=120&w=120')" class="h-12 w-12"></img>
+            <p class="text-nowrap text-ellipsis overflow-hidden ml-2">
+              <span v-html="highlightText(song.name, search)"></span> - <span
+                v-html="highlightText(song.artist, props.search)"></span>
+            </p>
+          </button>
+        </li>
+      </ul>
+    </div>
 
-</div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/frontend/src/components/CollectionListItem.vue b/frontend/src/components/CollectionListItem.vue
index 0afbaa6..0573115 100644
--- a/frontend/src/components/CollectionListItem.vue
+++ b/frontend/src/components/CollectionListItem.vue
@@ -5,10 +5,10 @@ import { useUserStore } from '@/stores/userStore';
 import { useAudioStore } from '@/stores/audioStore';
 const userStore = useUserStore();
 const audioStore = useAudioStore();
-const props = defineProps<{ collection: CollectionPreview}>();
+const props = defineProps<{ collection: CollectionPreview }>();
 
 
-function hi(){
+function hi() {
 }
 
 </script>
@@ -16,11 +16,11 @@ function hi(){
 <template>
 
   <RouterLink @click.navtive="hi" :to="'/collection/' + props.collection.index">
-    <div class=" border border-pink-500 rounded-lg flex">
+    <div class=" border bordercolor rounded-lg flex">
       <img class="h-20 w-20 m-2 rounded-lg" :src="props.collection.previewimage" loading="lazy" />
       <div class="flex flex-col">
-        <h3 class="self-start text-yellow-500">{{ props.collection.name }}</h3>
-        <h5 class="self-start text-yellow-500 text-sm">{{ props.collection.length }} Songs </h5>
+        <h3 class="self-start info">{{ props.collection.name }}</h3>
+        <h5 class="self-start info text-sm">{{ props.collection.length }} Songs </h5>
       </div>
     </div>
   </RouterLink>
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index f7369b8..ca4f131 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,18 +1,15 @@
 <template>
   <hr>
-  <nav class="flex justify-around my-4 text-xl">
+  <nav class="flex justify-around my-2 text-sm">
     <RouterLink class="p-1 rounded-full backdrop--light shadow-xl hover:text-pink-500" to="/me">
-      <img src="https://a.ppy.sh/14100399" class="h-12 rounded-full">
+      <img src="https://a.ppy.sh/14100399" class="h-6 rounded-full">
     </RouterLink>
 
-    <RouterLink
-      class="flex flex-col justify-center text-2xl p-4 rounded-full backdrop--light shadow-xl hover:text-pink-500"
-      to="/menu"><i class="fa-solid fa-house"></i>
+    <RouterLink class="flex flex-col justify-center p-2 rounded-full backdrop--light shadow-xl info" to="/menu"><i
+        class="fa-solid fa-house"></i>
     </RouterLink>
 
-    <RouterLink
-      class="flex flex-col justify-center text-2xl p-4 rounded-full backdrop--light shadow-xl hover:text-pink-500"
-      to="/search">
+    <RouterLink class="flex flex-col justify-center p-2 rounded-full backdrop--light shadow-xl info" to="/search">
       <i class="fa-solid fa-magnifying-glass"></i>
     </RouterLink>
 
diff --git a/frontend/src/components/NowPlaying.vue b/frontend/src/components/NowPlaying.vue
index 75e9f9f..60efb9d 100644
--- a/frontend/src/components/NowPlaying.vue
+++ b/frontend/src/components/NowPlaying.vue
@@ -9,37 +9,35 @@ const audioStore = useAudioStore();
 <template>
   <div>
     <hr>
-    <div class="relative wrapper p-1 grow text-yellow-500">
-
-      <img :src="encodeURI(audioStore.bgimg + '?h=150&w=400')" class="absolute top-0 left-0 w-full h-full"
+    <div class="relative wrapper p-1 grow action">
+      <img :src="encodeURI(audioStore.bgimg + '?h=150&w=400')" class="w-full absolute top-0 left-0 right-0 h-full"
         :style="{ 'filter': 'blur(2px)', 'opacity': '0.5' }" alt="Background Image" />
 
-      <nav class="relative flex justify-around my-2 z-10">
+      <nav class="relative flex-col z-10">
+
+        <div class="flex justify-between">
+          <RouterLink to="/nowplaying" class="grow overflow-hidden">
+            <p class="relative  text-sm text-left font-bold info overflow-hidden text-ellipsis text-nowrap">
+              {{ audioStore.title }}
+            </p>
+
+            <p class="relative text-sm text-left font-bold info text-nowrap">
+              {{ audioStore.artist }}
+            </p>
+          </RouterLink>
+          <div class="flex flex-col text-center justify-center px-2" @click="audioStore.togglePlay">
+            <i :class="[audioStore.isPlaying ? ' fa-circle-play' : 'fa-circle-pause']" class="text-3xl fa-regular"></i>
+          </div>
 
-        <div class=" grow flex flex-col justify-around text-3xl text-center" to="/menu">
-          <i @click="audioStore.toggleShuffle" :class="[audioStore.shuffle ? 'text-pink-500' : '']"
-            class="fa-solid fa-shuffle"></i>
         </div>
 
-        <div>
-          <div class="flex-col grow text-center justify-center hover:text-pink-500" @click="audioStore.togglePlay">
-            <i :class="[audioStore.isPlaying ? ' fa-circle-play' : 'fa-circle-pause']" class="text-7xl fa-regular"></i>
+        <div class="w-full bg-gray-200 rounded-full h-0.5 dark:bg-gray-700">
+          <div class="bg-blue-600 h-0.5 rounded-full dark:bg-yellow-500"
+            :style="{ 'width': audioStore.percentDone + '%' }">
           </div>
         </div>
 
-        <div class="grow flex flex-col justify-around text-3xl text-center hover:text-pink-500" to="/menu">
-          <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
-            class="fa-solid fa-repeat "></i>
-        </div>
-
       </nav>
-      <RouterLink class="absolute right-2 bottom-2" to="/nowplaying">
-        <i class="fa-solid fa-arrow-up"></i>
-      </RouterLink>
-
-      <marquee class="relative mx-16 text-2xl font-bold text-pink-500" behavior="scroll">{{ audioStore.artist }} - {{
-        audioStore.title
-        }}</marquee>
       <audio controls class="hidden" id="audio-player" :src="audioStore.songSrc"
         @timeupdate="audioStore.update"></audio>
     </div>
diff --git a/frontend/src/components/SongItem.vue b/frontend/src/components/SongItem.vue
index 0161a19..c6fb908 100644
--- a/frontend/src/components/SongItem.vue
+++ b/frontend/src/components/SongItem.vue
@@ -4,7 +4,12 @@ import { useAudioStore } from '@/stores/audioStore';
 import { useUserStore } from '@/stores/userStore';
 import type { Song } from '@/script/types';
 
-const props = defineProps<{ song: Song }>();
+const props = defineProps<{
+  song: Song,
+  action?: string,
+  info?: string,
+  border?: string,
+}>();
 const userStore = useUserStore();
 const audioStore = useAudioStore();
 
@@ -18,17 +23,21 @@ function updateSong() {
 
 <template>
 
-  <div @click="updateSong" class="m-2 border border-pink-500 rounded-lg flex">
-    <img class="h-16 w-16 m-1 rounded-lg" :src="encodeURI(props.song.previewimage + '?h=64&w=64')" loading="lazy" />
-    <div class="flex flex-col">
-      <h3 class="text-nowrap overflow-scroll">
-        <slot name="songName">{{ props.song.name }}</slot>
-      </h3>
-      <h5 class="text-yellow-500 text-sm">
-        <slot name="artist">{{ props.song.artist }}</slot>
+  <div @click="updateSong" :style="{ borderColor: border }" class="m-1 border bordercolor rounded-lg flex">
+    <img class="h-14 w-14 m-1 rounded-lg"
+      :src="encodeURI(props.song?.previewimage ? props.song?.previewimage + '?h=56&w=56' : '/default-bg.png')"
+      loading="lazy" />
+    <div class="flex flex-col overflow-hidden">
+      <p :style="{ color: info }" class="text-nowrap text-ellipsis overflow-hidden text-base info">
+        <slot name="songName">{{ props.song?.name ?? 'Title' }}</slot>
+      </p>
+      <h5 :style="{ color: action }" class="action text-sm text-nowrap text-ellipsis overflow-hidden text-base">
+        <slot name="artist">{{ props.song?.artist ?? 'Artist' }}</slot>
       </h5>
-      <h5 class="text-yellow-500 text-sm">
-        <slot name="length">{{ props.song.length }}</slot>
+      <h5 :style="{ color: action }" class="action text-sm">
+        <slot name="length">{{ Math.floor(props.song?.length ?? 0 / 60000) }}:{{ Math.floor((props.song?.length ?? 0 /
+          1000)
+          % 60).toString().padStart(2, '0') }}</slot>
       </h5>
 
     </div>
diff --git a/frontend/src/public b/frontend/src/public
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/stores/audioStore.ts b/frontend/src/stores/audioStore.ts
index 552796d..4f4dbdd 100644
--- a/frontend/src/stores/audioStore.ts
+++ b/frontend/src/stores/audioStore.ts
@@ -20,6 +20,25 @@ export const useAudioStore = defineStore('audioStore', () => {
   const repeat = ref(false);
 
   const activeCollection = ref<Song[]>([]);
+  const currentSong = ref<Song>(null);
+
+  function saveSongToLocalStorage(song: Song) {
+    localStorage.setItem('lastPlayedSong', JSON.stringify(song));
+  }
+
+  function loadSongFromLocalStorage(): Song | null {
+    const song = localStorage.getItem('lastPlayedSong');
+    return song ? JSON.parse(song) : null;
+  }
+
+  function saveCollectionToLocalStorage(collection: Song[]) {
+    localStorage.setItem('lastActiveCollection', JSON.stringify(collection));
+  }
+
+  function loadCollectionFromLocalStorage(): Song[] | null {
+    const collection = localStorage.getItem('lastActiveCollection');
+    return collection ? JSON.parse(collection) : null;
+  }
 
   function togglePlay() {
     var audio = document.getElementById("audio-player") as HTMLAudioElement;
@@ -37,15 +56,15 @@ export const useAudioStore = defineStore('audioStore', () => {
 
     isPlaying.value = audio.paused;
 
-    let current_min = Math.round(audio.currentTime / 60);
-    let current_sec = (Math.round(audio.currentTime) % 60);
+    let current_min = Math.floor(audio.currentTime / 60);
+    let current_sec = Math.round(audio.currentTime % 60);
 
     if (!isNaN(current_sec) && !isNaN(current_min)) {
       currentTime.value = current_min + ':' + current_sec.toString().padStart(2, '0');
     }
 
-    let duration_min = Math.round(audio.duration / 60);
-    let duration_sec = (Math.round(audio.duration) % 60);
+    let duration_min = Math.floor(audio.duration / 60);
+    let duration_sec = Math.round(audio.duration % 60);
 
     if (!isNaN(duration_sec) && !isNaN(duration_min)) {
       duration.value = duration_min + ':' + duration_sec.toString().padStart(2, '0');
@@ -85,7 +104,6 @@ export const useAudioStore = defineStore('audioStore', () => {
   }
 
   function updateTime() {
-    console.log('currenttime')
 
     var audioslider = document.getElementById("audio-slider") as HTMLInputElement;
 
@@ -96,9 +114,10 @@ export const useAudioStore = defineStore('audioStore', () => {
 
   function togglePrev() {
     let index = activeCollection.value.findIndex(s => s.hash == hash.value);
-    setSong(activeCollection.value[(index - 1) % activeCollection.value.length])
+    setSong(activeCollection.value[Math.abs((index - 1 + activeCollection.value.length) % activeCollection.value.length)])
+
+    console.log(Math.abs((index - 1 + activeCollection.value.length) % activeCollection.value.length))
 
-    console.log('prev')
   }
 
   function toggleNext() {
@@ -123,24 +142,32 @@ export const useAudioStore = defineStore('audioStore', () => {
     repeat.value = !repeat.value;
   }
 
-  function setSong(song: Song) {
+  function setSong(song: Song | null) {
+
+    if (song === null) {
+      return;
+    }
+
     console.log('setSong', song)
     var audio = document.getElementById("audio-player") as HTMLAudioElement;
 
+    songSrc.value = song.url;
+    artist.value = song.artist;
+    title.value = song.name;
+    bgimg.value = song.previewimage;
+    hash.value = song.hash;
+
+    currentSong.value = song;
+    saveSongToLocalStorage(song);
+
+    if (audio === null) { return; }
+
     if (!audio.paused) {
       audio.pause
     }
 
     audio.src = song.url;
 
-    songSrc.value = song.url
-
-    artist.value = song.artist;
-    title.value = song.name;
-    bgimg.value = song.previewimage;
-    hash.value = song.hash;
-
-    console.log("bg", bgimg.value)
 
     audio.addEventListener('canplaythrough', () => {
       audio.play().catch(error => {
@@ -149,10 +176,14 @@ export const useAudioStore = defineStore('audioStore', () => {
     });
   }
 
-  function setCollection(songs: Song[]) {
+  function setCollection(songs: Song[] | null) {
+    if (songs === null) { return; }
     activeCollection.value = songs;
+    saveCollectionToLocalStorage(songs);
   }
 
+  setSong(loadSongFromLocalStorage());
+  setCollection(loadCollectionFromLocalStorage());
 
-  return { setCollection, songSrc, updateTime, artist, title, bgimg, shuffle, repeat, setSong, togglePlay, togglePrev, toggleNext, toggleRepeat, toggleShuffle, isPlaying, currentTime, duration, update, percentDone }
+  return { setCollection, songSrc, updateTime, artist, title, bgimg, shuffle, repeat, setSong, togglePlay, togglePrev, toggleNext, toggleRepeat, toggleShuffle, isPlaying, currentTime, duration, update, percentDone, currentSong }
 })
diff --git a/frontend/src/views/MeView.vue b/frontend/src/views/MeView.vue
index 0462159..a0bdc8f 100644
--- a/frontend/src/views/MeView.vue
+++ b/frontend/src/views/MeView.vue
@@ -1,15 +1,57 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useUserStore } from '@/stores/userStore';
+import SongItem from '../components/SongItem.vue'
+import { useAudioStore } from '@/stores/audioStore';
 
+const audioStore = useAudioStore();
 const userStore = useUserStore();
 
+const bgColor = ref('');
+const actionColor = ref('');
+const infoColor = ref('');
+const borderColor = ref('');
+
 function update() {
   var input = document.getElementById("url-input") as HTMLAudioElement;
   console.log(input.value)
   userStore.baseUrl = input.value;
 
 }
+
+function save(bg: string | null, main: string | null, info: string | null, border: string | null) {
+
+  document.documentElement.style.setProperty('--background-color', bg ?? bgColor.value);
+  document.documentElement.style.setProperty('--action-color', main ?? actionColor.value);
+  document.documentElement.style.setProperty('--information-color', info ?? infoColor.value);
+  document.documentElement.style.setProperty('--border-color', border ?? borderColor.value);
+
+  localStorage.setItem('bgColor', bg ?? bgColor.value);
+  localStorage.setItem('actionColor', main ?? actionColor.value);
+  localStorage.setItem('infoColor', info ?? infoColor.value);
+  localStorage.setItem('borderColor', border ?? borderColor.value);
+
+  console.log("bg", bgColor.value, "action:", actionColor.value, "info", infoColor.value, "border", borderColor.value)
+}
+
+onMounted(() => {
+  reset();
+})
+
+function reset() {
+
+  bgColor.value = localStorage.getItem('bgColor') || '#1c1719';
+  actionColor.value = localStorage.getItem('actionColor') || '#eab308';
+  infoColor.value = localStorage.getItem('infoColor') || '#ec4899';
+  borderColor.value = localStorage.getItem('borderColor') || '#ec4899';
+
+  document.documentElement.style.setProperty('--background-color', bgColor.value);
+  document.documentElement.style.setProperty('--action-color', actionColor.value);
+  document.documentElement.style.setProperty('--information-color', infoColor.value);
+  document.documentElement.style.setProperty('--border-color', borderColor.value);
+
+}
+
 </script>
 
 <template>
@@ -23,8 +65,93 @@ function update() {
     </div>
   </header>
 
-  <main class="flex-1">
+  <main class="flex-1 flex flex-col overflow-scroll">
     <h1> Meeeeee </h1>
     <input @change="update" type="text" id="url-input" :value="userStore.baseUrl" />
+    <br>
+
+    <div class="flex flex-col w-full justify-around p-10">
+      <div class="flex flex-1 justify-between">
+        <p>Background:</p>
+        <input type="color" id="bgPicker" v-model="bgColor" @input="save()"
+          class="appearance-none w-8 h-8 border border-2 p-0 overflow-hidden cursor-pointer">
+      </div>
+
+      <div class="flex flex-1 justify-between">
+        <p>Main:</p>
+        <input type="color" id="actionPicker" v-model="actionColor" @input="save()"
+          class="appearance-none w-8 h-8 border border-2 p-0 overflow-hidden cursor-pointer">
+      </div>
+
+      <div class="flex flex-1 justify-between">
+        <p>Secondary:</p>
+        <input type="color" id="infoPicker" v-model="infoColor" @input="save()"
+          class="appearance-none w-8 h-8 border border-2 p-0 overflow-hidden cursor-pointer">
+      </div>
+
+      <div class="flex flex-1 justify-between">
+        <p>Border:</p>
+        <input type="color" id="borderPicker" v-model="borderColor" @input="save()"
+          class="appearance-none w-8 h-8 border border-2 p-0 overflow-hidden cursor-pointer">
+      </div>
+    </div>
+
+    <div class="w-full p-2">
+      <p>Current</p>
+      <SongItem :song="audioStore.currentSong" />
+    </div>
+
+    <div class="w-full p-2 bg-black">
+      <p class="flex-1 flex justify-between" style=" color : #57db5d">StaryNight <button style="border-color : #b3002d"
+          class="border rounded-lg p-0.5" @click="save('#000000', '#5e2d8f', '#57db5d', '#b3002d')">Choose
+        </button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#b3002d'" :action="'#5e2d8f'" :info="'#57db5d'" />
+    </div>
+    <div class="w-full p-2" style="background-color: #1c1719">
+      <p class="flex-1 flex justify-between" style=" color : #ec4889">Default<button style="border-color : #ec4889"
+          class="border rounded-lg p-0.5" @click="save('#1c1719', '#eab308', '#ec4889', '#ec4889')">Choose
+        </button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#ec4889'" :info="'#ec4889'" :action="'#eab308'" />
+    </div>
+
+    <div class="w-full p-2" style="background-color: #ff4c4c">
+      <p class="flex-1 flex justify-between" style="color: #ffffff">
+        Bright Sunset
+        <button style="border-color: #ffffff" class="border rounded-lg p-0.5"
+          @click="save('#ff4c4c', '#ffcc00', '#ffffff', '#ffffff')">Choose</button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#ffffff'" :info="'#ffffff'" :action="'#ffcc00'" />
+    </div>
+
+    <div class="w-full p-2" style="background-color: #003d00">
+      <p class="flex-1 flex justify-between" style="color: #e0f8d8">
+        Forest Night
+        <button style="border-color: #e0f8d8" class="border rounded-lg p-0.5"
+          @click="save('#003d00', '#a8d5a2', '#e0f8d8', '#e0f8d8')">Choose</button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#e0f8d8'" :info="'#e0f8d8'" :action="'#a8d5a2'" />
+    </div>
+
+    <div class="w-full p-2" style="background-color: #00274d">
+      <p class="flex-1 flex justify-between" style="color: #00ffff">
+        Electric Blue
+        <button style="border-color: #00ffff" class="border rounded-lg p-0.5"
+          @click="save('#00274d', '#0099ff', '#00ffff', '#00ffff')">Choose</button>
+      </p>
+      <SongItem :song="audioStore.currentSong" :border="'#00ffff'" :info="'#00ffff'" :action="'#0099ff'" />
+    </div>
+
   </main>
 </template>
+
+<style scoped>
+input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+input[type='color']::-webkit-color-swatch {
+  border: none;
+}
+</style>
diff --git a/frontend/src/views/NowPlayingView.vue b/frontend/src/views/NowPlayingView.vue
index 84204c2..4ad9fc1 100644
--- a/frontend/src/views/NowPlayingView.vue
+++ b/frontend/src/views/NowPlayingView.vue
@@ -19,17 +19,18 @@ const audioStore = useAudioStore();
     </div>
   </header>
 
-  <main class="flex-1 flex justify-center text-center text-yellow-600">
+  <main class="flex-1 flex justify-center text-center action">
     <div class="flex flex-col justify-around">
       <div class="relative">
         <i class="relative p-36 fa-solid fa-play">
 
-          <img class="h-72 absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg"
-            :src="encodeURI(audioStore.bgimg + '?h=500&w=500')" :key="audioStore.bgimg" />
+          <img class="absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg"
+            :src="encodeURI(audioStore.bgimg + '?h=320&w=320')" :key="audioStore.bgimg" />
         </i>
       </div>
 
-      <div>
+      <div class="h-1/3 flex flex-col justify-center">
+        <div class="flex-1"></div>
         <div>
           <div class="flex w-screen justify-around">
             <i class="fa-solid fa-backward-step text-5xl self-center" @click="audioStore.togglePrev"></i>
@@ -38,23 +39,27 @@ const audioStore = useAudioStore();
             <i class="fa-solid fa-forward-step text-5xl self-center" @click="audioStore.toggleNext"></i>
           </div>
         </div>
-        <div class="flex flex-1 justify-around">
-          <i @click="audioStore.toggleShuffle" :class="[audioStore.shuffle ? 'text-pink-500' : '']"
+        <div class="flex flex-1 justify-around ml-4">
+          <i @click="audioStore.toggleShuffle" :class="[audioStore.shuffle ? 'info' : '']"
             class="fa-solid fa-shuffle"></i>
 
-          <div class="m-4 text-pink-500 max-w-1/2 overflow-idden">
+          <div class="m-4 info flex-1 overflow-idden">
             <p>{{ audioStore.title }}</p>
-            <p>{{ audioStore.artist }}</p>
+            <RouterLink :to="'search?a=' + audioStore.artist">
+
+              {{ audioStore.artist }}
+
+            </RouterLink>
           </div>
-          <div class="flex flex-col justify-between mb-4">
-            <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
+          <div class="flex flex-col justify-between mb-4 mr-4">
+            <i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'info' : '']"
               class="fa-solid fa-repeat"></i>
             <i @click="$router.go(-1);" class="fa-solid fa-arrow-down"></i>
           </div>
         </div>
         <div class="flex">
           <input
-            class="appearance-none mx-4 flex-1 bg-yellow-200 bg-opacity-20 accent-yellow-600 rounded-lg outline-none slider"
+            class="appearance-none mx-4 flex-1 bg-yellow-200 bg-opacity-20 accent-yellow-600 rounded-lg outline-none slider "
             type="range" id="audio-slider" @change="audioStore.updateTime" max="100" :value="audioStore.percentDone">
         </div>
         <div class="flex justify-between mx-4">
diff --git a/frontend/src/views/RecentView.vue b/frontend/src/views/RecentView.vue
index c20fdbb..47c3e4c 100644
--- a/frontend/src/views/RecentView.vue
+++ b/frontend/src/views/RecentView.vue
@@ -35,7 +35,7 @@ const fetchRecent = async () => {
   songs.value = [...songs.value, ...data];
 
   isLoading.value = false;
-  audioStore.setCollection(null);
+  audioStore.setCollection(songs.value);
 }
 
 
diff --git a/frontend/src/views/SearchView.vue b/frontend/src/views/SearchView.vue
index 9ab814f..ddad0f5 100644
--- a/frontend/src/views/SearchView.vue
+++ b/frontend/src/views/SearchView.vue
@@ -15,12 +15,11 @@ const activesongs = ref<Song[]>([]);
 const songs = ref<Song[]>([]);
 const artists = ref<string[]>([]);
 const showSearch = ref(false);
-
-
+const searchTerm = ref('');
 
 onMounted(async () => {
 
-await loadartistifexist();
+  await loadartistifexist();
 
   const container = document.querySelector('.search') as HTMLInputElement;
 
@@ -29,31 +28,43 @@ await loadartistifexist();
       showSearch.value = true;
 
       const target = event.target as HTMLInputElement;
-        if(target.value != undefined && target.value != ""){
-         const data = await userStore.fetchActiveSearch(target.value)
-         router.push({ query: {s: target.value } });
+      if (target.value != undefined && target.value != "") {
+        const data = await userStore.fetchActiveSearch(target.value)
+        router.push({ query: { s: target.value } });
+        searchTerm.value = target.value
 
-         data.songs.forEach(song => {
-            song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
-            song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
-          });
-          
-          activesongs.value = data.songs;
-          audioStore.setCollection(data.songs)
-          artists.value = data.artist;
+        data.songs.forEach(song => {
+          song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
+          song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
+        });
+
+        activesongs.value = data.songs;
+        audioStore.setCollection(data.songs)
+        artists.value = data.artist;
       } else {
-          activesongs.value = [];
-          artists.value = [];
-          showSearch.value = false;
-         
-      }
-    }
-    )}
-      const s =  route.query.s as string;
-      if(s){container.value = s; container.dispatchEvent(new Event('input'))}
-  });
+        activesongs.value = [];
+        artists.value = [];
+        showSearch.value = false;
+        router.push({ query: { s: target.value } });
 
-async function loadartistifexist(){
+      }
+    });
+    container.addEventListener('enter', async (event: Event) => {
+
+      const target = event.target as HTMLInputElement;
+      if (target.value != undefined && target.value != "") {
+        showSearch.value = false
+        const data = await userStore.fetchActiveSearch(target.value)
+
+      }
+    })
+
+  }
+  const s = route.query.s as string;
+  if (s) { container.value = s; container.dispatchEvent(new Event('input')) }
+});
+
+async function loadartistifexist() {
   const query = route.query.a as string;
   if (query) {
     showSearch.value = false;
@@ -62,16 +73,25 @@ async function loadartistifexist(){
     console.log(data);
 
     data.forEach(song => {
-            song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
-            song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
-          });
+      song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
+      song.url = `${userStore.baseUrl}api/v1/audio/${song.url}`;
+    });
 
     songs.value = data;
   }
 }
 
+function emptySearch() {
+  const container = document.querySelector('.search') as HTMLInputElement;
+
+  container.value = "";
+  container.dispatchEvent(new Event('input'))
+  songs.value = [];
+  artists.value = [];
+
+}
 watch(() => route.query.a, async (newQuery) => {
-  
+
   await loadartistifexist();
 
 });
@@ -90,12 +110,18 @@ watch(() => route.query.a, async (newQuery) => {
     </div>
   </header>
   <main class="flex flex-col flex-1 flex-col w-full h-full overflow-scroll">
-    <input placeholder="Type to Search..." class="flex-1 max-h-12 search border border-pink-500 accent-pink-800 bg-yellow-300 bg-opacity-20 rounded-lg m-2 p-2" />
+    <input placeholder="Type to Search..."
+      class="flex-1 max-h-12 search border bordercolor accent-pink-800 bg-yellow-300 bg-opacity-20 rounded-lg m-2 p-2" />
+
+    <div class="absolute h-16 right-4 flex flex-col justify-center">
+      <i @click="emptySearch" class="far fa-times-circle opacity-50"></i>
+    </div>
+
     <div class="relative flex flex-col w-full h-full overflow-scroll">
-      <div v-if="showSearch" class="absolute w-full text-center search-recommendations  z -20">
-         <ActiveSearchList :songs="activesongs" :artist="artists"/>
-      </div>    
-    <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
+      <div v-if="showSearch" class="absolute w-full text-center search-recommendations  z-20">
+        <ActiveSearchList :songs="activesongs" :artist="artists" :search="searchTerm" />
+      </div>
+      <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
     </div>
   </main>
 </template>