diff --git a/TaikoWebUI/Pages/DaniDojo.razor b/TaikoWebUI/Pages/DaniDojo.razor
index 05904ef..c772796 100644
--- a/TaikoWebUI/Pages/DaniDojo.razor
+++ b/TaikoWebUI/Pages/DaniDojo.razor
@@ -7,56 +7,64 @@
 
 <h1>Dani Dojo</h1>
 <MudText Typo="Typo.caption">Card: @Baid</MudText>
-<MudContainer>
-    <MudTabs>
-        @for (uint i = 1; i <= 19; i++)
-        {
-            var danId = i;
-            var danData = GameDataService.GetDanDataById(danId);
-            <MudTabPanel Text="@danData.Title">
-                @foreach (var data in danData.OdaiBorderList)
-                {
-                    <MudText>@DanRequirementToString(data)</MudText>
-                }
-                @if (bestDataMap.ContainsKey(danId))
-                {
-                    var danBestData = bestDataMap[danId];
-                    <MudText>Clear state: @danBestData.ClearState </MudText>
-                    <MudText>Best Soul gauge: @danBestData.SoulGaugeTotal </MudText>
-                    <MudText>Best Total Combo: @danBestData.ComboCountTotal </MudText>
-                    <MudGrid>
-                        @foreach (var bestStage in danBestData.DanBestStageDataList)
-                        {
-                            var songNumber = bestStage.SongNumber;
-                            var danDataOdaiSong = danData.OdaiSongList[(int)songNumber];
-                            <MudItem>
-                                <MudText>Song Number: @songNumber</MudText>
-                                <MudText>
-                                    Song Name:
-                                    @GameDataService.GetMusicNameBySongId(danDataOdaiSong.SongNo)
-                                </MudText>
-                                <MudText>Song Difficulty: @((Difficulty)danDataOdaiSong.Level)</MudText>
-                                <MudText>
-                                    Song play detail <br/>
-                                    Good : @bestStage.GoodCount <br/>
-                                    Ok : @bestStage.OkCount <br/>
-                                    Bad : @bestStage.BadCount <br/>
-                                    Combo : @bestStage.ComboCount<br/>
-                                    Drumroll : @bestStage.DrumrollCount <br/>
-                                    Total hit : @bestStage.TotalHitCount
-                                </MudText>
-                            </MudItem>
-                        }
-                    </MudGrid>
 
-                }
-                else
+<MudGrid Class="my-4">
+    <MudItem xs="12">
+        <MudPaper Elevation="0" Outlined="true">
+            <MudTabs>
+                @for (uint i = 1; i <= 19; i++)
                 {
-                    <MudText>
-                        This dan course hasn't been played
-                    </MudText>
+                    var danId = i;
+                    var danData = GameDataService.GetDanDataById(danId);
+                    <MudTabPanel Text="@GetDanTitle(danData.Title)">
+                        <MudGrid Class="px-12 py-8">
+                            @if (!bestDataMap.ContainsKey(danId)) {
+                                <MudItem xs="12">
+                                    <MudAlert Severity="Severity.Info">This dan course hasn't been played yet.</MudAlert>
+                                </MudItem>
+                            }
+                            <MudItem xs="12">
+                                @foreach (var data in danData.OdaiBorderList)
+                                {
+                                    <MudText>@DanRequirementToString(data)</MudText>
+                                }
+                                @if (bestDataMap.ContainsKey(danId))
+                                {
+                                    var danBestData = bestDataMap[danId];
+                                    <MudText>Clear state: @danBestData.ClearState </MudText>
+                                    <MudText>Best Soul gauge: @danBestData.SoulGaugeTotal </MudText>
+                                    <MudText>Best Total Combo: @danBestData.ComboCountTotal </MudText>
+                                    <MudGrid>
+                                        @foreach (var bestStage in danBestData.DanBestStageDataList)
+                                        {
+                                            var songNumber = bestStage.SongNumber;
+                                            var danDataOdaiSong = danData.OdaiSongList[(int)songNumber];
+                                            <MudItem>
+                                                <MudText>Song Number: @songNumber</MudText>
+                                                <MudText>
+                                                    Song Name:
+                                                    @GameDataService.GetMusicNameBySongId(danDataOdaiSong.SongNo)
+                                                </MudText>
+                                                <MudText>Song Difficulty: @((Difficulty)danDataOdaiSong.Level)</MudText>
+                                                    <MudText>
+                                                        Song play detail <br />
+                                                        Good : @bestStage.GoodCount <br />
+                                                        Ok : @bestStage.OkCount <br />
+                                                        Bad : @bestStage.BadCount <br />
+                                                        Combo : @bestStage.ComboCount<br />
+                                                        Drumroll : @bestStage.DrumrollCount <br />
+                                                        Total hit : @bestStage.TotalHitCount
+                                                    </MudText>
+                                                </MudItem>
+                                        }
+                                    </MudGrid>
+
+                                }
+                            </MudItem>
+                        </MudGrid>
+                    </MudTabPanel>
                 }
-            </MudTabPanel>
-        }
-    </MudTabs>
-</MudContainer>
\ No newline at end of file
+            </MudTabs>
+        </MudPaper>
+    </MudItem>
+</MudGrid>
\ No newline at end of file
diff --git a/TaikoWebUI/Pages/DaniDojo.razor.cs b/TaikoWebUI/Pages/DaniDojo.razor.cs
index c711f80..7bfdf7b 100644
--- a/TaikoWebUI/Pages/DaniDojo.razor.cs
+++ b/TaikoWebUI/Pages/DaniDojo.razor.cs
@@ -37,4 +37,32 @@ public partial class DaniDojo
             _ => throw new ArgumentOutOfRangeException()
         };
     }
+
+    private static string GetDanTitle(string title)
+    {
+        return title switch
+        {
+            "5kyuu" => "Fifth Kyuu",
+            "4kyuu" => "Fourth Kyuu",
+            "3kyuu" => "Third Kyuu",
+            "2kyuu" => "Second Kyuu",
+            "1kyuu" => "First Kyuu",
+            "1dan"  => "First Dan",
+            "2dan"  => "Second Dan",
+            "3dan"  => "Third Dan",
+            "4dan"  => "Fourth Dan",
+            "5dan"  => "Fifth Dan",
+            "6dan"  => "Sixth Dan",
+            "7dan"  => "Seventh Dan",
+            "8dan"  => "Eighth Dan",
+            "9dan"  => "Ninth Dan",
+            "10dan" => "Tenth Dan",
+            "11dan" => "Kuroto",
+            "12dan" => "Meijin",
+            "13dan" => "Chojin",
+            "14dan" => "Tatsujin",
+            "15dan" => "Gaiden",
+            _ => ""
+        };
+    }
 }
\ No newline at end of file
diff --git a/TaikoWebUI/Pages/TaikoMode.razor b/TaikoWebUI/Pages/TaikoMode.razor
index fcb4d98..8e8d82c 100644
--- a/TaikoWebUI/Pages/TaikoMode.razor
+++ b/TaikoWebUI/Pages/TaikoMode.razor
@@ -99,7 +99,7 @@
                             {
                                 <MudGrid>
                                     <MudItem xs="12">
-                                        <MudText Align="Align.Center" Class="my-8">
+                                        <MudText Align="Align.Center" Class="my-16">
                                             No data for selected difficulty.
                                         </MudText>
                                     </MudItem>
diff --git a/TaikoWebUI/wwwroot/index.html b/TaikoWebUI/wwwroot/index.html
index d406c4e..e3ed8a1 100644
--- a/TaikoWebUI/wwwroot/index.html
+++ b/TaikoWebUI/wwwroot/index.html
@@ -8,13 +8,6 @@
     <base href="/" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
-    <style>
-        .difficulty-tab .mud-badge.mud-badge-top.right {
-            inset: auto auto calc(100% - 8px) 100%;
-            font-size: 10px;
-            height: 18px;
-        }
-    </style>
 </head>
 
 <body>