diff --git a/SharedProject/Models/UserSetting.cs b/SharedProject/Models/UserSetting.cs
index 3b5fa5f..ec92c9d 100644
--- a/SharedProject/Models/UserSetting.cs
+++ b/SharedProject/Models/UserSetting.cs
@@ -19,4 +19,8 @@ public class UserSetting
     public PlaySetting PlaySetting { get; set; } = new();
     
     public int NotesPosition { get; set; }
+
+    public string MyDonName { get; set; } = String.Empty;
+
+    public string Title { get; set; } = String.Empty;
 }
\ No newline at end of file
diff --git a/TaikoLocalServer/Controllers/Api/UserSettingsController.cs b/TaikoLocalServer/Controllers/Api/UserSettingsController.cs
index 4cde4c2..2396523 100644
--- a/TaikoLocalServer/Controllers/Api/UserSettingsController.cs
+++ b/TaikoLocalServer/Controllers/Api/UserSettingsController.cs
@@ -35,7 +35,9 @@ public class UserSettingsController : BaseController<UserSettingsController>
             IsSkipOn = user.IsSkipOn,
             NotesPosition = user.NotesPosition,
             PlaySetting = PlaySettingConverter.ShortToPlaySetting(user.OptionSetting),
-            ToneId = user.SelectedToneId
+            ToneId = user.SelectedToneId,
+            MyDonName = user.MyDonName,
+            Title = user.Title
         };
         return Ok(response);
     }
@@ -58,6 +60,8 @@ public class UserSettingsController : BaseController<UserSettingsController>
         user.SelectedToneId = userSetting.ToneId;
         user.AchievementDisplayDifficulty = userSetting.AchievementDisplayDifficulty;
         user.OptionSetting = PlaySettingConverter.PlaySettingToShort(userSetting.PlaySetting);
+        user.MyDonName = userSetting.MyDonName;
+        user.Title = userSetting.Title;
 
         context.Update(user);
         await context.SaveChangesAsync();
diff --git a/TaikoWebUI/Pages/Card.razor b/TaikoWebUI/Pages/Card.razor
index 5e17edd..747d593 100644
--- a/TaikoWebUI/Pages/Card.razor
+++ b/TaikoWebUI/Pages/Card.razor
@@ -4,86 +4,110 @@
 @using SharedProject.Models
 @inject HttpClient Client
 
+<MudBreadcrumbs Items="_breadcrumbs" Class="px-0"></MudBreadcrumbs>
+
 <h1>Card: @Baid</h1>
 
 @if (response is not null)
 {
-    <MudStack>
-        <MudSelect @bind-Value="@response.IsDisplayAchievement"
-                   Label="Is Display Achievement Panel">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.IsSkipOn"
-                   Label="Is Skip On">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.IsVoiceOn"
-                   Label="Is Voice On">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.IsDisplayDanOnNamePlate"
-                   Label="Should Dan be Displayed On Name Plate">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
-                   Label="Difficulty Used on Achievement Panel">
-            @foreach (var item in Enum.GetValues<Difficulty>())
-            {
-                <MudSelectItem Value="@item"/>
-            }
-        </MudSelect>
-        <MudSelect @bind-Value="@response.NotesPosition"
-                   Label="Notes Position">
-            @for (var i = -5; i <= 5; i++)
-            {
-                <MudSelectItem Value="@i"/>
-            }
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.RandomType"
-                   Label="Random">
-            @foreach (var item in Enum.GetValues<RandomType>())
-            {
-                <MudSelectItem Value="@item"/>
-            }
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.Speed"
-                   Label="Speed">
-            @for (uint i = 0; i < 15; i++)
-            {
-                var index= i;
-                <MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
-            }
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.IsInverseOn"
-                   Label="Inverse">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.IsVanishOn"
-                   Label="Vanish">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-                        <MudButton Disabled="@isSavingOptions"
-                                   OnClick="SaveOptions"
-                                   Variant="Variant.Filled"
-                                   Color="Color.Info">
-                            @if (isSavingOptions)
-                            {
-                                <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
-                                <MudText Class="ms-2">Saving...</MudText>
-                            }
-                            else
-                            {
-                                <MudIcon Icon="@Icons.Filled.Save"></MudIcon>
-                                <MudText>Save</MudText>
-                            }
-                        </MudButton>
-    </MudStack>
+    <MudGrid>
+        <MudItem xs="12" md="8">
+            <MudPaper Class="py-8 px-8 my-8" Outlined="true">
+                <MudStack Spacing="6">
+                    <h2>Profile Options</h2>
+
+                    <MudTextField @bind-Value="@response.MyDonName" Label="Name" Variant="Variant.Outlined"></MudTextField>
+
+                    <MudTextField @bind-Value="@response.Title" Label="Title" Variant="Variant.Outlined"></MudTextField>
+
+                    <MudSelect @bind-Value="@response.IsDisplayAchievement"
+                           Label="Display Achievement Panel">
+                        <MudSelectItem Value="@true">On</MudSelectItem>
+                        <MudSelectItem Value="@false">Off</MudSelectItem>
+                    </MudSelect>
+
+                    <MudSelect @bind-Value="@response.IsDisplayDanOnNamePlate"
+                           Label="Display Dan Rank on Name Plate">
+                        <MudSelectItem Value="@true">On</MudSelectItem>
+                        <MudSelectItem Value="@false">Off</MudSelectItem>
+                    </MudSelect>
+                    <MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
+                           Label="Achievement Panel Difficulty">
+                        @foreach (var item in Enum.GetValues<Difficulty>())
+                        {
+                            <MudSelectItem Value="@item" />
+                        }
+                    </MudSelect>
+                </MudStack>
+            </MudPaper>
+
+            <MudPaper Class="py-8 px-8 my-8" Outlined="true">
+                <MudStack Spacing="6">
+                    <h2>Song Options</h2>
+                    <MudGrid>
+                        <MudItem xs="12" md="4">
+                            <MudStack Spacing="6">
+                                <MudSwitch @bind-Checked="@response.PlaySetting.IsVanishOn" Label="Vanish" Color="Color.Primary" />
+
+                                <MudSwitch @bind-Checked="@response.PlaySetting.IsInverseOn" Label="Inverse" Color="Color.Primary" />
+
+                                <MudSwitch @bind-Checked="@response.IsSkipOn" Label="Give Up" Color="Color.Primary" />
+
+                                <MudSwitch @bind-Checked="@response.IsVoiceOn" Label="Voice" Color="Color.Primary" />
+                            </MudStack>
+                        </MudItem>
+                        <MudItem xs="12" md="8">
+                            <MudStack Spacing="6">
+                                <MudSelect @bind-Value="@response.PlaySetting.Speed" Label="Speed">
+                                    @for (uint i = 0; i < 15; i++)
+                                    {
+                                        var index = i;
+                                        <MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
+                                    }
+                                </MudSelect>
+
+                                <MudSelect @bind-Value="@response.PlaySetting.RandomType"
+                                       Label="Random">
+                                    @foreach (var item in Enum.GetValues<RandomType>())
+                                    {
+                                        <MudSelectItem Value="@item" />
+                                    }
+                                </MudSelect>
+
+                                <MudSlider Class="mb-8" @bind-Value="@response.NotesPosition" Size="Size.Medium" Min="-5" Max="5" Step="1" TickMarks="true" TickMarkLabels="@notePositionStrings">
+                                    <MudText Typo="Typo.caption">Notes Position</MudText>
+                                </MudSlider>
+                            </MudStack>
+                        </MudItem>
+                    </MudGrid>
+                </MudStack>
+            </MudPaper>
+        </MudItem>
+        <MudItem md="4" xs="12" Class="py-8 px-8 my-4 pt-8">
+            <MudStack Spacing="6" Style="top:100px" Class="sticky">
+                <MudButton Disabled="@isSavingOptions"
+                        OnClick="SaveOptions"
+                        Variant="Variant.Filled"
+                        Color="Color.Primary">
+                    @if (isSavingOptions)
+                    {
+                        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
+                        <MudText Class="ms-2">Saving...</MudText>
+                    }
+                    else
+                    {
+                        <MudIcon Icon="@Icons.Filled.Save" Class="mx-2"></MudIcon>
+                        <MudText>Save</MudText>
+                    }
+                </MudButton>
+            </MudStack>
+        </MudItem>
+    </MudGrid>
+
+    <MudScrollToTop>
+        <MudFab Color="Color.Secondary" Icon="@Icons.Filled.ArrowCircleUp" />
+    </MudScrollToTop>
+
 }
 
 @code {
@@ -94,15 +118,24 @@
     private UserSetting? response;
 
     private bool isSavingOptions;
-        
+
     private readonly string[] speedStrings = { "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "1.9",
         "2.0", "2.5", "3.0", "3.5", "4.0"};
 
+    private readonly string[] notePositionStrings = new string[] { "-5", "-4", "-3", "-2", "-1", "0", "+1", "+2", "+3", "+4", "+5"};
+
+    private List<BreadcrumbItem> _breadcrumbs = new List<BreadcrumbItem>
+    {
+        new BreadcrumbItem("Dashboard", href: "Dashboard"),
+    };
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
         isSavingOptions = false;
         response = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
+
+        _breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true));
     }
 
     private async Task SaveOptions()
@@ -110,6 +143,5 @@
         isSavingOptions = true;
         await Client.PostAsJsonAsync($"api/UserSettings/{Baid}", response);
         isSavingOptions = false;
-    }   
-
+    }  
 }
\ No newline at end of file
diff --git a/TaikoWebUI/Pages/Dashboard.razor b/TaikoWebUI/Pages/Dashboard.razor
index 0d5e42d..1868902 100644
--- a/TaikoWebUI/Pages/Dashboard.razor
+++ b/TaikoWebUI/Pages/Dashboard.razor
@@ -3,45 +3,75 @@
 @inject NavigationManager UriHelper
 
 @page "/Dashboard"
-<MudContainer>
-    @if (response is null)
-    {
-        <MudText>No Data</MudText>
-    }
-    else
-    {
-        <MudGrid>
-            @foreach (var user in response.Users)
-            {
-                <MudItem>
-                    <MudCard>
-                        <MudCardHeader>
-                            <CardHeaderContent>
-                                <MudText Typo="Typo.h5">Baid @user.Baid</MudText>
-                            </CardHeaderContent>
-                            <CardHeaderActions>
-                                <MudIconButton OnClick="() => NavigateToProfile(user.Baid)" Icon="@Icons.Material.Filled.Settings" Color="Color.Default" />
-                            </CardHeaderActions>
-                        </MudCardHeader>
+
+<h1>Dashboard</h1>
+
+<MudGrid Class="my-8">
+@if (response is null)
+{
+    @if (isLoading is true) {
+            @for (uint i = 0; i < 3; i++) {
+                <MudItem xs="12" md="6" lg="4">
+                    <MudCard Outlined="true">
                         <MudCardContent>
-                            <MudText Typo="Typo.h6">Access Code</MudText>
-                            <MudText>@user.AccessCode</MudText>
+                            <MudSkeleton Width="30%" Height="42px;" Class="mb-5" />
+                            <MudSkeleton Width="80%" />
+                            <MudSkeleton Width="100%" />
                         </MudCardContent>
+                        <MudCardActions>
+                            <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
+                                <MudSkeleton Width="64px" Height="40px" />
+                                <MudSkeleton Width="64px" Height="40px" />
+                            </MudStack>
+                        </MudCardActions>
                     </MudCard>
                 </MudItem>
             }
-        </MudGrid>
+    } else {
+        <MudItem xs="12">
+            <MudText Align="Align.Center" Class="my-8">
+                No data.
+            </MudText>
+        </MudItem>
     }
-    
-</MudContainer>
+}
+else
+{
+    @foreach (var user in response.Users)
+    {
+        <MudItem xs="12" md="6" lg="4">
+            <MudCard Outlined="true">
+                <MudCardHeader>
+                    <CardHeaderContent>
+                        <MudText Typo="Typo.h6" Style="font-weight:bold">@user.Baid</MudText>
+                    </CardHeaderContent>
+                </MudCardHeader>
+                <MudCardContent>
+                    <MudText Style="font-weight:bold">Access Code</MudText>
+                    <MudText Style="font-family:monospace">@user.AccessCode</MudText>
+                </MudCardContent>
+                <MudCardActions>
+                    <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
+                        <MudButton Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Delete" Color="Color.Error">Delete</MudButton>
+                        <MudButton OnClick="() => NavigateToProfile(user.Baid)" Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Edit" Color="Color.Primary">Edit</MudButton>
+                    </MudStack>
+                </MudCardActions>
+            </MudCard>
+        </MudItem>
+    }
+}
+</MudGrid>
 
 @code {
     private DashboardResponse? response;
+    private bool isLoading = true;
 
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
         response = await Client.GetFromJsonAsync<DashboardResponse>("api/Dashboard");
+
+        isLoading = false;
     }
 
 
diff --git a/TaikoWebUI/Shared/MainLayout.razor b/TaikoWebUI/Shared/MainLayout.razor
index 22b1ed6..bcd814b 100644
--- a/TaikoWebUI/Shared/MainLayout.razor
+++ b/TaikoWebUI/Shared/MainLayout.razor
@@ -7,9 +7,6 @@
 <MudLayout>
     <MudAppBar Elevation="0">
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())"/>
-        <MudSpacer/>
-        <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank"/>
-        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank"/>
     </MudAppBar>
     <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
         <MudDrawerHeader>
@@ -18,7 +15,7 @@
         <NavMenu/>
     </MudDrawer>
     <MudMainContent>
-        <MudContainer MaxWidth="MaxWidth.Large" Class="my-8 pt-8">
+        <MudContainer MaxWidth="MaxWidth.Large" Class="my-8">
             @Body
         </MudContainer>
     </MudMainContent>
diff --git a/TaikoWebUI/Shared/NavMenu.razor b/TaikoWebUI/Shared/NavMenu.razor
index f3934ee..ca8ebc8 100644
--- a/TaikoWebUI/Shared/NavMenu.razor
+++ b/TaikoWebUI/Shared/NavMenu.razor
@@ -1,6 +1,6 @@
 <MudNavMenu>
-    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
+@*    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
     <MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
-    <MudNavLink Href="fetchdata" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>
+    <MudNavLink Href="fetchdata" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>*@
     <MudNavLink Href="Dashboard" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink>
 </MudNavMenu>
\ No newline at end of file