diff --git a/static-site/app/whoami/page.tsx b/static-site/app/whoami/page.tsx
new file mode 100644
index 000000000..da9285945
--- /dev/null
+++ b/static-site/app/whoami/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import React, { useContext } from "react";
+
+import { UserContext } from "../../components/user-data-wrapper";
+
+import styles from "./styles.module.css";
+
+// we don't export a metadata object here because react client
+// components aren't allowed to do that, and we need to be a client
+// component to get access to the user context
+
+export default function WhoAmI(): React.ReactElement {
+  const { user, groupMemberships } = useContext(UserContext);
+
+  return user ? (
+    <div className={styles.userContainer}>
+      You’re logged in as <strong>{user.username}</strong>.
+      <p className={styles.subText}>
+        You are a member of the following Nextstrain groups, which each contain
+        a collection of datasets and/or narratives:
+      </p>
+      Public:
+      <ul className={styles.userGroupList}>
+        {groupMemberships
+          .filter((group) => group.isPublic)
+          .map((group) => (
+            <li key={group.name}>
+              <a href={`/groups/${group.name}`}>{group.name}</a>
+            </li>
+          ))}
+      </ul>
+      Private:
+      <ul className={styles.userGroupList}>
+        {groupMemberships
+          .filter((group) => !group.isPublic)
+          .map((group) => (
+            <li key={group.name}>
+              <a href={`/groups/${group.name}`}>{group.name}</a>
+            </li>
+          ))}
+      </ul>
+      <a href="/logout">Logout</a>
+    </div>
+  ) : (
+    <div className={styles.userContainer}>
+      <p>
+        You are not logged in.
+        <br />
+        <a href="/login">Login</a>
+      </p>
+    </div>
+  );
+}
diff --git a/static-site/app/whoami/styles.module.css b/static-site/app/whoami/styles.module.css
new file mode 100644
index 000000000..1f8b5c99a
--- /dev/null
+++ b/static-site/app/whoami/styles.module.css
@@ -0,0 +1,23 @@
+.userContainer {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: calc(1.4 * var(--niceLineHeight));
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 130px 0px 80px;
+  text-align: center;
+}
+
+.userContainer p {
+  padding-top: 20px;
+}
+
+.subText {
+  font-size: 18px;
+  line-height: var(--niceLineHeight);
+}
+
+.userGroupList {
+  display: table;
+  margin: 0 auto !important;
+}
diff --git a/static-site/pages/whoami.jsx b/static-site/pages/whoami.jsx
deleted file mode 100644
index 5a866c7c7..000000000
--- a/static-site/pages/whoami.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/pages/whoami"), {ssr: false})
-export default Index;
diff --git a/static-site/src/pages/whoami.jsx b/static-site/src/pages/whoami.jsx
deleted file mode 100644
index 8bbd6b8b2..000000000
--- a/static-site/src/pages/whoami.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, {Fragment, useContext} from "react";
-import styled from "styled-components";
-import UserDataWrapper, { UserContext } from "../layouts/userDataWrapper";
-import NavBar from '../components/nav-bar';
-import { Logos } from "../components/logos";
-import MainLayout from "../components/layout";
-
-const UserPage = () => {
-  const { user, groupMemberships } = useContext(UserContext);
-
-  const LoggedIn = () => (
-    <Fragment>
-      You&apos;re logged in as <strong>{user.username}</strong>.
-      <SubText>
-        You are a member of the following Nextstrain groups, which each
-        contain a collection of datasets and/or narratives:
-      </SubText>
-
-      Public:
-
-      <UserGroupsList>
-        {groupMemberships.filter((group) => group.isPublic).map((group) => (
-          <li key={group.name}>
-            <a href={`/groups/${group.name}`}>{group.name}</a>
-          </li>
-        ))}
-      </UserGroupsList>
-
-      Private:
-
-      <UserGroupsList>
-        {groupMemberships.filter((group) => !group.isPublic).map((group) => (
-          <li key={group.name}>
-            <a href={`/groups/${group.name}`}>{group.name}</a>
-          </li>
-        ))}
-      </UserGroupsList>
-      <a href="/logout">Logout</a>
-    </Fragment>
-  );
-
-  const LoggedOut = () => (
-    <p>
-      You are not logged in.<br />
-      <a href="/login">Login</a>
-    </p>
-  );
-
-  return (
-    <UserContainer>
-      {user
-        ? LoggedIn()
-        : LoggedOut()
-      }
-    </UserContainer>
-  );
-};
-
-const UserContainer = styled.div`
-  max-width: 640px;
-  padding: 130px 0px 80px 0px;
-  margin-top: 0px;
-  margin-right: auto;
-  margin-bottom: 0px;
-  margin-left: auto;
-  text-align: center;
-  font-size: 24px;
-  font-weight: 300;
-  line-height: ${(props) => 1.4 * props.theme.niceLineHeight};
-`;
-
-const SubText = styled.p`
-  line-height: ${(props) => props.theme.niceLineHeight};
-  font-size: 18px;
-`;
-
-const UserGroupsList = styled.ul`
-  display: table;
-  margin: 0 auto !important;
-`;
-
-const Users = () => {
-  console.log("<Users>");
-  return (
-    <MainLayout>
-      <div className="index-container">
-        <main>
-          <UserDataWrapper>
-            <NavBar />
-            <UserPage/>
-            <Logos />
-          </UserDataWrapper>
-        </main>
-      </div>
-    </MainLayout>
-  );
-};
-
-export default Users;