diff --git a/TaikoWebUI/Pages/Songs.razor b/TaikoWebUI/Pages/Songs.razor
index acf5a4b..bada4e7 100644
--- a/TaikoWebUI/Pages/Songs.razor
+++ b/TaikoWebUI/Pages/Songs.razor
@@ -3,7 +3,9 @@
 @inject LoginService LoginService
 @inject IJSRuntime JSRuntime
 @inject NavigationManager NavigationManager
-@using TaikoWebUI.Utilities
+@using TaikoWebUI.Utilities;
+@using TaikoWebUI.Shared.Models;
+@using SharedProject.Enums;
 
 @page "/Users/{baid:int}/Songs"
 
@@ -33,18 +35,53 @@
         else
         {
             <MudItem xs="12">
-                <MudTable Items="musicMap" Elevation="0" Outlined="true">
+                <MudTable Items="musicMap" Elevation="0" Outlined="true" Filter="@FilterSongs" Striped="true">
+                    <ToolBarContent>
+                        <MudGrid Spacing="2">
+                            <MudItem xs="12" md="8">
+                                <MudTextField @bind-Value="Search"
+                                              Placeholder="@Localizer["Search by Title or Artist"]"
+                                              Variant="Variant.Outlined"
+                                              Margin="Margin.Dense"
+                                              Adornment="Adornment.Start"
+                                              AdornmentIcon="@Icons.Material.Filled.Search"
+                                              IconSize="Size.Medium" />
+                            </MudItem>
+                            <MudItem xs="12" md="4">
+                                <MudSelect @bind-Value="GenreFilter" T="string" Label="@Localizer["Filter by Genre"]" Variant="Variant.Outlined" Margin="Margin.Dense" Clearable="true">
+                                    @foreach (var genre in Enum.GetValues(typeof(SongGenre)))
+                                    {
+                                        var genreValue = (SongGenre)genre;
+                                        <MudSelectItem Value="@genreValue.ToString()" Label="@Localizer[$"Key_{genreValue}"]">
+                                            @ScoreUtils.GetGenreTitle(genreValue)
+                                    </MudSelectItem>
+                                    }
+                                </MudSelect>
+                            </MudItem>
+                        </MudGrid>
+                    </ToolBarContent>
                     <HeaderContent>
-                        <MudTh>Title</MudTh>
+                        <MudTh>
+                            <MudTableSortLabel T="MusicDetail" SortBy="context => GameDataService.GetMusicNameBySongId(context.SongId, CurrentLanguage)">
+                                Song Title / Artist
+                            </MudTableSortLabel>
+                        </MudTh>
                     </HeaderContent>
                     <RowTemplate>
-                        <MudTh>
+                        <MudTd>
                             <a href="@($"/Users/{Baid}/Songs/{context.SongId}")">
-                                <MudText Typo="Typo.body2" Style="font-weight:bold">@context.SongNameEN</MudText>
-                                <MudText Typo="Typo.caption">@context.ArtistNameEN</MudText>
+                                <MudText Typo="Typo.body2">
+                                    @GameDataService.GetMusicNameBySongId(context.SongId, CurrentLanguage)
+                                </MudText>
+                                <MudText Typo="Typo.caption">
+                                    @GameDataService.GetMusicArtistBySongId(context.SongId, CurrentLanguage)
+                                </MudText>
 							</a>
-                        </MudTh>
+                        </MudTd>
                     </RowTemplate>
+                    <PagerContent>
+                        <MudTablePager />
+                    </PagerContent>
                 </MudTable>
             </MudItem>
         }
diff --git a/TaikoWebUI/Pages/Songs.razor.cs b/TaikoWebUI/Pages/Songs.razor.cs
index 598d150..6b916ed 100644
--- a/TaikoWebUI/Pages/Songs.razor.cs
+++ b/TaikoWebUI/Pages/Songs.razor.cs
@@ -1,6 +1,7 @@
 using Microsoft.JSInterop;
 using TaikoWebUI.Shared.Models;
 
+
 namespace TaikoWebUI.Pages;
 
 public partial class Songs
@@ -10,6 +11,10 @@ public partial class Songs
 
     private const string IconStyle = "width:25px; height:25px;";
 
+    private string Search { get; set; } = string.Empty;
+    private string GenreFilter { get; set; } = string.Empty;
+    private string CurrentLanguage { get; set; } = "ja";
+
     private SongBestResponse? response;
     private UserSetting? userSetting;
 
@@ -26,27 +31,9 @@ public partial class Songs
         response.ThrowIfNull();
 
         userSetting = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
-
-        var language = await JSRuntime.InvokeAsync<string>("blazorCulture.get");
-
         musicMap = GameDataService.GetMusicList();
 
-        response.SongBestData.ForEach(data =>
-        {
-            var songId = data.SongId;
-            data.Genre = GameDataService.GetMusicGenreBySongId(songId);
-            data.MusicName = GameDataService.GetMusicNameBySongId(songId, string.IsNullOrEmpty(language) ? "ja" : language);
-            data.MusicArtist = GameDataService.GetMusicArtistBySongId(songId, string.IsNullOrEmpty(language) ? "ja" : language);
-        });
-
-        songBestDataMap = response.SongBestData.GroupBy(data => data.Difficulty)
-            .ToDictionary(data => data.Key,
-                          data => data.ToList());
-        foreach (var songBestDataList in songBestDataMap.Values)
-        {
-            songBestDataList.Sort((data1, data2) => GameDataService.GetMusicIndexBySongId(data1.SongId)
-                                      .CompareTo(GameDataService.GetMusicIndexBySongId(data2.SongId)));
-        }
+        CurrentLanguage = await JSRuntime.InvokeAsync<string>("blazorCulture.get");
 
         if (LoginService.IsLoggedIn && !LoginService.IsAdmin)
         {
@@ -75,8 +62,30 @@ public partial class Songs
         }
     }
 
-    private static void ToggleShowAiData(SongBestData data)
+    private bool FilterSongs(MusicDetail musicDetail)
     {
-        data.ShowAiData = !data.ShowAiData;
+        var stringsToCheck = new List<string>
+        {
+            musicDetail.SongName,
+            musicDetail.SongNameEN,
+            musicDetail.SongNameCN,
+            musicDetail.SongNameKO,
+            musicDetail.ArtistName,
+            musicDetail.ArtistNameEN,
+            musicDetail.ArtistNameCN,
+            musicDetail.ArtistNameKO
+        };
+
+        if (!string.IsNullOrEmpty(Search) && !stringsToCheck.Any(s => s.Contains(Search, StringComparison.OrdinalIgnoreCase)))
+        {
+            return false;
+        }
+
+        if (!string.IsNullOrEmpty(GenreFilter) && musicDetail.Genre != Enum.Parse<SongGenre>(GenreFilter))
+        {
+            return false;
+        }
+
+        return true;
     }
 }
diff --git a/TaikoWebUI/wwwroot/style.overrides.css b/TaikoWebUI/wwwroot/style.overrides.css
index 2db0f6d..ec847ef 100644
--- a/TaikoWebUI/wwwroot/style.overrides.css
+++ b/TaikoWebUI/wwwroot/style.overrides.css
@@ -20,6 +20,12 @@
     color: #333;
 }
 
+.mud-table-toolbar {
+    flex-wrap: wrap;
+    height: inherit;
+    padding: 20px 10px;
+}
+
 .color-box {
     width: 16px;
     height: 16px;