diff --git a/app/discord/activityTracker.ts b/app/discord/activityTracker.ts
index 930744c..61be161 100644
--- a/app/discord/activityTracker.ts
+++ b/app/discord/activityTracker.ts
@@ -73,8 +73,8 @@ async function getMessageStats(msg: Message | PartialMessage) {
   }
   const { content } = await msg.fetch();
   return {
-    char_count: content?.length ?? 0,
-    word_count: content?.split(/\s+/).length ?? 0,
+    char_count: getChars(content).length,
+    word_count: getWords(content).length,
     react_count: msg.reactions.cache.size,
     sent_at: msg.createdTimestamp,
   };
@@ -97,3 +97,19 @@ export async function reportByGuild(guildId: string) {
     .execute();
   return result;
 }
+
+// this is better than string.split(/\s+/) because it counts emojis as 1 word
+// and we can easily filter them, works much better in other languages too
+function getWords(content: string) {
+  return Array.from(
+    new Intl.Segmenter("en-us", { granularity: "word" }).segment(content),
+  ).filter((seg) => seg.isWordLike);
+}
+
+// string.split(/\s+/) will count most emojis as 2+ chars
+// this will count them as 1
+function getChars(content: string) {
+  return Array.from(
+    new Intl.Segmenter("en-us", { granularity: "grapheme" }).segment(content),
+  );
+}
diff --git a/app/routes.ts b/app/routes.ts
index 402d627..034ae24 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -3,7 +3,8 @@ import { route, layout } from "@react-router/dev/routes";
 
 export default [
   layout("routes/__auth.tsx", [
-    route("dashboard", "routes/__auth/dashboard.tsx"),
+    route(":guildId/sh", "routes/__auth/dashboard.tsx"),
+    route(":guildId/sh/:userId", "routes/__auth/sh-user.tsx"),
     route("login", "routes/__auth/login.tsx"),
     route("test", "routes/__auth/test.tsx"),
   ]),
diff --git a/app/routes/__auth/dashboard.tsx b/app/routes/__auth/dashboard.tsx
index eac9239..e709c37 100644
--- a/app/routes/__auth/dashboard.tsx
+++ b/app/routes/__auth/dashboard.tsx
@@ -1,26 +1,31 @@
 import type { LoaderFunction } from "react-router";
-import { data, useLoaderData, useNavigation } from "react-router";
+import {
+  data,
+  useLoaderData,
+  useNavigation,
+  useSearchParams,
+  Link,
+} from "react-router";
 import type { LabelHTMLAttributes, PropsWithChildren } from "react";
 import { getTopParticipants } from "#~/models/activity.server";
 
 export const loader = async ({
   request,
   // context,
-  // params,
+  params,
 }: Parameters<LoaderFunction>[0]) => {
   // const user = await getUser(request);
   const url = new URL(request.url);
   const start = url.searchParams.get("start");
   const end = url.searchParams.get("end");
+  const guildId = params.guildId;
 
-  if (!start || !end) {
+  if (!(guildId && start && end)) {
     return data(null, { status: 400 });
   }
 
-  const REACTIFLUX_GUILD_ID = "102860784329052160";
-
   const output = await getTopParticipants(
-    REACTIFLUX_GUILD_ID,
+    guildId,
     start,
     end,
     [],
@@ -41,16 +46,16 @@ const percent = new Intl.NumberFormat("en-US", {
   maximumFractionDigits: 0,
 }).format;
 
-function RangeForm() {
+function RangeForm({ values }: { values: { start?: string; end?: string } }) {
   return (
     <form method="GET">
       <Label>
         Start date
-        <input name="start" type="date" />
+        <input name="start" type="date" defaultValue={values.start} />
       </Label>
       <Label>
         End date
-        <input name="end" type="date" />
+        <input name="end" type="date" defaultValue={values.end} />
       </Label>
       <input type="submit" value="Submit" />
     </form>
@@ -68,16 +73,20 @@ const DataHeading = ({ children }: PropsWithChildren) => {
 export default function DashboardPage() {
   const nav = useNavigation();
   const data = useLoaderData<typeof loader>();
+  const [qs] = useSearchParams();
 
   if (nav.state === "loading") {
     return "loading…";
   }
 
+  const start = qs.get("start") ?? undefined;
+  const end = qs.get("end") ?? undefined;
+
   if (!data) {
     return (
       <div>
         <div className="flex min-h-full justify-center">
-          <RangeForm />
+          <RangeForm values={{ start, end }} />
         </div>
         <div></div>
       </div>
@@ -87,7 +96,7 @@ export default function DashboardPage() {
   return (
     <div>
       <div className="flex min-h-full justify-center">
-        <RangeForm />
+        <RangeForm values={{ start, end }} />
       </div>
       <div>
         <textarea
@@ -118,7 +127,16 @@ ${data
           <tbody>
             {data.map((d) => (
               <tr key={d.data.member.author_id}>
-                <td>{d.data.member.author_id}</td>
+                <td>
+                  <Link
+                    to={{
+                      pathname: d.data.member.author_id,
+                      search: `?start=${start}&end=${end}`,
+                    }}
+                  >
+                    {d.data.member.author_id}
+                  </Link>
+                </td>
                 <td>{percent(d.metadata.percentZeroDays)}</td>
                 <td>{d.data.member.total_word_count}</td>
                 <td>{d.data.member.message_count}</td>
diff --git a/app/routes/__auth/sh-user.tsx b/app/routes/__auth/sh-user.tsx
new file mode 100644
index 0000000..6bcc288
--- /dev/null
+++ b/app/routes/__auth/sh-user.tsx
@@ -0,0 +1,252 @@
+import type { Route } from "./+types/sh-user";
+import db from "#~/db.server";
+import { type LoaderFunctionArgs, Link, useSearchParams } from "react-router";
+import {
+  ComposedChart,
+  // Line,
+  // Area,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  // Scatter,
+  ResponsiveContainer,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Radar,
+} from "recharts";
+import { useMemo } from "react";
+import { sql } from "kysely";
+
+export async function loader({ request, params }: LoaderFunctionArgs) {
+  const { guildId, userId } = params;
+  if (!guildId || !userId) {
+    throw new Error("cannot load data without user_id and guild_id");
+  }
+
+  const url = new URL(request.url);
+  const start = url.searchParams.get("start");
+  const end = url.searchParams.get("end");
+
+  // TODO: this should be configurable
+  // const allowedChannels: string[] = [];
+  // const allowedCategories = ["Need Help", "React General", "Advanced Topics"];
+  if (!start || !end) {
+    throw new Error("cannot load data without start and end range");
+  }
+
+  const reportSlice = db
+    .selectFrom("message_stats")
+    .where("guild_id", "=", guildId)
+    .where("author_id", "=", userId)
+    .where("sent_at", ">=", new Date(start).getTime())
+    .where("sent_at", "<", new Date(end).getTime());
+
+  const dailyBreakdownQuery = reportSlice
+    .select((eb) => [
+      eb.fn.countAll<number>().as("messages"),
+      eb.fn.sum<number>("word_count").as("word_count"),
+      eb.fn.sum<number>("char_count").as("char_count"),
+      eb.fn.sum<number>("react_count").as("react_count"),
+      eb
+        .fn<number>("round", [eb.fn.avg("word_count"), eb.lit(3)])
+        .as("avg_words"),
+      eb
+        .fn<string>("date", [
+          eb("sent_at", "/", eb.lit(1000)),
+          sql.lit("unixepoch"),
+        ])
+        .as("date"),
+    ])
+    // .where((eb) =>
+    //   eb.or([
+    //     eb("channel_id", "in", allowedChannels),
+    //     eb("channel_category", "in", allowedCategories),
+    //   ]),
+    // )
+    .orderBy("date", "asc")
+    .groupBy("date");
+
+  const categoryBreakdownQuery = reportSlice
+    .select((eb) => [
+      eb.fn.count("channel_category").as("messages"),
+      "channel_category",
+    ])
+    // .orderBy("messages", "desc")
+    .groupBy("channel_category");
+
+  const channelBreakdownQuery = reportSlice
+    .select((eb) => [eb.fn.count("channel_id").as("messages"), "channel_id"])
+    .orderBy("messages", "desc")
+    .groupBy("channel_id");
+
+  const [dailyBreakdown, categoryBreakdown, channelBreakdown] =
+    await Promise.all([
+      dailyBreakdownQuery.execute(),
+      categoryBreakdownQuery.execute(),
+      channelBreakdownQuery.execute(),
+    ]);
+
+  return { dailyBreakdown, categoryBreakdown, channelBreakdown };
+}
+
+export default function UserProfile({
+  params,
+  loaderData: data,
+}: Route.ComponentProps) {
+  const [qs] = useSearchParams();
+  const start = qs.get("start");
+  const end = qs.get("end");
+
+  const derivedData = useMemo(() => {
+    const totalMessages = data.categoryBreakdown.reduce(
+      (a, c) => a + Number(c.messages),
+      0,
+    );
+    const totalReactions = data.dailyBreakdown.reduce(
+      (a, c) => a + Number(c.react_count),
+      0,
+    );
+    const totalWords = data.dailyBreakdown.reduce(
+      (a, c) => a + Number(c.word_count),
+      0,
+    );
+    const totalChars = data.dailyBreakdown.reduce(
+      (a, c) => a + Number(c.char_count),
+      0,
+    );
+    return { totalMessages, totalWords, totalReactions, totalChars };
+  }, [data]);
+
+  return (
+    <>
+      <h1>{params.userId}</h1>
+      <Link
+        to={{
+          pathname: `/${params.guildId}/sh`,
+          search: `?start=${start}&end=${end}`,
+        }}
+      >
+        back
+      </Link>
+      <textarea
+        className="border"
+        style={{ width: "100%", height: "200px" }}
+        readOnly
+        defaultValue={JSON.stringify({ derivedData, ...data }, null, 2)}
+      />
+
+      <ResponsiveContainer width="100%" height={300}>
+        <RadarChart
+          cx="50%"
+          cy="50%"
+          outerRadius="80%"
+          data={data.categoryBreakdown}
+        >
+          <PolarGrid />
+          <PolarAngleAxis dataKey="channel_category" />
+          <PolarRadiusAxis />
+          <Tooltip />
+          <Radar
+            name="Channels"
+            dataKey="messages"
+            stroke="#8884d8"
+            fill="#8884d8"
+            fillOpacity={0.6}
+          />
+        </RadarChart>
+      </ResponsiveContainer>
+
+      <ResponsiveContainer width="100%" height={200}>
+        <ComposedChart
+          width={500}
+          height={300}
+          data={data.channelBreakdown}
+          margin={{
+            top: 20,
+            right: 50,
+            bottom: 20,
+            left: 20,
+          }}
+        >
+          <CartesianGrid strokeDasharray="1 3" stroke="#ddd" />
+          <XAxis dataKey="channel_id" />
+          <YAxis />
+          <Tooltip />
+          <Bar dataKey="messages" fill="#8884d8" />
+        </ComposedChart>
+      </ResponsiveContainer>
+
+      <ResponsiveContainer width="100%" height={300}>
+        <ComposedChart
+          width={500}
+          height={200}
+          data={data.dailyBreakdown}
+          syncId="dailyStats"
+          margin={{
+            top: 20,
+            right: 20,
+            bottom: 20,
+            left: 20,
+          }}
+        >
+          <CartesianGrid strokeDasharray="7 3" stroke="#ddd" />
+          <XAxis dataKey="date" scale="band" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="messages" fill="#413ea0" />
+        </ComposedChart>
+      </ResponsiveContainer>
+
+      <ResponsiveContainer width="100%" height={300}>
+        <ComposedChart
+          width={500}
+          height={200}
+          data={data.dailyBreakdown}
+          syncId="dailyStats"
+          margin={{
+            top: 20,
+            right: 20,
+            bottom: 20,
+            left: 20,
+          }}
+        >
+          <CartesianGrid strokeDasharray="7 3" stroke="#ddd" />
+          <XAxis dataKey="date" scale="band" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="word_count" stackId="1" fill="red" />
+          <Bar dataKey="char_count" stackId="1" fill="blue" />
+        </ComposedChart>
+      </ResponsiveContainer>
+
+      <ResponsiveContainer width="100%" height={300}>
+        <ComposedChart
+          width={500}
+          height={200}
+          data={data.dailyBreakdown}
+          syncId="dailyStats"
+          margin={{
+            top: 20,
+            right: 20,
+            bottom: 20,
+            left: 20,
+          }}
+        >
+          <CartesianGrid strokeDasharray="7 3" stroke="#ddd" />
+          <XAxis dataKey="date" scale="band" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="react_count" fill="green" />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </>
+  );
+}
diff --git a/package.json b/package.json
index 2807e79..7658e34 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.0.0",
     "react-router": "^7.1.0",
+    "recharts": "^2.15.3",
     "simple-oauth2": "^5.1.0"
   },
   "devDependencies": {