diff --git a/TaikoWebUI/Pages/Card.razor b/TaikoWebUI/Pages/Card.razor
index 3e4cfbf..eb12392 100644
--- a/TaikoWebUI/Pages/Card.razor
+++ b/TaikoWebUI/Pages/Card.razor
@@ -4,6 +4,8 @@
 @using SharedProject.Models
 @inject HttpClient Client
 
+<MudBreadcrumbs Items="_breadcrumbs" Class="px-0"></MudBreadcrumbs>
+
 <h1>Card: @Baid</h1>
 
 @if (response is not null)
@@ -84,7 +86,7 @@
                 <MudButton Disabled="@isSavingOptions"
                         OnClick="SaveOptions"
                         Variant="Variant.Filled"
-                        Color="Color.Info">
+                        Color="Color.Primary">
                     @if (isSavingOptions)
                     {
                         <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
@@ -99,6 +101,11 @@
             </MudStack>
         </MudItem>
     </MudGrid>
+
+    <MudScrollToTop>
+        <MudFab Color="Color.Secondary" Icon="@Icons.Filled.ArrowCircleUp" />
+    </MudScrollToTop>
+
 }
 
 @code {
@@ -117,11 +124,18 @@
 
     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()
@@ -129,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..25b30d3 100644
--- a/TaikoWebUI/Pages/Dashboard.razor
+++ b/TaikoWebUI/Pages/Dashboard.razor
@@ -3,37 +3,42 @@
 @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>
-                        <MudCardContent>
-                            <MudText Typo="Typo.h6">Access Code</MudText>
-                            <MudText>@user.AccessCode</MudText>
-                        </MudCardContent>
-                    </MudCard>
-                </MudItem>
-            }
-        </MudGrid>
-    }
-    
-</MudContainer>
+
+<h1>Dashboard</h1>
+
+@if (response is null)
+{
+    <MudText Align="Align.Center" Class="my-8">
+        No Data
+    </MudText>
+}
+else
+{
+    <MudGrid Class="my-8">
+        @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;
diff --git a/TaikoWebUI/Shared/MainLayout.razor b/TaikoWebUI/Shared/MainLayout.razor
index 5e54b86..bcd814b 100644
--- a/TaikoWebUI/Shared/MainLayout.razor
+++ b/TaikoWebUI/Shared/MainLayout.razor
@@ -15,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>