diff --git a/TaikoWebUI/Pages/Cards.razor b/TaikoWebUI/Pages/Cards.razor
index 71d8e71..8f0ae41 100644
--- a/TaikoWebUI/Pages/Cards.razor
+++ b/TaikoWebUI/Pages/Cards.razor
@@ -71,7 +71,9 @@
                                              FullWidth="true"
                                              AnchorOrigin="Origin.BottomCenter"
                                              TransformOrigin="Origin.TopCenter">
-                                        <MudMenuItem Href="@($"Cards/{user.Baid}/PlayResults")">Taiko Mode</MudMenuItem>
+                                        <MudMenuItem Href="@($"Cards/{user.Baid}/TaikoMode")">Taiko Mode</MudMenuItem>
+                                        <MudMenuItem Href="@($"Cards/{user.Baid}/DaniDojo")">Dani Dojo</MudMenuItem>
+                                        @*<MudMenuItem Href="@($"Cards/{user.Baid}/AIBattle")">AI Battle</MudMenuItem>*@
                                     </MudMenu>
                                 </MudStack>
                             </MudCardActions>
diff --git a/TaikoWebUI/Pages/DaniDojo.razor b/TaikoWebUI/Pages/DaniDojo.razor
new file mode 100644
index 0000000..d1d37ca
--- /dev/null
+++ b/TaikoWebUI/Pages/DaniDojo.razor
@@ -0,0 +1,50 @@
+@using TaikoWebUI.Services
+@using SharedProject.Models.Responses
+@using SharedProject.Models
+@using SharedProject.Models.Requests
+@using SharedProject.Enums
+@using Throw
+@inject IGameDataService GameDataService
+@inject HttpClient Client
+
+@page "/Cards/{baid:int}/DaniDojo"
+
+<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>
+
+<h1>Dani Dojo</h1>
+<MudText Typo="Typo.caption">Card: @Baid</MudText>
+
+<MudGrid Class="my-8">
+
+</MudGrid>
+
+
+@code {
+
+    [Parameter]
+    public int Baid { get; set; }
+
+    private SongBestResponse? response;
+
+    private const string ICON_STYLE = "width:25px; height:25px;";
+
+    private readonly List<BreadcrumbItem> breadcrumbs = new()
+    {
+        new BreadcrumbItem("Cards", href: "/Cards"),
+    };
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        response = await Client.GetFromJsonAsync<SongBestResponse>($"api/PlayData/{Baid}");
+        response.ThrowIfNull();
+        response.SongBestData.Sort((data1, data2) =>
+        {
+            return GameDataService.GetMusicIndexBySongId(data1.SongId)
+                .CompareTo(GameDataService.GetMusicIndexBySongId(data2.SongId));
+        });
+
+        breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true));
+        breadcrumbs.Add(new BreadcrumbItem("Dani Dojo", href: $"/Cards/{Baid}/DaniDojo", disabled: false));
+    }
+}
\ No newline at end of file
diff --git a/TaikoWebUI/Pages/PlayResults.razor b/TaikoWebUI/Pages/TaikoMode.razor
similarity index 99%
rename from TaikoWebUI/Pages/PlayResults.razor
rename to TaikoWebUI/Pages/TaikoMode.razor
index a049001..f9beb4d 100644
--- a/TaikoWebUI/Pages/PlayResults.razor
+++ b/TaikoWebUI/Pages/TaikoMode.razor
@@ -7,7 +7,7 @@
 @inject IGameDataService GameDataService
 @inject HttpClient Client
 
-@page "/Cards/{baid:int}/PlayResults"
+@page "/Cards/{baid:int}/TaikoMode"
 
 <MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>
 
@@ -131,7 +131,7 @@
         });
 
         breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true));
-        breadcrumbs.Add(new BreadcrumbItem("Taiko Mode", href: $"/Cards/{Baid}/PlayResults", disabled: false));
+        breadcrumbs.Add(new BreadcrumbItem("Taiko Mode", href: $"/Cards/{Baid}/TaikoMode", disabled: false));
     }
 
     private async Task OnFavoriteToggled(SongBestData data)