diff --git a/frontend/src/components/home/Summary.tsx b/frontend/src/components/home/Summary.tsx
index 533d315dd..bddd1d2e5 100644
--- a/frontend/src/components/home/Summary.tsx
+++ b/frontend/src/components/home/Summary.tsx
@@ -18,8 +18,9 @@ const Summary: Component<{}> = (p) => {
       <h1>summary</h1>
       <Flex gap="1rem" justifyContent="flex-end" class="wrap">
         <Grid
-          placeItems="center end"
+          placeItems="start end"
           class={combineClasses(s.SummaryItem, "shadow")}
+          gap="0.5rem"
         >
           <h2>servers</h2>
           <Flex gap="0.4rem">
@@ -40,8 +41,9 @@ const Summary: Component<{}> = (p) => {
           </Flex>
         </Grid>
         <Grid
-          placeItems="center end"
+          placeItems="start end"
           class={combineClasses(s.SummaryItem, "shadow")}
+          gap="0.5rem"
         >
           <h2>deployments</h2>
           <Flex gap="0.4rem">
@@ -68,8 +70,9 @@ const Summary: Component<{}> = (p) => {
           </Flex>
         </Grid>
         <Grid
-          placeItems="center end"
+          placeItems="start end"
           class={combineClasses(s.SummaryItem, "shadow")}
+          gap="0.5rem"
         >
           <h2>builds</h2>
           <Flex gap="0.4rem">
diff --git a/frontend/src/util/client.ts b/frontend/src/util/client.ts
index 749afb1f4..3cbf33ff3 100644
--- a/frontend/src/util/client.ts
+++ b/frontend/src/util/client.ts
@@ -99,6 +99,10 @@ export class Client {
     }
   }
 
+  async get_username(user_id: string): Promise<string> {
+    return this.get(`/api/username/${user_id}`);
+  }
+
   exchange_for_jwt(exchange_token: string): Promise<string> {
     return this.post("/auth/exchange", { token: exchange_token });
   }