From e4022c7bc216ce810fd6b72e2c41d3116a207349 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 1 Feb 2026 14:31:14 +0100
Subject: [PATCH 01/13] add isActive and classList to Button, move H2 and H3 to
 Headers

---
 frontend/__tests__/components/Button.spec.tsx | 38 +++++++++++++++++++
 frontend/src/ts/components/common/Button.tsx  | 11 +++++-
 frontend/src/ts/components/common/Headers.tsx | 21 ++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/ts/components/common/Headers.tsx

diff --git a/frontend/__tests__/components/Button.spec.tsx b/frontend/__tests__/components/Button.spec.tsx
index 4c0ca6db2746..0a6912d04931 100644
--- a/frontend/__tests__/components/Button.spec.tsx
+++ b/frontend/__tests__/components/Button.spec.tsx
@@ -174,4 +174,42 @@ describe("Button component", () => {
     expect(child).toBeTruthy();
     expect(child?.textContent).toBe("Child");
   });
+
+  it("applies custom class list when classList prop is provided", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        classList={{
+          customTrue: true,
+          customFalse: false,
+          customUndefined: undefined,
+        }}
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button?.classList.contains("customTrue")).toBe(true);
+    expect(button?.classList.contains("customFalse")).toBe(false);
+    expect(button?.classList.contains("customUndefined")).toBe(false);
+  });
+
+  it("applies active", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        active
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button?.classList.contains("bg-main")).toBe(true);
+    expect(button?.classList.contains("text-bg")).toBe(true);
+    expect(button?.classList.contains("hover:bg-text")).toBe(true);
+  });
 });
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index acd421c94a66..208a11231f96 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -1,4 +1,4 @@
-import { JSXElement, Show } from "solid-js";
+import { JSX, JSXElement, Show } from "solid-js";
 
 import { Conditional } from "./Conditional";
 import { Fa, FaProps } from "./Fa";
@@ -7,6 +7,7 @@ type BaseProps = {
   text?: string;
   fa?: FaProps;
   class?: string;
+  classList?: JSX.HTMLAttributes<HTMLButtonElement>["classList"];
   type?: "text" | "button";
   children?: JSXElement;
 };
@@ -15,6 +16,7 @@ type ButtonProps = BaseProps & {
   onClick: () => void;
   href?: never;
   sameTarget?: true;
+  active?: boolean;
 };
 
 type AnchorProps = BaseProps & {
@@ -25,6 +27,7 @@ type AnchorProps = BaseProps & {
 export function Button(props: ButtonProps | AnchorProps): JSXElement {
   const isAnchor = "href" in props;
   const buttonClass = isAnchor ? "button" : "";
+  const isActive = (!isAnchor && props.active) ?? false;
 
   const content = (
     <>
@@ -36,10 +39,14 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
     </>
   );
 
-  const getClassList = (): Record<string, boolean> => {
+  const getClassList = (): Record<string, boolean | undefined> => {
     return {
       [(props.type ?? "button") === "text" ? "textButton" : buttonClass]: true,
       [props.class ?? ""]: props.class !== undefined,
+      "bg-main": isActive,
+      "text-bg": isActive,
+      "hover:bg-text": isActive,
+      ...props.classList,
     };
   };
 
diff --git a/frontend/src/ts/components/common/Headers.tsx b/frontend/src/ts/components/common/Headers.tsx
new file mode 100644
index 000000000000..f7f2fcfb2e77
--- /dev/null
+++ b/frontend/src/ts/components/common/Headers.tsx
@@ -0,0 +1,21 @@
+import { JSXElement } from "solid-js";
+
+import { Fa, FaProps } from "./Fa";
+
+export function H2(props: { text: string; fa: FaProps }): JSXElement {
+  return (
+    <h2 class="text-sub flex place-items-center gap-4 pb-4 text-4xl">
+      <Fa {...props.fa} />
+      {props.text}
+    </h2>
+  );
+}
+
+export function H3(props: { text: string; fa: FaProps }): JSXElement {
+  return (
+    <h3 class="text-sub flex place-items-center gap-2 pb-2">
+      <Fa {...props.fa} />
+      {props.text}
+    </h3>
+  );
+}

From d48b0f324238990508dc37e992954858035b2f99 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 1 Feb 2026 14:55:28 +0100
Subject: [PATCH 02/13] add aria-label and router-link to button

---
 frontend/__tests__/components/Button.spec.tsx | 139 +++++++++++++-----
 frontend/src/ts/components/common/Button.tsx  |  27 +++-
 2 files changed, 125 insertions(+), 41 deletions(-)

diff --git a/frontend/__tests__/components/Button.spec.tsx b/frontend/__tests__/components/Button.spec.tsx
index 0a6912d04931..958d476d4c69 100644
--- a/frontend/__tests__/components/Button.spec.tsx
+++ b/frontend/__tests__/components/Button.spec.tsx
@@ -1,5 +1,5 @@
-import { render, cleanup } from "@solidjs/testing-library";
-import { describe, it, expect, vi, afterEach } from "vitest";
+import { cleanup, render } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { Button } from "../../src/ts/components/common/Button";
 
@@ -17,7 +17,7 @@ describe("Button component", () => {
 
     const button = container.querySelector("button");
     expect(button).toBeTruthy();
-    expect(button?.textContent).toContain("Click me");
+    expect(button).toHaveTextContent("Click me");
   });
 
   it("renders an anchor element when href is provided", () => {
@@ -27,9 +27,12 @@ describe("Button component", () => {
 
     const anchor = container.querySelector("a");
     expect(anchor).toBeTruthy();
-    expect(anchor?.getAttribute("href")).toBe("https://example.com");
-    expect(anchor?.getAttribute("target")).toBe("_blank");
-    expect(anchor?.getAttribute("rel")).toContain("noreferrer");
+    expect(anchor).toHaveAttribute("href", "https://example.com");
+    expect(anchor).toHaveAttribute("target", "_blank");
+    expect(anchor).toHaveAttribute("rel", "noreferrer noopener");
+    expect(anchor).not.toHaveAttribute("router-link");
+    expect(anchor).not.toHaveAttribute("aria-label");
+    expect(anchor).not.toHaveAttribute("data-balloon-pos");
   });
 
   it("calls onClick when button is clicked", async () => {
@@ -59,25 +62,8 @@ describe("Button component", () => {
 
     const icon = container.querySelector("i");
     expect(icon).toBeTruthy();
-    expect(icon?.className).toContain("fas");
-    expect(icon?.className).toContain("fa-keyboard");
-  });
-
-  it("applies fa-fw class when text is missing", () => {
-    const { container } = render(() => (
-      <Button
-        onClick={() => {
-          //
-        }}
-        fa={{
-          icon: "fa-keyboard",
-          fixedWidth: true,
-        }}
-      />
-    ));
-
-    const icon = container.querySelector("i");
-    expect(icon?.classList.contains("fa-fw")).toBe(true);
+    expect(icon).toHaveClass("fas");
+    expect(icon).toHaveClass("fa-keyboard");
   });
 
   it("applies fa-fw class when fixedWidthIcon is true", () => {
@@ -95,7 +81,7 @@ describe("Button component", () => {
     ));
 
     const icon = container.querySelector("i");
-    expect(icon?.classList.contains("fa-fw")).toBe(true);
+    expect(icon).toHaveClass("fa-fw");
   });
 
   it("does not apply fa-fw when text is present and fixedWidthIcon is false", () => {
@@ -112,7 +98,7 @@ describe("Button component", () => {
     ));
 
     const icon = container.querySelector("i");
-    expect(icon?.classList.contains("fa-fw")).toBe(false);
+    expect(icon).not.toHaveClass("fa-fw");
   });
 
   it("applies default button class", () => {
@@ -126,7 +112,7 @@ describe("Button component", () => {
     ));
 
     const button = container.querySelector("button");
-    expect(button?.classList.contains("button")).toBe(false);
+    expect(button).not.toHaveClass("button");
   });
 
   it("applies textButton class when type is text", () => {
@@ -141,7 +127,7 @@ describe("Button component", () => {
     ));
 
     const button = container.querySelector("button");
-    expect(button?.classList.contains("textButton")).toBe(true);
+    expect(button).toHaveClass("textButton");
   });
 
   it("applies custom class when class prop is provided", () => {
@@ -156,7 +142,7 @@ describe("Button component", () => {
     ));
 
     const button = container.querySelector("button");
-    expect(button?.classList.contains("custom-class")).toBe(true);
+    expect(button).toHaveClass("custom-class");
   });
 
   it("renders children content", () => {
@@ -172,7 +158,7 @@ describe("Button component", () => {
 
     const child = container.querySelector('[data-testid="child"]');
     expect(child).toBeTruthy();
-    expect(child?.textContent).toBe("Child");
+    expect(child).toHaveTextContent("Child");
   });
 
   it("applies custom class list when classList prop is provided", () => {
@@ -191,9 +177,9 @@ describe("Button component", () => {
     ));
 
     const button = container.querySelector("button");
-    expect(button?.classList.contains("customTrue")).toBe(true);
-    expect(button?.classList.contains("customFalse")).toBe(false);
-    expect(button?.classList.contains("customUndefined")).toBe(false);
+    expect(button).toHaveClass("customTrue");
+    expect(button).not.toHaveClass("customFalse");
+    expect(button).not.toHaveClass("customUndefined");
   });
 
   it("applies active", () => {
@@ -208,8 +194,87 @@ describe("Button component", () => {
     ));
 
     const button = container.querySelector("button");
-    expect(button?.classList.contains("bg-main")).toBe(true);
-    expect(button?.classList.contains("text-bg")).toBe(true);
-    expect(button?.classList.contains("hover:bg-text")).toBe(true);
+    expect(button).toHaveClass("bg-main");
+    expect(button).toHaveClass("text-bg");
+    expect(button).toHaveClass("hover:bg-text");
+  });
+
+  it("applies aria-label to button provided as text", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        ariaLabel="test"
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button).toHaveAttribute("aria-label", "test");
+    expect(button).toHaveAttribute("data-balloon-pos", "up");
+  });
+
+  it("applies aria-label to button provided as object", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        ariaLabel={{ text: "test", position: "down" }}
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button).toHaveAttribute("aria-label", "test");
+    expect(button).toHaveAttribute("data-balloon-pos", "down");
+  });
+
+  it("applies router-link to button", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        router-link
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button).toHaveAttribute("router-link", "");
+  });
+
+  it("applies aria-label to anchor provided as text", () => {
+    const { container } = render(() => (
+      <Button href="http://example.com" text="Hello" ariaLabel="test" />
+    ));
+
+    const anchor = container.querySelector("a");
+    expect(anchor).toHaveAttribute("aria-label", "test");
+    expect(anchor).toHaveAttribute("data-balloon-pos", "up");
+  });
+
+  it("applies aria-label to anchor provided as object", () => {
+    const { container } = render(() => (
+      <Button
+        href="http://example.com"
+        text="Hello"
+        ariaLabel={{ text: "test", position: "down" }}
+      />
+    ));
+
+    const anchor = container.querySelector("a");
+    expect(anchor).toHaveAttribute("aria-label", "test");
+    expect(anchor).toHaveAttribute("data-balloon-pos", "down");
+  });
+  it("applies router-link to ancor", () => {
+    const { container } = render(() => (
+      <Button href="http://example.com" text="Hello" router-link />
+    ));
+
+    const anchor = container.querySelector("a");
+    expect(anchor).toHaveAttribute("router-link", "");
   });
 });
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 208a11231f96..f2ed250163d6 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -10,6 +10,10 @@ type BaseProps = {
   classList?: JSX.HTMLAttributes<HTMLButtonElement>["classList"];
   type?: "text" | "button";
   children?: JSXElement;
+  ariaLabel?:
+    | string
+    | { text: string; position: "up" | "down" | "left" | "right" };
+  "router-link"?: true;
 };
 
 type ButtonProps = BaseProps & {
@@ -27,7 +31,7 @@ type AnchorProps = BaseProps & {
 export function Button(props: ButtonProps | AnchorProps): JSXElement {
   const isAnchor = "href" in props;
   const buttonClass = isAnchor ? "button" : "";
-  const isActive = (!isAnchor && props.active) ?? false;
+  const isActive = (): boolean => (!isAnchor && props.active) ?? false;
 
   const content = (
     <>
@@ -39,13 +43,24 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
     </>
   );
 
+  const ariaLabel = (): object => {
+    if (props.ariaLabel === undefined) return {};
+    if (typeof props.ariaLabel === "string") {
+      return { "aria-label": props.ariaLabel, "data-balloon-pos": "up" };
+    }
+    return {
+      "aria-label": props.ariaLabel.text,
+      "data-balloon-pos": props.ariaLabel.position,
+    };
+  };
+
   const getClassList = (): Record<string, boolean | undefined> => {
     return {
       [(props.type ?? "button") === "text" ? "textButton" : buttonClass]: true,
       [props.class ?? ""]: props.class !== undefined,
-      "bg-main": isActive,
-      "text-bg": isActive,
-      "hover:bg-text": isActive,
+      "bg-main": isActive(),
+      "text-bg": isActive(),
+      "hover:bg-text": isActive(),
       ...props.classList,
     };
   };
@@ -59,6 +74,8 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           href={props.href}
           target={props.href?.startsWith("#") ? undefined : "_blank"}
           rel={props.href?.startsWith("#") ? undefined : "noreferrer noopener"}
+          {...ariaLabel()}
+          {...(props["router-link"] ? { "router-link": "" } : {})}
         >
           {content}
         </a>
@@ -68,6 +85,8 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           type="button"
           classList={getClassList()}
           onClick={() => props.onClick?.()}
+          {...ariaLabel()}
+          {...(props["router-link"] ? { "router-link": "" } : {})}
         >
           {content}
         </button>

From baf35bae88ec599831531ff1734b215b98f526bc Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 1 Feb 2026 14:59:11 +0100
Subject: [PATCH 03/13] move tests to correct folders

---
 .../__tests__/components/{ => common}/AnimatedModal.spec.tsx  | 2 +-
 frontend/__tests__/components/{ => common}/Button.spec.tsx    | 2 +-
 .../components/{ => layout/footer}/ScrollToTop.spec.tsx       | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename frontend/__tests__/components/{ => common}/AnimatedModal.spec.tsx (96%)
 rename frontend/__tests__/components/{ => common}/Button.spec.tsx (99%)
 rename frontend/__tests__/components/{ => layout/footer}/ScrollToTop.spec.tsx (95%)

diff --git a/frontend/__tests__/components/AnimatedModal.spec.tsx b/frontend/__tests__/components/common/AnimatedModal.spec.tsx
similarity index 96%
rename from frontend/__tests__/components/AnimatedModal.spec.tsx
rename to frontend/__tests__/components/common/AnimatedModal.spec.tsx
index 354cdf0f997c..b57934428ace 100644
--- a/frontend/__tests__/components/AnimatedModal.spec.tsx
+++ b/frontend/__tests__/components/common/AnimatedModal.spec.tsx
@@ -1,7 +1,7 @@
 import { render } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
-import { AnimatedModal } from "../../src/ts/components/common/AnimatedModal";
+import { AnimatedModal } from "../../../src/ts/components/common/AnimatedModal";
 
 describe("AnimatedModal", () => {
   beforeEach(() => {
diff --git a/frontend/__tests__/components/Button.spec.tsx b/frontend/__tests__/components/common/Button.spec.tsx
similarity index 99%
rename from frontend/__tests__/components/Button.spec.tsx
rename to frontend/__tests__/components/common/Button.spec.tsx
index 958d476d4c69..7f073576e586 100644
--- a/frontend/__tests__/components/Button.spec.tsx
+++ b/frontend/__tests__/components/common/Button.spec.tsx
@@ -1,7 +1,7 @@
 import { cleanup, render } from "@solidjs/testing-library";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-import { Button } from "../../src/ts/components/common/Button";
+import { Button } from "../../../src/ts/components/common/Button";
 
 describe("Button component", () => {
   afterEach(() => {
diff --git a/frontend/__tests__/components/ScrollToTop.spec.tsx b/frontend/__tests__/components/layout/footer/ScrollToTop.spec.tsx
similarity index 95%
rename from frontend/__tests__/components/ScrollToTop.spec.tsx
rename to frontend/__tests__/components/layout/footer/ScrollToTop.spec.tsx
index 36021bfcc7ae..99b74cb4373d 100644
--- a/frontend/__tests__/components/ScrollToTop.spec.tsx
+++ b/frontend/__tests__/components/layout/footer/ScrollToTop.spec.tsx
@@ -2,8 +2,8 @@ import { render } from "@solidjs/testing-library";
 import { userEvent } from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
-import { ScrollToTop } from "../../src/ts/components/layout/footer/ScrollToTop";
-import * as CoreSignals from "../../src/ts/signals/core";
+import { ScrollToTop } from "../../../../src/ts/components/layout/footer/ScrollToTop";
+import * as CoreSignals from "../../../../src/ts/signals/core";
 
 describe("ScrollToTop", () => {
   const getActivePageMock = vi.spyOn(CoreSignals, "getActivePage");

From 1248b81dd9180093fd39de61fdc986458158e4cf Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 1 Feb 2026 15:06:18 +0100
Subject: [PATCH 04/13] add LoadingCircle

---
 frontend/src/ts/components/common/AsyncContent.tsx  |  8 ++------
 frontend/src/ts/components/common/Fa.tsx            |  4 +++-
 frontend/src/ts/components/common/LoadingCircle.tsx | 10 ++++++++++
 3 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/ts/components/common/LoadingCircle.tsx

diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index be3e4a37037f..d8d504fec9d0 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -13,7 +13,7 @@ import * as Notifications from "../../elements/notifications";
 import { createErrorMessage } from "../../utils/misc";
 
 import { Conditional } from "./Conditional";
-import { Fa } from "./Fa";
+import { LoadingCircle } from "./LoadingCircle";
 
 export default function AsyncContent<T>(
   props: {
@@ -78,11 +78,7 @@ export default function AsyncContent<T>(
     return message;
   };
 
-  const loader = (
-    <div class="preloader p-4 text-center text-2xl text-main">
-      <Fa icon="fa-circle-notch" fixedWidth spin />
-    </div>
-  );
+  const loader = <LoadingCircle />;
 
   const errorText = (err: unknown): JSXElement => (
     <div class="error">{handleError(err)}</div>
diff --git a/frontend/src/ts/components/common/Fa.tsx b/frontend/src/ts/components/common/Fa.tsx
index 60604d84f930..ae8d20b92543 100644
--- a/frontend/src/ts/components/common/Fa.tsx
+++ b/frontend/src/ts/components/common/Fa.tsx
@@ -1,18 +1,20 @@
 import { JSXElement } from "solid-js";
 
 import { FaObject } from "../../types/font-awesome";
+import { cn } from "../../utils/cn";
 
 export type FaProps = {
   fixedWidth?: boolean;
   spin?: boolean;
   size?: number;
+  class?: string;
 } & FaObject;
 
 export function Fa(props: FaProps): JSXElement {
   const variant = (): string => props.variant ?? "solid";
   return (
     <i
-      class={props.icon}
+      class={cn(props.icon, props.class)}
       classList={{
         ["fas"]: variant() === "solid",
         ["far"]: variant() === "regular",
diff --git a/frontend/src/ts/components/common/LoadingCircle.tsx b/frontend/src/ts/components/common/LoadingCircle.tsx
new file mode 100644
index 000000000000..1e1ad49098d3
--- /dev/null
+++ b/frontend/src/ts/components/common/LoadingCircle.tsx
@@ -0,0 +1,10 @@
+import { JSXElement } from "solid-js";
+
+import { Fa } from "./Fa";
+export function LoadingCircle(): JSXElement {
+  return (
+    <div class="preloader text-main p-4 text-center text-2xl">
+      <Fa icon="fa-circle-notch" fixedWidth spin />
+    </div>
+  );
+}

From f6c57679977101e4efddc513714a5f5f9d8e8133 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 1 Feb 2026 15:35:40 +0100
Subject: [PATCH 05/13] add DiscordAvatar and User

---
 .../ts/components/common/DiscordAvatar.tsx    |  58 ++++++++++
 frontend/src/ts/components/common/User.tsx    | 102 ++++++++++++++++++
 .../src/ts/components/pages/AboutPage.tsx     |   1 +
 .../src/ts/controllers/badge-controller.ts    |  65 +++++++----
 .../ts/controllers/user-flag-controller.ts    |  14 ++-
 5 files changed, 213 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/ts/components/common/DiscordAvatar.tsx
 create mode 100644 frontend/src/ts/components/common/User.tsx

diff --git a/frontend/src/ts/components/common/DiscordAvatar.tsx b/frontend/src/ts/components/common/DiscordAvatar.tsx
new file mode 100644
index 000000000000..82024c34b40f
--- /dev/null
+++ b/frontend/src/ts/components/common/DiscordAvatar.tsx
@@ -0,0 +1,58 @@
+import { JSXElement, Show } from "solid-js";
+import { createStore } from "solid-js/store";
+
+import { FaSolidIcon } from "../../types/font-awesome";
+
+import { Conditional } from "./Conditional";
+import { Fa } from "./Fa";
+
+//cache successful and missing avatars
+const [avatar, setAvatar] = createStore<Record<string, boolean>>();
+
+export function DiscordAvatar(props: {
+  discordId: string | undefined;
+  discordAvatar: string | undefined;
+  size?: number;
+  missingIcon?: FaSolidIcon;
+}): JSXElement {
+  return (
+    <div class="grid grid-cols-[1.25em_max-content_auto] items-center justify-items-start gap-2">
+      <div class="col-start-1 col-end-2 row-start-1 row-end-2 grid h-(--size) w-(--size) place-content-center leading-(--size) text-(--size) transition-[opacity,filter] duration-125 [--size:1em]">
+        <Conditional
+          if={
+            props.discordId !== undefined &&
+            props.discordAvatar !== undefined &&
+            avatar[`${props.discordId}/${props.discordAvatar}`] !== false
+          }
+          then={
+            <>
+              <Show
+                when={
+                  avatar[`${props.discordId}/${props.discordAvatar}`] ===
+                  undefined
+                }
+              >
+                <Fa
+                  icon={"fa-circle-notch"}
+                  spin={true}
+                  class="absolute z-0 h-[1em] w-[1em]"
+                />
+              </Show>
+              <img
+                src={`https://cdn.discordapp.com/avatars/${props.discordId}/${props.discordAvatar}.png?size=${props.size ?? 32}`}
+                class="absolute z-10 h-[1em] w-[1em] rounded-full object-cover"
+                onLoad={() => {
+                  setAvatar(`${props.discordId}/${props.discordAvatar}`, true);
+                }}
+                onError={() => {
+                  setAvatar(`${props.discordId}/${props.discordAvatar}`, false);
+                }}
+              />
+            </>
+          }
+          else={<Fa icon={props.missingIcon ?? "fa-user-circle"} />}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/common/User.tsx b/frontend/src/ts/components/common/User.tsx
new file mode 100644
index 000000000000..2da5f9802c90
--- /dev/null
+++ b/frontend/src/ts/components/common/User.tsx
@@ -0,0 +1,102 @@
+import { User as UserType } from "@monkeytype/schemas/users";
+import { For, JSXElement, Show } from "solid-js";
+
+import {
+  badges,
+  UserBadge as UserBadgeType,
+} from "../../controllers/badge-controller";
+import {
+  getMatchingFlags,
+  SupportsFlags,
+  UserFlag,
+  UserFlagOptions,
+} from "../../controllers/user-flag-controller";
+
+import { Button } from "./Button";
+import { DiscordAvatar } from "./DiscordAvatar";
+import { Fa } from "./Fa";
+
+export function User(
+  props: {
+    user: SupportsFlags &
+      Pick<UserType, "uid" | "name" | "discordId" | "discordAvatar"> & {
+        badgeId?: number;
+      };
+    showAvatar?: boolean;
+  } & UserFlagOptions,
+): JSXElement {
+  return (
+    <div class="grid grid-cols-[1.25em_max-content_auto] items-center justify-items-start gap-2">
+      <Show when={props.showAvatar ?? true}>
+        <DiscordAvatar
+          discordId={props.user.discordId}
+          discordAvatar={props.user.discordAvatar}
+        />
+      </Show>
+
+      <Button
+        type="text"
+        href={`/profile/${props.user.uid}?isUid`}
+        text={props.user.name}
+        router-link
+      />
+
+      <div class="text-sub flex items-center justify-center gap-2">
+        <UserFlags
+          {...props.user}
+          isFriend={props.isFriend}
+          iconsOnly={props.iconsOnly}
+        />
+        <UserBadge id={props.user.badgeId} />
+      </div>
+    </div>
+  );
+}
+
+function UserFlags(props: SupportsFlags & UserFlagOptions): JSXElement {
+  const flags = (): UserFlag[] => getMatchingFlags(props);
+  console.log("####", props, flags());
+
+  return (
+    <For each={flags()}>
+      {(flag) => (
+        <Show when={!props.iconsOnly} fallback={<Fa icon={flag.icon} />}>
+          <div
+            aria-label={flag.description}
+            data-balloon-pos="right"
+            style={{
+              background: flag.background ?? "inherit",
+              color: flag.color ?? "inherit",
+            }}
+          >
+            {<Fa icon={flag.icon} />}
+          </div>
+        </Show>
+      )}
+    </For>
+  );
+}
+
+function UserBadge(props: { id?: number }): JSXElement {
+  const badge = (): UserBadgeType | undefined =>
+    props.id !== undefined ? badges[props.id] : undefined;
+  return (
+    <Show when={badge !== undefined}>
+      <div
+        class="rounded-md p-0.5 text-xs"
+        aria-label={badge()?.description}
+        data-balloon-pos="right"
+        style={{
+          background: badge()?.background ?? "inherit",
+          color: badge()?.color ?? "inherit",
+          ...badge()?.customStyle,
+        }}
+      >
+        <Show when={badge()?.icon}>
+          <Fa icon={badge()?.icon ?? "fa-question"} fixedWidth={true} />
+          <span class="hidden lg:inline"> {badge()?.name}</span>
+        </Show>
+      </div>
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 20335d005d87..081cf059c51b 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -16,6 +16,7 @@ import AsyncContent from "../common/AsyncContent";
 import { Button } from "../common/Button";
 import { ChartJs } from "../common/ChartJs";
 import { Fa, FaProps } from "../common/Fa";
+import { User } from "../common/User";
 
 function H2(props: { text: string; fa: FaProps }): JSXElement {
   return (
diff --git a/frontend/src/ts/controllers/badge-controller.ts b/frontend/src/ts/controllers/badge-controller.ts
index 2532ab4ed4d8..5b556a868c12 100644
--- a/frontend/src/ts/controllers/badge-controller.ts
+++ b/frontend/src/ts/controllers/badge-controller.ts
@@ -1,22 +1,28 @@
-type UserBadge = {
+import { JSX } from "solid-js/jsx-runtime";
+import { FaSolidIcon } from "../types/font-awesome";
+
+export type UserBadge = {
   id: number;
   name: string;
   description: string;
-  icon?: string;
+  icon?: FaSolidIcon;
   background?: string;
   color?: string;
-  customStyle?: string;
+  customStyle?: JSX.CSSProperties;
 };
 
-const badges: Record<number, UserBadge> = {
+export const badges: Record<number, UserBadge> = {
   1: {
     id: 1,
     name: "Developer",
     description: "I made this",
     icon: "fa-laptop",
     color: "white",
-    customStyle:
-      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
+    customStyle: {
+      animation: "rgb-bg 10s linear infinite",
+      background:
+        "linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%)",
+    },
   },
   2: {
     id: 2,
@@ -24,8 +30,11 @@ const badges: Record<number, UserBadge> = {
     description: "I helped make this",
     icon: "fa-code",
     color: "white",
-    customStyle:
-      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
+    customStyle: {
+      animation: "rgb-bg 10s linear infinite",
+      background:
+        "linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%)",
+    },
   },
   3: {
     id: 3,
@@ -33,8 +42,11 @@ const badges: Record<number, UserBadge> = {
     description: "Discord server moderator",
     icon: "fa-hammer",
     color: "white",
-    customStyle:
-      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
+    customStyle: {
+      animation: "rgb-bg 10s linear infinite",
+      background:
+        "linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
+    },
   },
   4: {
     id: 4,
@@ -114,8 +126,11 @@ const badges: Record<number, UserBadge> = {
     description: "Yes, I'm actually this fast",
     icon: "fa-rocket",
     color: "white",
-    customStyle:
-      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
+    customStyle: {
+      animation: "rgb-bg 10s linear infinite",
+      background:
+        "linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
+    },
   },
   14: {
     id: 14,
@@ -132,8 +147,11 @@ const badges: Record<number, UserBadge> = {
     icon: "fa-bomb",
     color: "white",
     background: "#093d79",
-    customStyle:
-      "animation: gold-shimmer 10s cubic-bezier(0.5, 0, 0.5, 1) infinite; background: linear-gradient(90deg, rgb(8 31 84) 0%, rgb(18 134 158) 100%); background-size: 200% 200%;",
+    customStyle: {
+      animation: "gold-shimmer 10s cubic-bezier(0.5, 0, 0.5, 1) infinite",
+      background:
+        "linear-gradient(90deg, rgb(8 31 84) 0%, rgb(18 134 158) 100%); background-size: 200% 200%;",
+    },
   },
   16: {
     id: 16,
@@ -141,8 +159,12 @@ const badges: Record<number, UserBadge> = {
     description: "Longest test with zero mistakes - 4 hours and 1 minute",
     icon: "fa-bullseye",
     color: "white",
-    customStyle:
-      "animation: gold-shimmer 10s cubic-bezier(0.5, -0.15, 0.5, 1.15) infinite; background: linear-gradient(45deg, #b8860b 0%, #daa520 25%, #ffd700 50%, #daa520 75%, #b8860b 100%); background-size: 200% 200%;",
+    customStyle: {
+      animation:
+        "gold-shimmer 10s cubic-bezier(0.5, -0.15, 0.5, 1.15) infinite",
+      background:
+        "linear-gradient(45deg, #b8860b 0%, #daa520 25%, #ffd700 50%, #daa520 75%, #b8860b 100%); background-size: 200% 200%;",
+    },
   },
   17: {
     id: 17,
@@ -150,8 +172,11 @@ const badges: Record<number, UserBadge> = {
     description: "Ferb, I know what we're gonna do today...",
     icon: "fa-sun",
     color: "white",
-    customStyle:
-      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
+    customStyle: {
+      animation: "rgb-bg 10s linear infinite",
+      background:
+        "linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
+    },
   },
 };
 
@@ -175,7 +200,9 @@ export function getHTMLById(
     style += `color: ${badge.color};`;
   }
   if (badge?.customStyle !== undefined) {
-    style += badge.customStyle;
+    style += Object.entries(badge.customStyle)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join(";");
   }
 
   const badgeName = badge?.name ?? "Badge Name Missing";
diff --git a/frontend/src/ts/controllers/user-flag-controller.ts b/frontend/src/ts/controllers/user-flag-controller.ts
index 790f83dcd8bc..58d588eb2c64 100644
--- a/frontend/src/ts/controllers/user-flag-controller.ts
+++ b/frontend/src/ts/controllers/user-flag-controller.ts
@@ -1,3 +1,5 @@
+import { FaSolidIcon } from "../types/font-awesome";
+
 const flags: UserFlag[] = [
   {
     name: "Prime Ape",
@@ -34,17 +36,16 @@ export type SupportsFlags = {
   isFriend?: boolean;
 };
 
-type UserFlag = {
+export type UserFlag = {
   readonly name: string;
   readonly description: string;
-  readonly icon: string;
+  readonly icon: FaSolidIcon;
   readonly color?: string;
   readonly background?: string;
-  readonly customStyle?: string;
   test(source: SupportsFlags): boolean;
 };
 
-type UserFlagOptions = {
+export type UserFlagOptions = {
   iconsOnly?: boolean;
   isFriend?: boolean;
 };
@@ -53,7 +54,7 @@ const USER_FLAG_OPTIONS_DEFAULT: UserFlagOptions = {
   iconsOnly: false,
 };
 
-function getMatchingFlags(source: SupportsFlags): UserFlag[] {
+export function getMatchingFlags(source: SupportsFlags): UserFlag[] {
   const result = flags.filter((it) => it.test(source));
   return result;
 }
@@ -71,9 +72,6 @@ function toHtml(flag: UserFlag, formatOptions: UserFlagOptions): string {
   if (flag?.color !== undefined) {
     style.push(`color: ${flag.color};`);
   }
-  if (flag?.customStyle !== undefined) {
-    style.push(flag.customStyle);
-  }
 
   const balloon = `aria-label="${flag.description}" data-balloon-pos="right"`;
 

From 7b7a5e46d3920484d5caf78a79f736b27604a5d5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 3 Feb 2026 16:26:47 +0100
Subject: [PATCH 06/13] button, headers

---
 .../components/common/Button.spec.tsx         | 19 ++++++++++++++++-
 frontend/src/ts/components/common/Button.tsx  |  3 +++
 frontend/src/ts/components/common/Headers.tsx | 21 +++++++++++++++----
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/frontend/__tests__/components/common/Button.spec.tsx b/frontend/__tests__/components/common/Button.spec.tsx
index 7f073576e586..0488c8b81d9a 100644
--- a/frontend/__tests__/components/common/Button.spec.tsx
+++ b/frontend/__tests__/components/common/Button.spec.tsx
@@ -18,6 +18,7 @@ describe("Button component", () => {
     const button = container.querySelector("button");
     expect(button).toBeTruthy();
     expect(button).toHaveTextContent("Click me");
+    expect(button).not.toBeDisabled();
   });
 
   it("renders an anchor element when href is provided", () => {
@@ -269,7 +270,8 @@ describe("Button component", () => {
     expect(anchor).toHaveAttribute("aria-label", "test");
     expect(anchor).toHaveAttribute("data-balloon-pos", "down");
   });
-  it("applies router-link to ancor", () => {
+
+  it("applies router-link to anchor", () => {
     const { container } = render(() => (
       <Button href="http://example.com" text="Hello" router-link />
     ));
@@ -277,4 +279,19 @@ describe("Button component", () => {
     const anchor = container.querySelector("a");
     expect(anchor).toHaveAttribute("router-link", "");
   });
+
+  it("applies disabled to button", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          /** */
+        }}
+        text="Hello"
+        disabled={true}
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button).toBeDisabled();
+  });
 });
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index f2ed250163d6..40ef3c4d34ec 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -21,11 +21,13 @@ type ButtonProps = BaseProps & {
   href?: never;
   sameTarget?: true;
   active?: boolean;
+  disabled?: boolean;
 };
 
 type AnchorProps = BaseProps & {
   href: string;
   onClick?: never;
+  disabled?: never;
 };
 
 export function Button(props: ButtonProps | AnchorProps): JSXElement {
@@ -87,6 +89,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           onClick={() => props.onClick?.()}
           {...ariaLabel()}
           {...(props["router-link"] ? { "router-link": "" } : {})}
+          disabled={props.disabled ?? false}
         >
           {content}
         </button>
diff --git a/frontend/src/ts/components/common/Headers.tsx b/frontend/src/ts/components/common/Headers.tsx
index f7f2fcfb2e77..47d00ee34819 100644
--- a/frontend/src/ts/components/common/Headers.tsx
+++ b/frontend/src/ts/components/common/Headers.tsx
@@ -1,11 +1,24 @@
-import { JSXElement } from "solid-js";
+import { JSXElement, Show } from "solid-js";
 
 import { Fa, FaProps } from "./Fa";
 
-export function H2(props: { text: string; fa: FaProps }): JSXElement {
+export function H1(props: { text: string; fa?: FaProps }): JSXElement {
   return (
-    <h2 class="text-sub flex place-items-center gap-4 pb-4 text-4xl">
-      <Fa {...props.fa} />
+    <h1 class="text-sub flex place-items-center gap-4 pb-4 text-4xl">
+      <Show when={props.fa}>
+        <Fa {...(props.fa as FaProps)} />
+      </Show>
+      {props.text}
+    </h1>
+  );
+}
+
+export function H2(props: { text: string; fa?: FaProps }): JSXElement {
+  return (
+    <h2 class="text-sub flex place-items-center gap-4 pb-4 text-2xl">
+      <Show when={props.fa}>
+        <Fa {...(props.fa as FaProps)} />
+      </Show>
       {props.text}
     </h2>
   );

From 2a03d7c3696d1748388f52907a707977379cd9a3 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 3 Feb 2026 16:37:16 +0100
Subject: [PATCH 07/13] add maxBreakpoint and alignment to table, rename
 sortableHeaderMeta to headerMeta

---
 .../src/ts/components/ui/table/DataTable.tsx  | 187 +++++++++++-------
 frontend/src/ts/components/ui/table/Table.tsx |   2 +-
 frontend/src/ts/types/tanstack-table.d.ts     |  15 +-
 3 files changed, 129 insertions(+), 75 deletions(-)

diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 683765cf6880..7ada4789d9d5 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -32,16 +32,17 @@ const SortingStateSchema = z.array(
   }),
 );
 
-export type AnyColumnDef<TData, TValue = unknown> =
+export type DataTableColumnDef<TData, TValue> =
   | ColumnDef<TData, TValue>
   | AccessorFnColumnDef<TData, TValue>
   | AccessorKeyColumnDef<TData, TValue>;
 
 type DataTableProps<TData, TValue> = {
   id: string;
-  columns: AnyColumnDef<TData, TValue>[];
+  columns: DataTableColumnDef<TData, TValue>[];
   data: TData[];
   fallback?: JSXElement;
+  hideHeader?: true;
 };
 
 export function DataTable<TData, TValue = unknown>(
@@ -77,7 +78,11 @@ export function DataTable<TData, TValue = unknown>(
             ? String(col.accessorKey)
             : `__col_${index}`);
 
-        return [id, current[col.meta?.breakpoint ?? "xxs"]];
+        return [
+          id,
+          current[col.meta?.breakpoint ?? "xxs"] &&
+            !current[col.meta?.maxBreakpoint ?? "xxl"],
+        ];
       }),
     );
 
@@ -107,34 +112,92 @@ export function DataTable<TData, TValue = unknown>(
   return (
     <Show when={table.getRowModel().rows?.length} fallback={props.fallback}>
       <Table>
-        <TableHeader>
-          <For each={table.getHeaderGroups()}>
-            {(headerGroup) => (
-              <TableRow>
-                <For each={headerGroup.headers}>
-                  {(header) => (
-                    <Conditional
-                      if={header.column.getCanSort()}
-                      then={
-                        <TableHead
-                          colSpan={header.colSpan}
-                          aria-sort={
-                            header.column.getIsSorted() === "asc"
-                              ? "ascending"
-                              : header.column.getIsSorted() === "desc"
-                                ? "descending"
-                                : "none"
-                          }
-                        >
-                          <button
-                            type="button"
-                            role="button"
-                            onClick={(e) => {
-                              header.column.getToggleSortingHandler()?.(e);
+        <Show when={!props.hideHeader}>
+          <TableHeader>
+            <For each={table.getHeaderGroups()}>
+              {(headerGroup) => (
+                <TableRow>
+                  <For each={headerGroup.headers}>
+                    {(header) => (
+                      <Conditional
+                        if={header.column.getCanSort()}
+                        then={
+                          <TableHead
+                            colSpan={header.colSpan}
+                            aria-sort={
+                              header.column.getIsSorted() === "asc"
+                                ? "ascending"
+                                : header.column.getIsSorted() === "desc"
+                                  ? "descending"
+                                  : "none"
+                            }
+                          >
+                            <button
+                              type="button"
+                              role="button"
+                              onClick={(e) => {
+                                header.column.getToggleSortingHandler()?.(e);
+                              }}
+                              class="m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt"
+                              classList={{
+                                "text-left":
+                                  (header.column.columnDef.meta?.align ??
+                                    "left") === "left",
+                                "text-center":
+                                  header.column.columnDef.meta?.align ===
+                                  "center",
+                                "text-right":
+                                  header.column.columnDef.meta?.align ===
+                                  "right",
+                              }}
+                              {...(header.column.columnDef.meta?.headerMeta ??
+                                {})}
+                            >
+                              <Show when={!header.isPlaceholder}>
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                              </Show>
+
+                              <Switch fallback={<i class="fa-fw"></i>}>
+                                <Match
+                                  when={header.column.getIsSorted() === "asc"}
+                                >
+                                  <Fa
+                                    icon={"fa-sort-up"}
+                                    fixedWidth
+                                    aria-hidden="true"
+                                  />
+                                </Match>
+                                <Match
+                                  when={header.column.getIsSorted() === "desc"}
+                                >
+                                  <Fa
+                                    icon={"fa-sort-down"}
+                                    fixedWidth
+                                    aria-hidden="true"
+                                  />
+                                </Match>
+                              </Switch>
+                            </button>
+                          </TableHead>
+                        }
+                        else={
+                          <TableHead
+                            colSpan={header.colSpan}
+                            classList={{
+                              "text-left":
+                                (header.column.columnDef.meta?.align ??
+                                  "left") === "left",
+                              "text-center":
+                                header.column.columnDef.meta?.align ===
+                                "center",
+                              "text-right":
+                                header.column.columnDef.meta?.align === "right",
                             }}
-                            class="m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 text-left font-normal whitespace-nowrap text-sub hover:bg-sub-alt"
-                            {...(header.column.columnDef.meta
-                              ?.sortableHeaderMeta ?? {})}
+                            {...(header.column.columnDef.meta?.headerMeta ??
+                              {})}
                           >
                             <Show when={!header.isPlaceholder}>
                               {flexRender(
@@ -142,47 +205,16 @@ export function DataTable<TData, TValue = unknown>(
                                 header.getContext(),
                               )}
                             </Show>
-
-                            <Switch fallback={<i class="fa-fw"></i>}>
-                              <Match
-                                when={header.column.getIsSorted() === "asc"}
-                              >
-                                <Fa
-                                  icon={"fa-sort-up"}
-                                  fixedWidth
-                                  aria-hidden="true"
-                                />
-                              </Match>
-                              <Match
-                                when={header.column.getIsSorted() === "desc"}
-                              >
-                                <Fa
-                                  icon={"fa-sort-down"}
-                                  fixedWidth
-                                  aria-hidden="true"
-                                />
-                              </Match>
-                            </Switch>
-                          </button>
-                        </TableHead>
-                      }
-                      else={
-                        <TableHead colSpan={header.colSpan}>
-                          <Show when={!header.isPlaceholder}>
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                          </Show>
-                        </TableHead>
-                      }
-                    />
-                  )}
-                </For>
-              </TableRow>
-            )}
-          </For>
-        </TableHeader>
+                          </TableHead>
+                        }
+                      />
+                    )}
+                  </For>
+                </TableRow>
+              )}
+            </For>
+          </TableHeader>
+        </Show>
         <TableBody>
           <For each={table.getRowModel().rows}>
             {(row) => (
@@ -197,7 +229,18 @@ export function DataTable<TData, TValue = unknown>(
                           })
                         : (cell.column.columnDef.meta?.cellMeta ?? {});
                     return (
-                      <TableCell {...cellMeta}>
+                      <TableCell
+                        {...cellMeta}
+                        classList={{
+                          "text-left":
+                            (cell.column.columnDef.meta?.align ?? "left") ===
+                            "left",
+                          "text-center":
+                            cell.column.columnDef.meta?.align === "center",
+                          "text-right":
+                            cell.column.columnDef.meta?.align === "right",
+                        }}
+                      >
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext(),
diff --git a/frontend/src/ts/components/ui/table/Table.tsx b/frontend/src/ts/components/ui/table/Table.tsx
index 88f1abd7390f..e625bb19d541 100644
--- a/frontend/src/ts/components/ui/table/Table.tsx
+++ b/frontend/src/ts/components/ui/table/Table.tsx
@@ -57,7 +57,7 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
     <th
       aria-label={local["aria-label"]}
       class={cn(
-        "has-button:p-0 appearance-none p-2 text-left align-bottom text-xs font-normal text-sub",
+        "has-button:p-0 appearance-none p-2 align-bottom text-xs font-normal text-sub",
         local.class,
       )}
       {...others}
diff --git a/frontend/src/ts/types/tanstack-table.d.ts b/frontend/src/ts/types/tanstack-table.d.ts
index d69863e3b835..b0719fca4858 100644
--- a/frontend/src/ts/types/tanstack-table.d.ts
+++ b/frontend/src/ts/types/tanstack-table.d.ts
@@ -12,6 +12,17 @@ declare module "@tanstack/solid-table" {
      */
     breakpoint?: BreakpointKey;
 
+    /**
+     * define maximal breakpoint for the column to be visible.
+     * If not set, the column is always visible
+     */
+    maxBreakpoint?: BreakpointKey;
+
+    /**
+     * align header and cells, default: `left`
+     */
+    align?: "left" | "right" | "center";
+
     /**
      * additional attributes to be set on the table cell.
      * Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
@@ -24,9 +35,9 @@ declare module "@tanstack/solid-table" {
         }) => JSX.HTMLAttributes<HTMLTableCellElement>);
 
     /**
-     * additional attributes to be set on the header if it is sortable
+     * additional attributes to be set on the header
      * Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
      */
-    sortableHeaderMeta?: JSX.HTMLAttributes;
+    headerMeta?: JSX.HTMLAttributes;
   }
 }

From 6857d2f29fff011b87896970fc017afb6c4d8585 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 3 Feb 2026 16:42:36 +0100
Subject: [PATCH 08/13] run format-fix

---
 frontend/src/ts/components/common/Headers.tsx       | 6 +++---
 frontend/src/ts/components/common/LoadingCircle.tsx | 2 +-
 frontend/src/ts/components/common/User.tsx          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/components/common/Headers.tsx b/frontend/src/ts/components/common/Headers.tsx
index 47d00ee34819..775430c51e8b 100644
--- a/frontend/src/ts/components/common/Headers.tsx
+++ b/frontend/src/ts/components/common/Headers.tsx
@@ -4,7 +4,7 @@ import { Fa, FaProps } from "./Fa";
 
 export function H1(props: { text: string; fa?: FaProps }): JSXElement {
   return (
-    <h1 class="text-sub flex place-items-center gap-4 pb-4 text-4xl">
+    <h1 class="flex place-items-center gap-4 pb-4 text-4xl text-sub">
       <Show when={props.fa}>
         <Fa {...(props.fa as FaProps)} />
       </Show>
@@ -15,7 +15,7 @@ export function H1(props: { text: string; fa?: FaProps }): JSXElement {
 
 export function H2(props: { text: string; fa?: FaProps }): JSXElement {
   return (
-    <h2 class="text-sub flex place-items-center gap-4 pb-4 text-2xl">
+    <h2 class="flex place-items-center gap-4 pb-4 text-2xl text-sub">
       <Show when={props.fa}>
         <Fa {...(props.fa as FaProps)} />
       </Show>
@@ -26,7 +26,7 @@ export function H2(props: { text: string; fa?: FaProps }): JSXElement {
 
 export function H3(props: { text: string; fa: FaProps }): JSXElement {
   return (
-    <h3 class="text-sub flex place-items-center gap-2 pb-2">
+    <h3 class="flex place-items-center gap-2 pb-2 text-sub">
       <Fa {...props.fa} />
       {props.text}
     </h3>
diff --git a/frontend/src/ts/components/common/LoadingCircle.tsx b/frontend/src/ts/components/common/LoadingCircle.tsx
index 1e1ad49098d3..180703e4a841 100644
--- a/frontend/src/ts/components/common/LoadingCircle.tsx
+++ b/frontend/src/ts/components/common/LoadingCircle.tsx
@@ -3,7 +3,7 @@ import { JSXElement } from "solid-js";
 import { Fa } from "./Fa";
 export function LoadingCircle(): JSXElement {
   return (
-    <div class="preloader text-main p-4 text-center text-2xl">
+    <div class="preloader p-4 text-center text-2xl text-main">
       <Fa icon="fa-circle-notch" fixedWidth spin />
     </div>
   );
diff --git a/frontend/src/ts/components/common/User.tsx b/frontend/src/ts/components/common/User.tsx
index 2da5f9802c90..bd92b02ac9b1 100644
--- a/frontend/src/ts/components/common/User.tsx
+++ b/frontend/src/ts/components/common/User.tsx
@@ -41,7 +41,7 @@ export function User(
         router-link
       />
 
-      <div class="text-sub flex items-center justify-center gap-2">
+      <div class="flex items-center justify-center gap-2 text-sub">
         <UserFlags
           {...props.user}
           isFriend={props.isFriend}

From f23f42acaf492b1b03466fe27a1c6bb9bc3d7ba4 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 3 Feb 2026 19:06:59 +0100
Subject: [PATCH 09/13] fix visibility

---
 frontend/src/ts/components/ui/table/DataTable.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 7ada4789d9d5..49888a21d134 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -72,17 +72,18 @@ export function DataTable<TData, TValue = unknown>(
     const current = bp();
     const result = Object.fromEntries(
       props.columns.map((col, index) => {
-        const id =
+        col.id =
           col.id ??
           ("accessorKey" in col && col.accessorKey !== null
             ? String(col.accessorKey)
             : `__col_${index}`);
 
-        return [
-          id,
+        const visible =
           current[col.meta?.breakpoint ?? "xxs"] &&
-            !current[col.meta?.maxBreakpoint ?? "xxl"],
-        ];
+          (col.meta?.maxBreakpoint === undefined ||
+            !current[col.meta?.maxBreakpoint]);
+
+        return [col.id, visible];
       }),
     );
 

From 6b8c1c31eee04f4a25d28b2973a045ab6bea2bab Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 4 Feb 2026 10:47:19 +0100
Subject: [PATCH 10/13] cleanup user classes

---
 .../ts/components/common/DiscordAvatar.tsx    | 68 ++++++++-----------
 frontend/src/ts/components/common/User.tsx    |  9 +--
 2 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/frontend/src/ts/components/common/DiscordAvatar.tsx b/frontend/src/ts/components/common/DiscordAvatar.tsx
index 82024c34b40f..aaf1a96b91c6 100644
--- a/frontend/src/ts/components/common/DiscordAvatar.tsx
+++ b/frontend/src/ts/components/common/DiscordAvatar.tsx
@@ -1,9 +1,8 @@
-import { JSXElement, Show } from "solid-js";
+import { createSignal, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { FaSolidIcon } from "../../types/font-awesome";
 
-import { Conditional } from "./Conditional";
 import { Fa } from "./Fa";
 
 //cache successful and missing avatars
@@ -15,44 +14,35 @@ export function DiscordAvatar(props: {
   size?: number;
   missingIcon?: FaSolidIcon;
 }): JSXElement {
+  const cacheKey = (): string => `${props.discordId}/${props.discordAvatar}`;
+  const [showSpinner, setShowSpinner] = createSignal(true);
   return (
-    <div class="grid grid-cols-[1.25em_max-content_auto] items-center justify-items-start gap-2">
-      <div class="col-start-1 col-end-2 row-start-1 row-end-2 grid h-(--size) w-(--size) place-content-center leading-(--size) text-(--size) transition-[opacity,filter] duration-125 [--size:1em]">
-        <Conditional
-          if={
-            props.discordId !== undefined &&
-            props.discordAvatar !== undefined &&
-            avatar[`${props.discordId}/${props.discordAvatar}`] !== false
-          }
-          then={
-            <>
-              <Show
-                when={
-                  avatar[`${props.discordId}/${props.discordAvatar}`] ===
-                  undefined
-                }
-              >
-                <Fa
-                  icon={"fa-circle-notch"}
-                  spin={true}
-                  class="absolute z-0 h-[1em] w-[1em]"
-                />
-              </Show>
-              <img
-                src={`https://cdn.discordapp.com/avatars/${props.discordId}/${props.discordAvatar}.png?size=${props.size ?? 32}`}
-                class="absolute z-10 h-[1em] w-[1em] rounded-full object-cover"
-                onLoad={() => {
-                  setAvatar(`${props.discordId}/${props.discordAvatar}`, true);
-                }}
-                onError={() => {
-                  setAvatar(`${props.discordId}/${props.discordAvatar}`, false);
-                }}
-              />
-            </>
-          }
-          else={<Fa icon={props.missingIcon ?? "fa-user-circle"} />}
-        />
-      </div>
+    <div class="relative inline-flex h-[1em] w-[1em] shrink-0 items-center justify-center">
+      <Show
+        when={
+          props.discordId !== undefined &&
+          props.discordAvatar !== undefined &&
+          avatar[cacheKey()] !== false
+        }
+        fallback={<Fa icon={props.missingIcon ?? "fa-user-circle"} />}
+      >
+        <>
+          <Show when={showSpinner()}>
+            <Fa icon={"fa-circle-notch"} spin={true} class="absolute inset-0" />
+          </Show>
+          <img
+            src={`https://cdn.discordapp.com/avatars/${props.discordId}/${props.discordAvatar}.png?size=${props.size ?? 32}`}
+            class="relative h-full w-full rounded-full object-cover"
+            onLoad={() => {
+              setAvatar(cacheKey(), true);
+              setShowSpinner(false);
+            }}
+            onError={() => {
+              setAvatar(cacheKey(), false);
+            }}
+          />
+        </>
+      </Show>
     </div>
   );
 }
diff --git a/frontend/src/ts/components/common/User.tsx b/frontend/src/ts/components/common/User.tsx
index bd92b02ac9b1..079ca696a473 100644
--- a/frontend/src/ts/components/common/User.tsx
+++ b/frontend/src/ts/components/common/User.tsx
@@ -26,21 +26,19 @@ export function User(
   } & UserFlagOptions,
 ): JSXElement {
   return (
-    <div class="grid grid-cols-[1.25em_max-content_auto] items-center justify-items-start gap-2">
+    <div class="inline-flex items-center text-sm leading-none">
       <Show when={props.showAvatar ?? true}>
         <DiscordAvatar
           discordId={props.user.discordId}
           discordAvatar={props.user.discordAvatar}
         />
       </Show>
-
       <Button
         type="text"
         href={`/profile/${props.user.uid}?isUid`}
         text={props.user.name}
         router-link
       />
-
       <div class="flex items-center justify-center gap-2 text-sub">
         <UserFlags
           {...props.user}
@@ -55,7 +53,6 @@ export function User(
 
 function UserFlags(props: SupportsFlags & UserFlagOptions): JSXElement {
   const flags = (): UserFlag[] => getMatchingFlags(props);
-  console.log("####", props, flags());
 
   return (
     <For each={flags()}>
@@ -83,7 +80,7 @@ function UserBadge(props: { id?: number }): JSXElement {
   return (
     <Show when={badge !== undefined}>
       <div
-        class="rounded-md p-0.5 text-xs"
+        class="rounded-md p-[0.5em] text-[0.75em]"
         aria-label={badge()?.description}
         data-balloon-pos="right"
         style={{
@@ -94,7 +91,7 @@ function UserBadge(props: { id?: number }): JSXElement {
       >
         <Show when={badge()?.icon}>
           <Fa icon={badge()?.icon ?? "fa-question"} fixedWidth={true} />
-          <span class="hidden lg:inline"> {badge()?.name}</span>
+          <span class="hidden md:inline"> {badge()?.name}</span>
         </Show>
       </div>
     </Show>

From abcf808ba15658cb269095cd4531ef8c1a1da88d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 4 Feb 2026 12:17:55 +0100
Subject: [PATCH 11/13] cleanup

---
 .../src/ts/components/pages/AboutPage.tsx     | 80 +++++++++++++------
 1 file changed, 55 insertions(+), 25 deletions(-)

diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 081cf059c51b..6b79cb26dc18 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -15,27 +15,10 @@ import { qsr } from "../../utils/dom";
 import AsyncContent from "../common/AsyncContent";
 import { Button } from "../common/Button";
 import { ChartJs } from "../common/ChartJs";
-import { Fa, FaProps } from "../common/Fa";
+import { Fa } from "../common/Fa";
+import { H1, H3 } from "../common/Headers";
 import { User } from "../common/User";
 
-function H2(props: { text: string; fa: FaProps }): JSXElement {
-  return (
-    <h2 class="flex place-items-center gap-4 pb-4 text-4xl text-sub">
-      <Fa {...props.fa} />
-      {props.text}
-    </h2>
-  );
-}
-
-function H3(props: { text: string; fa: FaProps }): JSXElement {
-  return (
-    <h3 class="flex place-items-center gap-2 pb-2 text-sub">
-      <Fa {...props.fa} />
-      {props.text}
-    </h3>
-  );
-}
-
 qsr("nav .view-about").on("mouseenter", () => {
   prefetch();
 });
@@ -65,6 +48,53 @@ export function AboutPage(): JSXElement {
 
   return (
     <div class="content-grid grid gap-8">
+      <section>
+        {/*TODO remove after testing */}
+        <ul>
+          <li>
+            <User
+              user={{ name: "Bob", uid: "uid", badgeId: 6, isPremium: true }}
+              isFriend={true}
+            />
+          </li>
+          <li>
+            <User
+              user={{
+                name: "Miodec",
+                uid: "uid",
+                discordId: "102819690287489024",
+                discordAvatar: "a_af6c0b8ad26fdd6bcb86ed7bb40ee6e5",
+                badgeId: 1,
+              }}
+            />
+          </li>
+          <li>
+            <User
+              user={{
+                name: "Kevin",
+                uid: "uid",
+                discordId: "invalid",
+                discordAvatar: "invalid",
+
+                banned: true,
+                lbOptOut: true,
+              }}
+            />
+          </li>
+          <li>
+            <User
+              user={{
+                name: "Stuart",
+                uid: "uid",
+
+                banned: true,
+                lbOptOut: true,
+              }}
+              iconsOnly={true}
+            />
+          </li>
+        </ul>
+      </section>
       <section class="text-center text-sub">
         Created with love by Miodec.
         <br />
@@ -174,7 +204,7 @@ export function AboutPage(): JSXElement {
         </div>
       </section>
       <section>
-        <H2 fa={{ icon: "fa-info-circle" }} text="about" />
+        <H1 fa={{ icon: "fa-info-circle" }} text="about" />
         <p>
           Monkeytype is a minimalistic and customizable typing test. It features
           many test modes, an account system to save your typing speed history,
@@ -282,7 +312,7 @@ export function AboutPage(): JSXElement {
       </section>
       <div></div>
       <section>
-        <H2 fa={{ icon: "fa-life-ring" }} text="support" />
+        <H1 fa={{ icon: "fa-life-ring" }} text="support" />
         <p>
           Thanks to everyone who has supported this project. It would not be
           possible without you and your continued support.
@@ -300,7 +330,7 @@ export function AboutPage(): JSXElement {
       </section>
       <div></div>
       <section>
-        <H2 fa={{ icon: "fa-envelope" }} text="contact" />
+        <H1 fa={{ icon: "fa-envelope" }} text="contact" />
         <p>
           If you encounter a bug, have a feature request or just want to say hi
           - here are the different ways you can contact me directly.
@@ -334,7 +364,7 @@ export function AboutPage(): JSXElement {
       </section>
       <div></div>
       <section>
-        <H2 fa={{ icon: "fa-users" }} text="credits" />
+        <H1 fa={{ icon: "fa-users" }} text="credits" />
         <p>
           <Button
             type="text"
@@ -397,7 +427,7 @@ export function AboutPage(): JSXElement {
       </Show>
       <div></div>
       <section>
-        <H2 fa={{ icon: "fa-hand-holding-usd" }} text="top supporters" />
+        <H1 fa={{ icon: "fa-hand-holding-usd" }} text="top supporters" />
         <AsyncContent
           query={supporters}
           errorMessage="Failed to get supporters"
@@ -416,7 +446,7 @@ export function AboutPage(): JSXElement {
       </section>
       <div></div>
       <section>
-        <H2 fa={{ icon: "fa-code-branch" }} text="contributors" />
+        <H1 fa={{ icon: "fa-code-branch" }} text="contributors" />
         <AsyncContent
           query={contributors}
           errorMessage="Failed to get contributors"

From 122810d6d4435449db25ddf2d47eecd71a98400c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 6 Feb 2026 10:42:57 +0100
Subject: [PATCH 12/13] fix fa dynamic icon change, add class to headers

---
 .../components/common/Button.spec.tsx         | 25 +++++++++++++
 frontend/src/ts/components/common/Fa.tsx      | 17 ++++-----
 frontend/src/ts/components/common/Headers.tsx | 36 +++++++++++++++----
 3 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/frontend/__tests__/components/common/Button.spec.tsx b/frontend/__tests__/components/common/Button.spec.tsx
index 0488c8b81d9a..b926e8a459f1 100644
--- a/frontend/__tests__/components/common/Button.spec.tsx
+++ b/frontend/__tests__/components/common/Button.spec.tsx
@@ -1,7 +1,9 @@
 import { cleanup, render } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { Button } from "../../../src/ts/components/common/Button";
+import { FaSolidIcon } from "../../../src/ts/types/font-awesome";
 
 describe("Button component", () => {
   afterEach(() => {
@@ -67,6 +69,29 @@ describe("Button component", () => {
     expect(icon).toHaveClass("fa-keyboard");
   });
 
+  it("renders icon when icon prop has changed", () => {
+    const [icon, setIcon] = createSignal<FaSolidIcon>("fa-keyboard");
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        fa={{
+          icon: icon(),
+          class: "test",
+        }}
+      />
+    ));
+
+    setIcon("fa-backward");
+
+    const i = container.querySelector("i");
+    expect(i).toBeTruthy();
+    expect(i).toHaveClass("fas");
+    expect(i).toHaveClass("fa-backward");
+    expect(i).toHaveClass("test");
+  });
+
   it("applies fa-fw class when fixedWidthIcon is true", () => {
     const { container } = render(() => (
       <Button
diff --git a/frontend/src/ts/components/common/Fa.tsx b/frontend/src/ts/components/common/Fa.tsx
index ae8d20b92543..7af573e4fa97 100644
--- a/frontend/src/ts/components/common/Fa.tsx
+++ b/frontend/src/ts/components/common/Fa.tsx
@@ -14,14 +14,15 @@ export function Fa(props: FaProps): JSXElement {
   const variant = (): string => props.variant ?? "solid";
   return (
     <i
-      class={cn(props.icon, props.class)}
-      classList={{
-        ["fas"]: variant() === "solid",
-        ["far"]: variant() === "regular",
-        ["fab"]: variant() === "brand",
-        ["fa-fw"]: props.fixedWidth === true,
-        ["fa-spin"]: props.spin === true,
-      }}
+      class={cn(
+        props.icon,
+        variant() === "solid" && "fas",
+        variant() === "regular" && "far",
+        variant() === "brand" && "fab",
+        props.fixedWidth && "fa-fw",
+        props.spin && "fa-spin",
+        props.class,
+      )}
       style={{
         "font-size": props.size !== undefined ? `${props.size}em` : undefined,
       }}
diff --git a/frontend/src/ts/components/common/Headers.tsx b/frontend/src/ts/components/common/Headers.tsx
index 775430c51e8b..e9e5946b64b4 100644
--- a/frontend/src/ts/components/common/Headers.tsx
+++ b/frontend/src/ts/components/common/Headers.tsx
@@ -1,10 +1,21 @@
 import { JSXElement, Show } from "solid-js";
 
+import { cn } from "../../utils/cn";
+
 import { Fa, FaProps } from "./Fa";
 
-export function H1(props: { text: string; fa?: FaProps }): JSXElement {
+export function H1(props: {
+  class?: string;
+  text: string;
+  fa?: FaProps;
+}): JSXElement {
   return (
-    <h1 class="flex place-items-center gap-4 pb-4 text-4xl text-sub">
+    <h1
+      class={cn(
+        "flex place-items-center gap-4 pb-4 text-4xl text-sub",
+        props.class,
+      )}
+    >
       <Show when={props.fa}>
         <Fa {...(props.fa as FaProps)} />
       </Show>
@@ -13,9 +24,18 @@ export function H1(props: { text: string; fa?: FaProps }): JSXElement {
   );
 }
 
-export function H2(props: { text: string; fa?: FaProps }): JSXElement {
+export function H2(props: {
+  class?: string;
+  text: string;
+  fa?: FaProps;
+}): JSXElement {
   return (
-    <h2 class="flex place-items-center gap-4 pb-4 text-2xl text-sub">
+    <h2
+      class={cn(
+        "flex place-items-center gap-4 pb-4 text-2xl text-sub",
+        props.class,
+      )}
+    >
       <Show when={props.fa}>
         <Fa {...(props.fa as FaProps)} />
       </Show>
@@ -24,9 +44,13 @@ export function H2(props: { text: string; fa?: FaProps }): JSXElement {
   );
 }
 
-export function H3(props: { text: string; fa: FaProps }): JSXElement {
+export function H3(props: {
+  class?: string;
+  text: string;
+  fa: FaProps;
+}): JSXElement {
   return (
-    <h3 class="flex place-items-center gap-2 pb-2 text-sub">
+    <h3 class={cn("flex place-items-center gap-2 pb-2 text-sub", props.class)}>
       <Fa {...props.fa} />
       {props.text}
     </h3>

From 8dee1433afaadffa14d04fbe710cd8eea2c38750 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 6 Feb 2026 14:52:04 +0100
Subject: [PATCH 13/13] more flexible LoadingCircle

---
 frontend/src/ts/components/common/AsyncContent.tsx  | 8 +++++---
 frontend/src/ts/components/common/LoadingCircle.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index d8d504fec9d0..e56e4173055f 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -18,6 +18,7 @@ import { LoadingCircle } from "./LoadingCircle";
 export default function AsyncContent<T>(
   props: {
     errorMessage?: string;
+    loader?: JSXElement;
   } & (
     | {
         resource: Resource<T | undefined>;
@@ -78,7 +79,8 @@ export default function AsyncContent<T>(
     return message;
   };
 
-  const loader = <LoadingCircle />;
+  const loader = (): JSXElement =>
+    props.loader ?? <LoadingCircle class="p-4 text-center text-2xl" />;
 
   const errorText = (err: unknown): JSXElement => (
     <div class="error">{handleError(err)}</div>
@@ -89,7 +91,7 @@ export default function AsyncContent<T>(
         fallback={
           <>
             <Show when={source().isLoading() && !props.alwaysShowContent}>
-              {loader}
+              {loader()}
             </Show>
             <Conditional
               if={props.alwaysShowContent === true}
@@ -114,7 +116,7 @@ export default function AsyncContent<T>(
       >
         <Match when={source().isError()}>{errorText(source().error?.())}</Match>
         <Match when={source().isLoading() && !props.alwaysShowContent}>
-          {loader}
+          {loader()}
         </Match>
       </Switch>
     </ErrorBoundary>
diff --git a/frontend/src/ts/components/common/LoadingCircle.tsx b/frontend/src/ts/components/common/LoadingCircle.tsx
index 180703e4a841..50469a57bcb8 100644
--- a/frontend/src/ts/components/common/LoadingCircle.tsx
+++ b/frontend/src/ts/components/common/LoadingCircle.tsx
@@ -1,9 +1,11 @@
 import { JSXElement } from "solid-js";
 
+import { cn } from "../../utils/cn";
+
 import { Fa } from "./Fa";
-export function LoadingCircle(): JSXElement {
+export function LoadingCircle(props: { class?: string }): JSXElement {
   return (
-    <div class="preloader p-4 text-center text-2xl text-main">
+    <div class={cn("preloader text-main", props.class)}>
       <Fa icon="fa-circle-notch" fixedWidth spin />
     </div>
   );