diff --git a/static-site/app/contact/page.tsx b/static-site/app/contact/page.tsx
index 972e0dc67..e251dcba7 100644
--- a/static-site/app/contact/page.tsx
+++ b/static-site/app/contact/page.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 
 import { BigSpacer } from "../../components/spacers";
 import FlexCenter from "../../components/flex-center";
-import FocusParagraphNarrow from "../../components/focus-paragraph";
+import { FocusParagraphNarrow } from "../../components/focus-paragraph";
 
 export default function ContactPage(): ReactElement {
   return (
diff --git a/static-site/app/team/page.tsx b/static-site/app/team/page.tsx
new file mode 100644
index 000000000..43c07cf23
--- /dev/null
+++ b/static-site/app/team/page.tsx
@@ -0,0 +1,53 @@
+// import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
+// import { CenteredFocusParagraph } from "../components/splash/styles";
+// import { TeamPageList } from "../components/People/avatars";
+
+import { ReactElement } from "react";
+
+import FlexCenter from "../../components/flex-center";
+import { FocusParagraphCentered } from "../../components/focus-paragraph";
+import { BigSpacer } from "../../components/spacers";
+import { TeamPageList } from "../../components/people/avatars";
+
+import styles from "./styles.module.css";
+
+export default function TeamPage(): ReactElement {
+  return (
+    <div className={styles.teamPage}>
+      <h1>Nextstrain core team</h1>
+      <FlexCenter>
+        <FocusParagraphCentered>
+          Nextstrain was co-founded by:
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="founders" />
+      <FlexCenter>
+        <FocusParagraphCentered>
+          The core team currently working on Nextstrain are:
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="core" />
+      <h1>Nextstrain Alumni</h1>
+      <FlexCenter>
+        <FocusParagraphCentered>
+          Our previous core Nextstrain team members, some of whom are still
+          working on projects involving Nextstrain and/or maintaining specific
+          analyses. Beyond the core team there have been many code contributions
+          from the wider scientific and programming community; please see{" "}
+          <a href="https://github.com/nextstrain">our GitHub organization</a> to
+          see the history of (code) contributions.
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <BigSpacer />
+      <TeamPageList membersKey="alumni" />
+      <h1>Scientific Advisory Board</h1>
+      <FlexCenter>
+        <FocusParagraphCentered>
+          In Oct 2023, a scientific advisory board was founded to provide
+          guidance on future directions for the Nextstrain project.
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="board" />
+    </div>
+  );
+}
diff --git a/static-site/app/team/styles.module.css b/static-site/app/team/styles.module.css
new file mode 100644
index 000000000..13dedd4e1
--- /dev/null
+++ b/static-site/app/team/styles.module.css
@@ -0,0 +1,10 @@
+.teamPage h1 {
+    color: var(--darkGrey);
+    font-size: 32px;
+    font-weight: 300;
+    line-height: 32px;
+    margin-bottom: 20px;
+    margin-top: 0px;
+    min-width: 240px;
+    text-align: center;
+}
diff --git a/static-site/components/flex-center/styles.module.css b/static-site/components/flex-center/styles.module.css
index 4b7c3d64f..57a1a1138 100644
--- a/static-site/components/flex-center/styles.module.css
+++ b/static-site/components/flex-center/styles.module.css
@@ -1,5 +1,6 @@
 .flexCenter {
   display: flex;
+  flex-wrap: nowrap;
   justify-content: center;
   margin: 0px;
   padding: 0px;
diff --git a/static-site/components/focus-paragraph/index.tsx b/static-site/components/focus-paragraph/index.tsx
index 3397a03a4..8127bbc1a 100644
--- a/static-site/components/focus-paragraph/index.tsx
+++ b/static-site/components/focus-paragraph/index.tsx
@@ -2,10 +2,18 @@ import { ReactElement, ReactNode } from "react";
 
 import styles from "./styles.module.css";
 
-export default function FocusParagraphNarrow({
+export function FocusParagraphCentered({
   children,
 }: {
   children: ReactNode;
 }): ReactElement {
-  return <p className={styles.focus}>{children}</p>;
+  return <p className={`${styles.focus} ${styles.centered}`}>{children}</p>;
+}
+
+export function FocusParagraphNarrow({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement {
+  return <p className={`${styles.focus} ${styles.narrow}`}>{children}</p>;
 }
diff --git a/static-site/components/focus-paragraph/styles.module.css b/static-site/components/focus-paragraph/styles.module.css
index d7cbd048a..6cfda11c8 100644
--- a/static-site/components/focus-paragraph/styles.module.css
+++ b/static-site/components/focus-paragraph/styles.module.css
@@ -1,8 +1,22 @@
+/* this is the basic style for all FocusParagraph */
 .focus {
   font-size: var(--niceFontSize);
   font-weight: 300;
   line-height: var(--tightLineHight);
-  margin: 20px 0px 0px;
   max-width: 640px;
+}
+
+/* this is specifically *added* to the base style for FocusParagraphCentered */
+.centered {
+  margin: 20px 0 0;
+  text-align: center;
+}
+.centered > strong {
+  font-weight: 500;
+}
+
+/* this is specifically *added* to the base style for FocusParagraphNarrow */
+.narrow {
+  margin: 20px 0px 0px;
   text-align: left;
 }
diff --git a/static-site/components/people/avatars.module.css b/static-site/components/people/avatars.module.css
index 5105289a7..51553604b 100644
--- a/static-site/components/people/avatars.module.css
+++ b/static-site/components/people/avatars.module.css
@@ -1,30 +1,71 @@
-.commonWrapper {
-  & a {
-    font-weight: 500 !important;
-    color: #333 !important;
-  }
-  & img {
-    margin-left: 5px;
-    border-radius: 50%;
-    vertical-align: middle;
-  }
+.commonWrapper a {
+  color: #333 !important;
+  font-weight: 500 !important;
+}
+.commonWrapper img {
+  border-radius: 50%;
+  margin-left: 5px;
+  vertical-align: middle;
 }
 
 .footerWrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+}
+.footerWrapper a {
+  color: #333 !important;
+  font-weight: 500 !important;
+}
+.footerWrapper img {
+  border-radius: 50%;
+  height: 32px;
+  margin-left: 5px;
+  margin-right: 8px;
+  vertical-align: middle;
+  width: 32px;
+}
+
+.teamPageWrapper {
+  display: grid;
+  font-size: 18px;
+  justify-content: center;
+  grid-template-columns: minmax(min-content, 500px);
+  padding: 20px 0px;
 
-  & a {
-    font-weight: 500 !important;
-    color: #333 !important;
-  }
-  & img {
-    border-radius: 50%;
-    height: 32px;
-    margin-left: 5px;
-    margin-right: 8px;
-    vertical-align: middle;
-    width: 32px;
+  /* Bootstrap's .container applies 25px left and right margins.  Account for */
+  /* that when computing the minimum width to support two 333px columns. */
+  @media (min-width: calc(333px*2 + 25px*2)) {
+    grid-template-columns: repeat(auto-fit, 333px);
   }
 }
+.teamPageWrapper a {
+  color: var(--darkGrey);
+}
+.teamPageWrapper img {
+  border-radius: 50%;
+  height: 60px;
+  margin-left: 5px;
+  margin-right: 20px;
+  vertical-align: middle;
+  width: 60px;
+}
+
+.sideways {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  padding: 10px 15px;
+}
+
+.updown {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.blurb {
+  font-size: 14px;
+  text-align: left;
+}
diff --git a/static-site/components/people/avatars.tsx b/static-site/components/people/avatars.tsx
index 563e06c36..a63c45da1 100644
--- a/static-site/components/people/avatars.tsx
+++ b/static-site/components/people/avatars.tsx
@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 
-import styles from "./avatars.module.scss";
+import styles from "./avatars.module.css";
 import { TeamMember, teamMembers } from "./teamMembers";
 
 export function FooterTeamList(): ReactElement {
@@ -26,6 +26,47 @@ export function FooterTeamList(): ReactElement {
   );
 }
 
+export function TeamPageList({
+  membersKey,
+}: {
+  membersKey: string;
+}): ReactElement {
+  const people: TeamMember[] = teamMembers[membersKey];
+
+  return (
+    <div className={styles.teamPageWrapper}>
+      {people.map(
+        (person: TeamMember): ReactElement => (
+          <div
+            className={styles.sideways}
+            key={person.name}
+            style={{ alignItems: person.blurb ? "top" : "center" }}
+          >
+            <MaybeLinked link={person.link}>
+              <img
+                alt={person.name}
+                src={require("../../static/team/" + person.image).default.src}
+              />
+            </MaybeLinked>
+            <div className={styles.updown}>
+              <MaybeLinked link={person.link}>
+                <span style={{ whiteSpace: "nowrap" }}>{person.name}</span>
+              </MaybeLinked>
+              {person.blurb && (
+                <div className={styles.blurb}>{person.blurb}</div>
+              )}
+            </div>
+          </div>
+        ),
+      )}
+    </div>
+  );
+}
+
+function Comma(): ReactElement {
+  return <span style={{ marginLeft: "2px", marginRight: "2px" }}>,</span>;
+}
+
 function MaybeLinked({
   link,
   children,
@@ -35,8 +76,3 @@ function MaybeLinked({
 }) {
   return link ? <a href={link}>{children}</a> : children;
 }
-
-function Comma(): ReactElement {
-  return <span style={{ marginLeft: "2px", marginRight: "2px" }}>,</span>;
-}
-
diff --git a/static-site/pages/team.jsx b/static-site/pages/team.jsx
deleted file mode 100644
index f09bcde6f..000000000
--- a/static-site/pages/team.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/pages/team"), {ssr: false})
-export default Index;
diff --git a/static-site/src/pages/team.jsx b/static-site/src/pages/team.jsx
deleted file mode 100644
index ef50843c1..000000000
--- a/static-site/src/pages/team.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import GenericPage from "../layouts/generic-page";
-import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
-import { CenteredFocusParagraph } from "../components/splash/styles";
-import { TeamPageList } from "../components/People/avatars";
-
-const H1 = styled.div`
-  text-align: center;
-  font-size: 32px;
-  line-height: 32px;
-  font-weight: 300;
-  color: ${(props) => props.theme.darkGrey};
-  min-width: 240px;
-  margin-top: 0px;
-  margin-bottom: 20px;
-`;
-
-const TeamPage = () => {
-  console.log("<TeamPage>");
-  return (
-    <div>
-      <H1>Nextstrain core team</H1>
-
-      <FlexCenter>
-        <CenteredFocusParagraph>
-          {"Nextstrain was co-founded by:"}
-        </CenteredFocusParagraph>
-      </FlexCenter>
-
-      <TeamPageList membersKey="founders" />
-
-      <FlexCenter>
-        <CenteredFocusParagraph>
-          {"The core team currently working on Nextstrain are:"}
-        </CenteredFocusParagraph>
-      </FlexCenter>
-
-      <TeamPageList membersKey="core" />
-
-      <H1>Nextstrain Alumni</H1>
-      <FlexCenter>
-        <CenteredFocusParagraph>
-          {`Our previous core Nextstrain team members, some of whom are still working on projects involving Nextstrain and/or maintaining specific analyses. `}
-          {"Beyond the core team there have been many code contributions from the wider scientific and programming community; please see "}
-          <a href="https://github.com/nextstrain">our GitHub organization</a>
-          {" to see the history of (code) contributions."}
-        </CenteredFocusParagraph>
-      </FlexCenter>
-
-      <BigSpacer/>
-
-      <TeamPageList membersKey="alumni" />
-
-      <H1>Scientific Advisory Board</H1>
-      <FlexCenter>
-        <CenteredFocusParagraph>
-          {`In Oct 2023, a scientific advisory board was founded to provide guidance on future directions for the Nextstrain project.`}
-        </CenteredFocusParagraph>
-      </FlexCenter>
-
-      <TeamPageList membersKey="board" />
-    </div>
-  );
-};
-
-
-const Team = () => (
-  <GenericPage>
-    <TeamPage/>
-  </GenericPage>
-);
-
-export default Team;