diff --git a/apps/backend/src/app/api/v1/internal/metrics/route.tsx b/apps/backend/src/app/api/v1/internal/metrics/route.tsx
index 22295e3b2..9f7884fd2 100644
--- a/apps/backend/src/app/api/v1/internal/metrics/route.tsx
+++ b/apps/backend/src/app/api/v1/internal/metrics/route.tsx
@@ -64,7 +64,7 @@ async function loadTotalUsers(projectId: string, now: Date): Promise<DataPoints>
     GROUP BY ds.registration_day
     ORDER BY ds.registration_day
   `).map((x) => ({
-    date: x.date.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }),
+    date: x.date.toISOString().split('T')[0],
     activity: Number(x.dailyUsers),
   }));
 }
@@ -98,7 +98,7 @@ async function loadDailyActiveUsers(projectId: string, now: Date) {
   `;
 
   return res.map(x => ({
-    date: x.day.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }),
+    date: x.day.toISOString().split('T')[0],
     activity: Number(x.dau),
   }));
 }
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/globe.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/globe.tsx
index 1e85ef9e1..5399022ee 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/globe.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/globe.tsx
@@ -132,12 +132,12 @@ export function GlobeSection({ countryData, totalUsers, children }: {countryData
     >
       <div className='absolute top-0 right-0' style={{
         width: globeSize?.[0] ?? 64,
-        height: globeSize?.[1] ?? 64,
+        height: (globeWindowSize?.height ?? 64) + 16,
       }}>
         {!isGlobeReady && (
           <Skeleton style={{
-            width: Math.min(globeContainerSize?.width ?? 0, globeContainerSize?.height ?? 0) * 2 / 3,
-            height: Math.min(globeContainerSize?.width ?? 0, globeContainerSize?.height ?? 0) * 2 / 3,
+            width: Math.min(globeSize?.[0] ?? 64, (globeWindowSize?.height ?? 64) + 16) * 1.9 / 3,
+            height: Math.min(globeSize?.[0] ?? 64, (globeWindowSize?.height ?? 64) + 16) * 1.9 / 3,
             borderRadius: '100%',
             position: 'absolute',
             top: '50%',
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/line-chart.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/line-chart.tsx
index cca8311f4..4f25d1b51 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/line-chart.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/line-chart.tsx
@@ -1,6 +1,7 @@
 import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { isWeekend } from "@stackframe/stack-shared/dist/utils/dates";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@stackframe/stack-ui";
-import { Area, AreaChart, Pie, PieChart, XAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from "recharts";
 
 export type LineChartDisplayConfig = {
   name: string,
@@ -30,19 +31,29 @@ export function LineChartDisplay({
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <ChartContainer config={config.chart} className='w-full max-h-[300px] p-4'>
-          <AreaChart accessibilityLayer data={datapoints}>
+        <ChartContainer config={config.chart} className='w-full max-h-[300px] p-0 ml-[-30px]'>
+          <BarChart accessibilityLayer data={datapoints}>
+            <CartesianGrid
+              horizontal={true}
+              vertical={false}
+            />
             <ChartTooltip
               content={<ChartTooltipContent labelKey='date'/>}
             />
-            <Area
+            <Bar
               dataKey="activity"
               fill="var(--color-activity)"
-              fillOpacity={0.4}
-              stroke="var(--color-activity)"
-              strokeWidth={2}
-            />
+              fillOpacity={1}
+              isAnimationActive={false}
+            >{datapoints.map(x => (
+              <Cell key={x.date} fillOpacity={isWeekend(new Date(x.date)) ? 0.4 : 1} />
+            ))}</Bar>
 
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              width={60}
+            />
             <XAxis
               dataKey="date"
               tickLine={false}
@@ -50,7 +61,7 @@ export function LineChartDisplay({
               axisLine={false}
               tickFormatter={(value) => value}
             />
-          </AreaChart>
+          </BarChart>
         </ChartContainer>
       </CardContent>
     </Card>
@@ -161,6 +172,7 @@ export function DonutChartDisplay({
               nameKey="method"
               innerRadius={60}
               labelLine={false}
+              isAnimationActive={false}
               label={(x) => `${new Map(Object.entries(BRAND_CONFIG)).get(x.method)?.label ?? x.method}: ${x.count}`}
             />
           </PieChart>
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/page-client.tsx
index d4c668ce7..bfbc3a656 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/page-client.tsx
@@ -1,7 +1,8 @@
 'use client';
 
+import { UserAvatar } from '@stackframe/stack';
 import { fromNow } from '@stackframe/stack-shared/dist/utils/dates';
-import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@stackframe/stack-ui';
+import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableRow, Typography } from '@stackframe/stack-ui';
 import { PageLayout } from "../page-layout";
 import { useAdminApp } from '../use-admin-app';
 import { GlobeSection } from './globe';
@@ -57,19 +58,16 @@ export default function PageClient() {
               </CardHeader>
               <CardContent>
                 <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Display Name</TableHead>
-                      <TableHead>Registered at</TableHead>
-                    </TableRow>
-                  </TableHeader>
                   <TableBody>
-                    {
-                data.recently_registered.map((user: any) => <TableRow key={user.id}>
-                  <TableCell>{user.display_name}</TableCell>
-                  <TableCell>{fromNow(new Date(user.signed_up_at_millis))}</TableCell>
-                </TableRow>)
-                    }
+                    {data.recently_registered.map((user: any) => <TableRow key={user.id}>
+                      <TableCell><UserAvatar user={{ profileImageUrl: user.profile_image_url, displayName: user.display_name, primaryEmail: user.primary_email }} /></TableCell>
+                      <TableCell>
+                        {user.display_name ?? user.primary_email}
+                        <Typography variant='secondary'>
+                          signed up {fromNow(new Date(user.signed_up_at_millis))}
+                        </Typography>
+                      </TableCell>
+                    </TableRow>)}
                   </TableBody>
                 </Table>
               </CardContent>
@@ -80,19 +78,16 @@ export default function PageClient() {
               </CardHeader>
               <CardContent>
                 <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Display Name</TableHead>
-                      <TableHead>Last Active at</TableHead>
-                    </TableRow>
-                  </TableHeader>
                   <TableBody>
-                    {
-                data.recently_active.map((user: any) => <TableRow key={user.id}>
-                  <TableCell>{user.display_name}</TableCell>
-                  <TableCell>{fromNow(new Date(user.last_active_at_millis))}</TableCell>
-                </TableRow>)
-                    }
+                    {data.recently_active.map((user: any) => <TableRow key={user.id}>
+                      <TableCell><UserAvatar user={{ profileImageUrl: user.profile_image_url, displayName: user.display_name, primaryEmail: user.primary_email }} /></TableCell>
+                      <TableCell>
+                        {user.display_name ?? user.primary_email}
+                        <Typography variant='secondary'>
+                          last active {fromNow(new Date(user.last_active_at_millis))}
+                        </Typography>
+                      </TableCell>
+                    </TableRow>)}
                   </TableBody>
                 </Table>
               </CardContent>
diff --git a/packages/stack-shared/src/utils/dates.tsx b/packages/stack-shared/src/utils/dates.tsx
index 9a4a9d8d3..a62d6708f 100644
--- a/packages/stack-shared/src/utils/dates.tsx
+++ b/packages/stack-shared/src/utils/dates.tsx
@@ -1,5 +1,9 @@
 import { remainder } from "./math";
 
+export function isWeekend(date: Date): boolean {
+  return date.getDay() === 0 || date.getDay() === 6;
+}
+
 const agoUnits = [
   [60, 'second'],
   [60, 'minute'],
diff --git a/packages/stack/src/index.tsx b/packages/stack/src/index.tsx
index b3d289172..4fc8ef55d 100644
--- a/packages/stack/src/index.tsx
+++ b/packages/stack/src/index.tsx
@@ -1,24 +1,26 @@
-export { default as StackProvider } from "./providers/stack-provider";
-export { useUser, useStackApp } from "./lib/hooks";
 export { default as StackHandler } from "./components-page/stack-handler";
-export { StackTheme } from './providers/theme-provider';
+export { useStackApp, useUser } from "./lib/hooks";
 export * from './lib/stack-app';
+export { default as StackProvider } from "./providers/stack-provider";
+export { StackTheme } from './providers/theme-provider';
 
-export { SignIn } from "./components-page/sign-in";
-export { SignUp } from "./components-page/sign-up";
-export { EmailVerification } from "./components-page/email-verification";
-export { PasswordReset } from "./components-page/password-reset";
-export { ForgotPassword } from "./components-page/forgot-password";
-export { MessageCard } from "./components/message-cards/message-card";
-export { UserButton } from "./components/user-button";
 export { AccountSettings } from "./components-page/account-settings";
 export { AuthPage } from "./components-page/auth-page";
+export { EmailVerification } from "./components-page/email-verification";
+export { ForgotPassword } from "./components-page/forgot-password";
+export { PasswordReset } from "./components-page/password-reset";
+export { SignIn } from "./components-page/sign-in";
+export { SignUp } from "./components-page/sign-up";
 export { CredentialSignIn as CredentialSignIn } from "./components/credential-sign-in";
 export { CredentialSignUp as CredentialSignUp } from "./components/credential-sign-up";
+export { UserAvatar } from "./components/elements/user-avatar";
 export { MagicLinkSignIn as MagicLinkSignIn } from "./components/magic-link-sign-in";
+export { MessageCard } from "./components/message-cards/message-card";
 export { OAuthButton } from "./components/oauth-button";
 export { OAuthButtonGroup } from "./components/oauth-button-group";
+export { UserButton } from "./components/user-button";
 
 export {
-  SelectedTeamSwitcher,
+  SelectedTeamSwitcher
 } from "./components/selected-team-switcher";
+