diff --git a/TaikoWebUI/Components/UserCard.razor b/TaikoWebUI/Components/UserCard.razor
index 7651016..9256fe6 100644
--- a/TaikoWebUI/Components/UserCard.razor
+++ b/TaikoWebUI/Components/UserCard.razor
@@ -9,7 +9,7 @@
 
 @if (User is not null)
 {
-    <MudCard Outlined="true">
+    <MudCard Outlined="true" Class="user-card">
         <MudCardHeader>
             <CardHeaderContent>
                 <div style="display:flex;flex-wrap:wrap;align-items:center;gap:5px;">
diff --git a/TaikoWebUI/wwwroot/css/app.css b/TaikoWebUI/wwwroot/css/app.css
index 0f4f16c..632433f 100644
--- a/TaikoWebUI/wwwroot/css/app.css
+++ b/TaikoWebUI/wwwroot/css/app.css
@@ -299,4 +299,11 @@ tr.is-current-user p {
 .mud-breadcrumb-item.mud-disabled a,
 .mud-breadcrumb-separator span {
     color: rgba(255, 255, 255, 0.6);
+}
+
+.user-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
 }
\ No newline at end of file