diff --git a/js/i18n/locales/en-US/common.ftl b/js/i18n/locales/en-US/common.ftl
index 5ab551af..c28ab0a1 100644
--- a/js/i18n/locales/en-US/common.ftl
+++ b/js/i18n/locales/en-US/common.ftl
@@ -45,7 +45,7 @@ completing-sign-in = Completing sign-in…
 already-logged-in = You're already logged in.
 signed-in-as = Signed in as @{ $handle }
 signed-in-as-code = Signed in as { $handle }
-sign-in-description = Sign in with your Bluesky handle. You'll be redirected to your PDS to authorize this app.
+sign-in-description = Sign in with your Atmosphere account. You'll be redirected to your PDS to authorize this app.
 handle-label = Handle
 redirecting = Redirecting…
 sign-in-failed = Sign-in failed
@@ -82,7 +82,8 @@ pds-selector-custom-description = Enter your own PDS host URL
 pds-selector-custom-url-label = Custom PDS URL
 pds-selector-custom-url-placeholder = https://pds.example.com
 pds-selector-learn-more = Learn more about self-hosting
-pds-selector-info = Each host has their own policies and reliability standards. Your ATProto data lives on the host you choose and you can migrate later. Note: Streamplace has its own moderation rules - you can be banned from Streamplace regardless of which host you choose.
+pds-selector-info = Each host has their own policies and reliability standards. Your ATProto data lives on the host you choose and you can migrate later.
+pds-selector-different-policies = Note that Streamplace has its own, different, moderation policies - you can be banned from Streamplace regardless of which host you choose.
 pds-selector-read-policies = Read { $label }'s <tosLink>Terms of Service</tosLink> and <privacyLink>Privacy Policy</privacyLink> before continuing.
 pds-selector-handle-policy-checkbox = I have read and agree to the <policyLink>handle policy</policyLink>
 
diff --git a/js/i18n/public/locales/en-US/common.json b/js/i18n/public/locales/en-US/common.json
index f3bf7c04..9b79eea0 100644
--- a/js/i18n/public/locales/en-US/common.json
+++ b/js/i18n/public/locales/en-US/common.json
@@ -35,7 +35,7 @@
   "already-logged-in": "You're already logged in.",
   "signed-in-as": "Signed in as @{$handle}",
   "signed-in-as-code": "Signed in as {$handle}",
-  "sign-in-description": "Sign in with your Bluesky handle. You'll be redirected to your PDS to authorize this app.",
+  "sign-in-description": "Sign in with your Atmosphere account. You'll be redirected to your PDS to authorize this app.",
   "handle-label": "Handle",
   "redirecting": "Redirecting…",
   "sign-in-failed": "Sign-in failed",
@@ -53,7 +53,8 @@
   "pds-selector-custom-url-label": "Custom PDS URL",
   "pds-selector-custom-url-placeholder": "https://pds.example.com",
   "pds-selector-learn-more": "Learn more about self-hosting",
-  "pds-selector-info": "Each host has their own policies and reliability standards. Your ATProto data lives on the host you choose and you can migrate later. Note: Streamplace has its own moderation rules - you can be banned from Streamplace regardless of which host you choose.",
+  "pds-selector-info": "Each host has their own policies and reliability standards. Your ATProto data lives on the host you choose and you can migrate later.",
+  "pds-selector-different-policies": "Note that Streamplace has its own, different, moderation policies - you can be banned from Streamplace regardless of which host you choose.",
   "pds-selector-read-policies": "Read {$label}'s <tosLink>Terms of Service</tosLink> and <privacyLink>Privacy Policy</privacyLink> before continuing.",
   "pds-selector-handle-policy-checkbox": "I have read and agree to the <policyLink>handle policy</policyLink>",
   "profile": "Profile",
@@ -169,9 +170,9 @@
   "upload-updating": "Updating...",
   "upload-view-video": "View video →",
   "upload-waiting-process": "Waiting to process...",
-  "create-key-description-delete-if-exposed": "If you think your stream key has been exposed, delete it immediately and create a new one!",
-  "create-key-description-staff": "Staff will never, ever ask for your stream key!",
-  "create-key-do-not-share": "DO NOT SHARE THIS KEY OR SHOW IT ON STREAM, as ANYONE with this key may be able to stream from your account!",
+  "create-key-description-delete-if-exposed": "If you think your stream key has been exposed, delete it immediately and create a new key.",
+  "create-key-description-staff": "We will never, ever, ask for your key.",
+  "create-key-do-not-share": "DO NOT SHARE THIS KEY, including showing it on stream. Anyone in possession of your key may be able to stream from your account.",
   "create-key-title": "Are you sure about creating a new stream key?",
   "create-stream-key": "Create Stream Key",
   "stream-key": "Stream Key",
diff --git a/js/web/package.json b/js/web/package.json
index 14729381..26c8139a 100644
--- a/js/web/package.json
+++ b/js/web/package.json
@@ -35,6 +35,7 @@
     "@tiptap/starter-kit": "^3.26.0",
     "@tiptap/suggestion": "^3.26.0",
     "class-variance-authority": "^0.6.1",
+    "color": "^5.0.3",
     "emojibase": "^17.0.0",
     "frimousse": "^0.3.0",
     "hls.js": "~1.6.16",
diff --git a/js/web/public/locales/en-US/common.json b/js/web/public/locales/en-US/common.json
index 91a9c101..9b79eea0 100644
--- a/js/web/public/locales/en-US/common.json
+++ b/js/web/public/locales/en-US/common.json
@@ -29,16 +29,13 @@
   "go-back": "Go Back",
   "sign-in": "Sign In",
   "log-in": "Log in",
-  "sign-up": "Sign up",
   "go-home": "Go home",
   "try-again": "Try again",
   "completing-sign-in": "Completing sign-in…",
-  "use-login-page": "Don't see the popup? Use the login page",
-  "closing-in": "Closing in {$count}…",
   "already-logged-in": "You're already logged in.",
   "signed-in-as": "Signed in as @{$handle}",
   "signed-in-as-code": "Signed in as {$handle}",
-  "sign-in-description": "Sign in with your Bluesky handle. You'll be redirected to your PDS to authorize this app.",
+  "sign-in-description": "Sign in with your Atmosphere account. You'll be redirected to your PDS to authorize this app.",
   "handle-label": "Handle",
   "redirecting": "Redirecting…",
   "sign-in-failed": "Sign-in failed",
@@ -56,7 +53,8 @@
   "pds-selector-custom-url-label": "Custom PDS URL",
   "pds-selector-custom-url-placeholder": "https://pds.example.com",
   "pds-selector-learn-more": "Learn more about self-hosting",
-  "pds-selector-info": "Each host has their own policies and reliability standards. Your ATProto data lives on the host you choose and you can migrate later. Note: Streamplace has its own moderation rules - you can be banned from Streamplace regardless of which host you choose.",
+  "pds-selector-info": "Each host has their own policies and reliability standards. Your ATProto data lives on the host you choose and you can migrate later.",
+  "pds-selector-different-policies": "Note that Streamplace has its own, different, moderation policies - you can be banned from Streamplace regardless of which host you choose.",
   "pds-selector-read-policies": "Read {$label}'s <tosLink>Terms of Service</tosLink> and <privacyLink>Privacy Policy</privacyLink> before continuing.",
   "pds-selector-handle-policy-checkbox": "I have read and agree to the <policyLink>handle policy</policyLink>",
   "profile": "Profile",
@@ -172,9 +170,9 @@
   "upload-updating": "Updating...",
   "upload-view-video": "View video →",
   "upload-waiting-process": "Waiting to process...",
-  "create-key-description-delete-if-exposed": "If you think your stream key has been exposed, delete it immediately and create a new one!",
-  "create-key-description-staff": "Staff will never, ever ask for your stream key!",
-  "create-key-do-not-share": "DO NOT SHARE THIS KEY OR SHOW IT ON STREAM, as ANYONE with this key may be able to stream from your account!",
+  "create-key-description-delete-if-exposed": "If you think your stream key has been exposed, delete it immediately and create a new key.",
+  "create-key-description-staff": "We will never, ever, ask for your key.",
+  "create-key-do-not-share": "DO NOT SHARE THIS KEY, including showing it on stream. Anyone in possession of your key may be able to stream from your account.",
   "create-key-title": "Are you sure about creating a new stream key?",
   "create-stream-key": "Create Stream Key",
   "stream-key": "Stream Key",
diff --git a/js/web/src/components/auth/login-modal.tsx b/js/web/src/components/auth/login-modal.tsx
index a6071a71..6ca369e3 100644
--- a/js/web/src/components/auth/login-modal.tsx
+++ b/js/web/src/components/auth/login-modal.tsx
@@ -18,13 +18,12 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useSession } from "@/lib/session";
 import { useStore } from "@/lib/store";
 import { useActorTypeahead, type Actor } from "@streamplace/core";
-import { AtSign, CornerDownLeft, Info } from "lucide-react";
+import { AtSign, CornerDownLeft } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -179,10 +178,10 @@ export function LoginModal() {
       }}
     >
       <DialogContent>
-        <DialogHeader>
+        <div className="mb-2 flex flex-col gap-2">
           <DialogTitle>{t("log-in")}</DialogTitle>
           <DialogDescription>{t("sign-in-description")}</DialogDescription>
-        </DialogHeader>
+        </div>
         {submitting ? (
           <div className="space-y-3 py-6 text-center">
             <p className="text-sm text-(--color-fg-muted)">
@@ -198,26 +197,7 @@ export function LoginModal() {
             </Button>
           </div>
         ) : (
-          <form onSubmit={onSubmit} className="space-y-4">
-            <div className="flex flex-wrap items-center gap-x-1 gap-y-0.5 text-sm text-(--color-fg-muted)">
-              <span>Sign in using your handle on the AT Protocol</span>
-              <button
-                type="button"
-                onClick={() =>
-                  window.open(
-                    "https://atproto.academy/docs/Authentication/why",
-                    "_blank",
-                    "noopener",
-                  )
-                }
-                className="inline-flex items-center text-(--color-accent) hover:underline"
-                aria-label="Why ATProto?"
-              >
-                <Info className="size-3.5" />
-              </button>
-              <span>(e.g. your Bluesky handle)</span>
-            </div>
-
+          <form onSubmit={onSubmit} className="space-y-2">
             <div>
               <label
                 htmlFor="login-handle"
diff --git a/js/web/src/components/auth/pds-host-selector-modal.tsx b/js/web/src/components/auth/pds-host-selector-modal.tsx
index a109d068..b4a1e830 100644
--- a/js/web/src/components/auth/pds-host-selector-modal.tsx
+++ b/js/web/src/components/auth/pds-host-selector-modal.tsx
@@ -22,7 +22,7 @@ import { useStore } from "@/lib/store";
 import { SHUFFLED_PDS_HOSTS, type PdsHost } from "@streamplace/core";
 import { Check, ExternalLink } from "lucide-react";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 interface PdsHostSelectorModalProps {
   open: boolean;
@@ -189,33 +189,33 @@ export function PdsHostSelectorModal({
             <ExternalLink className="size-3.5" />
           </button>
 
-          <div className="rounded-md border border-(--color-border) bg-(--color-bg-overlay) p-3 text-sm text-(--color-fg-muted)">
+          <div className="space-y-2 rounded-md border border-(--color-border) bg-(--color-bg-overlay) p-3 text-sm text-(--color-fg-muted)">
             <p>{t("pds-selector-info")}</p>
             {!useCustom && (
-              <p className="mt-2">
-                {t("pds-selector-read-policies", {
-                  label: selectedHostObj.label,
-                  tosLink: (children: React.ReactNode) => (
-                    <button
-                      type="button"
-                      onClick={handleTOS}
-                      className="text-(--color-accent) hover:underline"
-                    >
-                      {children}
-                    </button>
-                  ),
-                  privacyLink: (children: React.ReactNode) => (
-                    <button
-                      type="button"
-                      onClick={handlePrivacy}
-                      className="text-(--color-accent) hover:underline"
-                    >
-                      {children}
-                    </button>
-                  ),
-                })}
+              <p>
+                <Trans
+                  i18nKey="pds-selector-read-policies"
+                  values={{ label: selectedHostObj.label }}
+                  components={{
+                    tosLink: (
+                      <button
+                        type="button"
+                        onClick={handleTOS}
+                        className="text-secondary hover:underline"
+                      />
+                    ),
+                    privacyLink: (
+                      <button
+                        type="button"
+                        onClick={handlePrivacy}
+                        className="text-secondary hover:underline"
+                      />
+                    ),
+                  }}
+                />
               </p>
             )}
+            <p>{t("pds-selector-different-policies")}</p>
           </div>
 
           {!useCustom && selectedHostObj.handlePolicyDocs && (
@@ -227,17 +227,18 @@ export function PdsHostSelectorModal({
                 className="mt-0.5"
               />
               <span className="text-sm">
-                {t("pds-selector-handle-policy-checkbox", {
-                  policyLink: (children: React.ReactNode) => (
-                    <button
-                      type="button"
-                      onClick={handleHandlePolicy}
-                      className="text-(--color-accent) hover:underline"
-                    >
-                      {children}
-                    </button>
-                  ),
-                })}
+                <Trans
+                  i18nKey="pds-selector-handle-policy-checkbox"
+                  components={{
+                    policyLink: (
+                      <button
+                        type="button"
+                        onClick={handleHandlePolicy}
+                        className="text-secondary hover:underline"
+                      />
+                    ),
+                  }}
+                />
               </span>
             </label>
           )}
diff --git a/js/web/src/components/dashboard/control-panel.tsx b/js/web/src/components/dashboard/control-panel.tsx
index e566d54d..46b7a2c7 100644
--- a/js/web/src/components/dashboard/control-panel.tsx
+++ b/js/web/src/components/dashboard/control-panel.tsx
@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "../ui/button";
+import { SidebarTrigger } from "../ui/sidebar";
 import { useLayout } from "./hooks/use-layout";
 import {
   removeLeafAt,
@@ -213,7 +214,8 @@ export function ControlPanel({ store, user }: ControlPanelProps) {
       <div className="relative flex h-full min-h-0 flex-col">
         {/* Toolbar */}
         {!theatre && (
-          <div className="flex shrink-0 items-center gap-2 border-b border-(--color-border) bg-(--color-bg-elevated) px-3 py-2">
+          <div className="flex shrink-0 items-center gap-2 bg-(--color-sidebar) px-3 py-2.5">
+            <SidebarTrigger />
             {/* Preset selector */}
             {presets.length > 0 && (
               <select
diff --git a/js/web/src/components/dashboard/dashboard-chrome.tsx b/js/web/src/components/dashboard/dashboard-chrome.tsx
index 66a22bfa..24814dc4 100644
--- a/js/web/src/components/dashboard/dashboard-chrome.tsx
+++ b/js/web/src/components/dashboard/dashboard-chrome.tsx
@@ -106,6 +106,9 @@ export default function DashboardChrome() {
 
   const user = state.session.did;
 
+  // are we in /dashboard/? if so hide the header
+  const isDashboardRoot = window.location.pathname === "/dashboard";
+
   return (
     <LivestreamProvider user={user}>
       {(store) => (
@@ -123,8 +126,8 @@ export default function DashboardChrome() {
             >
               {!theatre && <DashboardSidebar />}
               <SidebarInset>
-                {!theatre && (
-                  <header className="bg-sidebar z-99 flex h-12 items-center gap-2 border-b border-(--color-border) px-4">
+                {!theatre && !isDashboardRoot && (
+                  <header className="bg-sidebar z-99 flex h-12 items-center gap-2 px-4">
                     <SidebarTrigger className="-ml-1" />
                     <h1 className="font-display text-lg font-semibold">
                       {t("nav-dashboard", {
diff --git a/js/web/src/components/header.tsx b/js/web/src/components/header.tsx
index bf2b37ca..9a049540 100644
--- a/js/web/src/components/header.tsx
+++ b/js/web/src/components/header.tsx
@@ -7,6 +7,7 @@ import { useSession } from "../lib/session";
 import { useStore } from "../lib/store";
 import { usePDSAgent, useUserProfile } from "../lib/store/hooks";
 import StreamplaceSvg from "./svg/streamplace-bw";
+import { Button } from "./ui/button";
 import { SidebarTrigger } from "./ui/sidebar";
 
 interface SearchResult {
@@ -271,11 +272,11 @@ export function UserProfile({
 }) {
   return (
     <div className="flex items-center gap-4">
-      <nav className="flex items-center gap-4">
+      <nav className="flex items-center gap-2 pr-3">
         {did ? (
           <Link
             to="/settings/account"
-            className="flex items-center gap-2 rounded-full py-1 pr-3 pl-1 transition-colors hover:bg-(--color-bg-overlay)"
+            className="flex items-center gap-2 rounded-full py-1 pl-1 transition-colors hover:bg-(--color-bg-overlay)"
             title={displayName ? t("signed-in-as", { handle }) : t("profile")}
             aria-label={
               displayName ? t("signed-in-as", { handle }) : t("profile")
@@ -297,13 +298,21 @@ export function UserProfile({
             )}
           </Link>
         ) : (
-          <button
-            type="button"
-            onClick={() => useStore.getState().openLoginModal()}
-            className="text-sm font-medium text-(--color-fg-muted) transition-colors hover:text-(--color-fg)"
-          >
-            {t("log-in")}
-          </button>
+          <>
+            <Button
+              onClick={() => useStore.getState().openLoginModal()}
+              variant="outline"
+              className="rounded-full text-sm"
+            >
+              {t("log-in")}
+            </Button>
+            <Button
+              onClick={() => useStore.getState().openPdsModal()}
+              className="rounded-full text-sm"
+            >
+              {t("sign-up", { defaultValue: "Sign up" })}
+            </Button>
+          </>
         )}
       </nav>
     </div>
diff --git a/js/web/src/components/stream/chat-input.tsx b/js/web/src/components/stream/chat-input.tsx
index 66f0b034..afb78fb6 100644
--- a/js/web/src/components/stream/chat-input.tsx
+++ b/js/web/src/components/stream/chat-input.tsx
@@ -491,14 +491,14 @@ export function ChatInput({ store }: { store: LivestreamStore }) {
 
   if (!isAuthed) {
     return (
-      <div className="py-1 text-center text-sm text-(--color-fg-muted)">
-        <button
+      <div className="py-2 text-center text-sm text-(--color-fg-muted)">
+        <Button
           type="button"
           onClick={() => useAppStore.getState().openLoginModal()}
           className="font-medium text-(--color-accent) hover:underline"
         >
           {t("log-in")}
-        </button>{" "}
+        </Button>{" "}
         {t("chat-log-in-to")}
       </div>
     );
diff --git a/js/web/src/components/ui/button.tsx b/js/web/src/components/ui/button.tsx
index f19012ad..f7fdee84 100644
--- a/js/web/src/components/ui/button.tsx
+++ b/js/web/src/components/ui/button.tsx
@@ -19,6 +19,8 @@ const buttonVariants = cva(
           "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         success:
           "bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:border-success/40 dark:focus-visible:ring-success/40",
+        muted:
+          "bg-muted/10 text-muted-foreground hover:bg-muted/20 focus-visible:border-muted/40 focus-visible:ring-muted/20 dark:bg-muted/20 dark:hover:bg-muted/30 dark:focus-visible:border-muted/40 dark:focus-visible:ring-muted/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/js/web/src/components/ui/card.tsx b/js/web/src/components/ui/card.tsx
index 89a2cd15..774971ab 100644
--- a/js/web/src/components/ui/card.tsx
+++ b/js/web/src/components/ui/card.tsx
@@ -33,7 +33,7 @@ function CardMenuSection({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function CardRow({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("px-3 py-2.5", className)} {...props} />;
+  return <div className={cn("px-3", className)} {...props} />;
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
diff --git a/js/web/src/components/ui/color-picker.tsx b/js/web/src/components/ui/color-picker.tsx
new file mode 100644
index 00000000..48f30634
--- /dev/null
+++ b/js/web/src/components/ui/color-picker.tsx
@@ -0,0 +1,485 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { Slider } from "@base-ui/react";
+import Color from "color";
+import { PipetteIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+type ColorPickerContextValue = {
+  hue: number;
+  saturation: number;
+  lightness: number;
+  alpha: number;
+  mode: string;
+  setHue: (hue: number) => void;
+  setSaturation: (saturation: number) => void;
+  setLightness: (lightness: number) => void;
+  setAlpha: (alpha: number) => void;
+  setMode: (mode: string) => void;
+};
+
+const ColorPickerContext = createContext<ColorPickerContextValue | undefined>(
+  undefined,
+);
+
+export const useColorPicker = () => {
+  const context = useContext(ColorPickerContext);
+
+  if (!context) {
+    throw new Error("useColorPicker must be used within a ColorPickerProvider");
+  }
+
+  return context;
+};
+
+export type ColorPickerProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> & {
+  value?: Parameters<typeof Color>[0];
+  defaultValue?: Parameters<typeof Color>[0];
+  onChange?: (value: [number, number, number, number]) => void;
+};
+
+export const ColorPicker = ({
+  value,
+  defaultValue = "#000000",
+  onChange,
+  className,
+  ...props
+}: ColorPickerProps) => {
+  const selectedColor = Color(value);
+  const defaultColor = Color(defaultValue);
+
+  const [hue, setHue] = useState(
+    selectedColor.hue() || defaultColor.hue() || 0,
+  );
+  const [saturation, setSaturation] = useState(
+    selectedColor.saturationl() || defaultColor.saturationl() || 100,
+  );
+  const [lightness, setLightness] = useState(
+    selectedColor.lightness() || defaultColor.lightness() || 50,
+  );
+  const [alpha, setAlpha] = useState(
+    selectedColor.alpha() * 100 || defaultColor.alpha() * 100,
+  );
+  const [mode, setMode] = useState("hex");
+
+  // Update color when controlled value changes
+  useEffect(() => {
+    if (value) {
+      const color = Color(value);
+
+      setHue(color.hue());
+      setSaturation(color.saturationl());
+      setLightness(color.lightness());
+      setAlpha(color.alpha() * 100);
+    }
+  }, [value]);
+
+  // Notify parent of changes
+  useEffect(() => {
+    if (onChange) {
+      const color = Color.hsl(hue, saturation, lightness).alpha(alpha / 100);
+      const rgba = color.rgb().array();
+
+      onChange([rgba[0], rgba[1], rgba[2], alpha / 100]);
+    }
+  }, [hue, saturation, lightness, alpha, onChange]);
+
+  return (
+    <ColorPickerContext.Provider
+      value={{
+        hue,
+        saturation,
+        lightness,
+        alpha,
+        mode,
+        setHue,
+        setSaturation,
+        setLightness,
+        setAlpha,
+        setMode,
+      }}
+    >
+      <div
+        className={cn("flex size-full flex-col gap-4", className)}
+        {...props}
+      />
+    </ColorPickerContext.Provider>
+  );
+};
+
+export type ColorPickerSelectionProps = HTMLAttributes<HTMLDivElement>;
+
+export const ColorPickerSelection = memo(
+  ({ className, ...props }: ColorPickerSelectionProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const { hue, saturation, lightness, setSaturation, setLightness } =
+      useColorPicker();
+
+    const backgroundGradient = useMemo(() => {
+      return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),
+            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),
+            hsl(${hue}, 100%, 50%)`;
+    }, [hue]);
+
+    // Derive the indicator position from the current color so it tracks
+    // saturation/lightness changes from any source (drag, hue, eyedropper).
+    const positionX = saturation / 100;
+    const topLightness = positionX < 0.01 ? 100 : 50 + 50 * (1 - positionX);
+    const positionY = Math.max(0, Math.min(1, 1 - lightness / topLightness));
+
+    const handlePointerMove = useCallback(
+      (event: PointerEvent) => {
+        if (!(isDragging && containerRef.current)) {
+          return;
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = Math.max(
+          0,
+          Math.min(1, (event.clientX - rect.left) / rect.width),
+        );
+        const y = Math.max(
+          0,
+          Math.min(1, (event.clientY - rect.top) / rect.height),
+        );
+        setSaturation(x * 100);
+        const nextTopLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+
+        setLightness(nextTopLightness * (1 - y));
+      },
+      [isDragging, setSaturation, setLightness],
+    );
+
+    useEffect(() => {
+      const handlePointerUp = () => setIsDragging(false);
+
+      if (isDragging) {
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+      }
+
+      return () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+      };
+    }, [isDragging, handlePointerMove]);
+
+    return (
+      <div
+        className={cn(
+          "relative aspect-[4/3] w-full cursor-crosshair rounded",
+          className,
+        )}
+        onPointerDown={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+          handlePointerMove(e.nativeEvent);
+        }}
+        ref={containerRef}
+        style={{
+          background: backgroundGradient,
+        }}
+        {...props}
+      >
+        <div
+          className="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+          style={{
+            left: `${positionX * 100}%`,
+            top: `${positionY * 100}%`,
+            boxShadow: "0 0 0 1px rgba(0,0,0,0.5)",
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+ColorPickerSelection.displayName = "ColorPickerSelection";
+
+export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
+
+export const ColorPickerHue = ({
+  className,
+  ...props
+}: ColorPickerHueProps) => {
+  const { hue, setHue } = useColorPicker();
+
+  return (
+    <Slider.Root
+      className={cn(
+        "relative flex h-4 w-full touch-none items-center",
+        className,
+      )}
+      max={360}
+      onValueChange={(value) => setHue(Array.isArray(value) ? value[0] : value)}
+      step={1}
+      value={[hue]}
+      {...props}
+    >
+      <Slider.Control className="relative flex h-4 w-full grow items-center">
+        <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
+          <Slider.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
+        </Slider.Track>
+      </Slider.Control>
+    </Slider.Root>
+  );
+};
+
+export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;
+
+export const ColorPickerAlpha = ({
+  className,
+  ...props
+}: ColorPickerAlphaProps) => {
+  const { alpha, setAlpha } = useColorPicker();
+
+  return (
+    <Slider.Root
+      className={cn(
+        "relative flex h-4 w-full touch-none items-center",
+        className,
+      )}
+      max={100}
+      onValueChange={(value) =>
+        setAlpha(Array.isArray(value) ? value[0] : value)
+      }
+      step={1}
+      value={[alpha]}
+      {...props}
+    >
+      <Slider.Control className="relative flex h-4 w-full grow items-center">
+        <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==')] bg-center bg-repeat-x dark:bg-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAALklEQVR4nGP8+vWrCAMewM3N/QafPBM+SWLAqAGDwQBGQgoIpZOB98KoAVQwAADxzQcSVIRCfQAAAABJRU5ErkJggg==')]">
+          <div className="absolute inset-0 rounded-full bg-linear-to-r from-transparent to-black/50 dark:to-white/50" />
+          <Slider.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
+        </Slider.Track>
+      </Slider.Control>
+    </Slider.Root>
+  );
+};
+
+export type ColorPickerEyeDropperProps = ComponentProps<typeof Button>;
+
+export const ColorPickerEyeDropper = ({
+  className,
+  ...props
+}: ColorPickerEyeDropperProps) => {
+  const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+
+  const handleEyeDropper = async () => {
+    try {
+      // @ts-expect-error - EyeDropper API is experimental
+      const eyeDropper = new EyeDropper();
+      const result = await eyeDropper.open();
+      const color = Color(result.sRGBHex);
+      const [h, s, l] = color.hsl().array();
+
+      setHue(h);
+      setSaturation(s);
+      setLightness(l);
+      setAlpha(100);
+    } catch (error) {
+      console.error("EyeDropper failed:", error);
+    }
+  };
+
+  return (
+    <Button
+      className={cn("text-muted-foreground shrink-0", className)}
+      onClick={handleEyeDropper}
+      size="icon"
+      type="button"
+      variant="outline"
+      {...props}
+    >
+      <PipetteIcon size={16} />
+    </Button>
+  );
+};
+
+export type ColorPickerOutputProps = ComponentProps<typeof SelectTrigger>;
+
+const formats = ["hex", "rgb", "css", "hsl"];
+
+export const ColorPickerOutput = ({
+  className,
+  ...props
+}: ColorPickerOutputProps) => {
+  const { mode, setMode } = useColorPicker();
+
+  return (
+    <Select onValueChange={setMode} value={mode}>
+      <SelectTrigger className="h-8 w-20 shrink-0 text-xs" {...props}>
+        <SelectValue placeholder="Mode" />
+      </SelectTrigger>
+      <SelectContent>
+        {formats.map((format) => (
+          <SelectItem className="text-xs" key={format} value={format}>
+            {format.toUpperCase()}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+type PercentageInputProps = ComponentProps<typeof Input>;
+
+const PercentageInput = ({ className, ...props }: PercentageInputProps) => {
+  return (
+    <div className="relative">
+      <Input
+        readOnly
+        type="text"
+        {...props}
+        className={cn(
+          "bg-secondary h-8 w-13 rounded-l-none px-2 text-xs shadow-none",
+          className,
+        )}
+      />
+      <span className="text-muted-foreground absolute top-1/2 right-2 -translate-y-1/2 text-xs">
+        %
+      </span>
+    </div>
+  );
+};
+
+export type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement>;
+
+export const ColorPickerFormat = ({
+  className,
+  ...props
+}: ColorPickerFormatProps) => {
+  const { hue, saturation, lightness, alpha, mode } = useColorPicker();
+  const color = Color.hsl(hue, saturation, lightness, alpha / 100);
+
+  if (mode === "hex") {
+    const hex = color.hex();
+
+    return (
+      <div
+        className={cn(
+          "relative flex w-full items-center -space-x-px rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        <Input
+          className="bg-secondary h-8 rounded-r-none px-2 text-xs shadow-none"
+          readOnly
+          type="text"
+          value={hex}
+        />
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  if (mode === "rgb") {
+    const rgb = color
+      .rgb()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div
+        className={cn(
+          "flex items-center -space-x-px rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        {rgb.map((value, index) => (
+          <Input
+            className={cn(
+              "bg-secondary h-8 rounded-r-none px-2 text-xs shadow-none",
+              index ? "rounded-l-none" : "",
+              className,
+            )}
+            key={index}
+            readOnly
+            type="text"
+            value={value}
+          />
+        ))}
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  if (mode === "css") {
+    const rgb = color
+      .rgb()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div className={cn("w-full rounded-md shadow-sm", className)} {...props}>
+        <Input
+          className="bg-secondary h-8 w-full px-2 text-xs shadow-none"
+          readOnly
+          type="text"
+          value={`rgba(${rgb.join(", ")}, ${alpha}%)`}
+          {...props}
+        />
+      </div>
+    );
+  }
+
+  if (mode === "hsl") {
+    const hsl = color
+      .hsl()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div
+        className={cn(
+          "flex items-center -space-x-px rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        {hsl.map((value, index) => (
+          <Input
+            className={cn(
+              "bg-secondary h-8 rounded-r-none px-2 text-xs shadow-none",
+              index ? "rounded-l-none" : "",
+              className,
+            )}
+            key={index}
+            readOnly
+            type="text"
+            value={value}
+          />
+        ))}
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  return null;
+};
diff --git a/js/web/src/components/ui/select.tsx b/js/web/src/components/ui/select.tsx
new file mode 100644
index 00000000..b14be94b
--- /dev/null
+++ b/js/web/src/components/ui/select.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn(
+            "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none",
+            className,
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+            <CheckIcon className="pointer-events-none" />
+          </span>
+        }
+      />
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpArrow>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/js/web/src/lib/providers/bluesky-provider.tsx b/js/web/src/lib/providers/bluesky-provider.tsx
index e012c77b..f9e410d4 100644
--- a/js/web/src/lib/providers/bluesky-provider.tsx
+++ b/js/web/src/lib/providers/bluesky-provider.tsx
@@ -36,15 +36,6 @@ export default function BlueskyProvider({ children }: { children: ReactNode }) {
     if (typeof window === "undefined") return;
     const url = window.location.href;
     if (url.includes("code=") || url.includes("error=")) {
-      // In the popup case (opened by signInPopup), the /login route
-      // handles the callback itself: it does the code exchange,
-      // forwards the result to the opener via BroadcastChannel, shows
-      // a "closing in N seconds" countdown, then closes the popup
-      // itself. If we let the slice's oauthCallback run initCallback
-      // here, the library would call window.close() immediately after
-      // sending the result to the parent, and the countdown would
-      // never render.
-      if (window.opener) return;
       void oauthCallback(url);
     } else {
       void loadOAuthClient();
diff --git a/js/web/src/lib/store/slices/blueskySlice.ts b/js/web/src/lib/store/slices/blueskySlice.ts
index 8ce53b4c..923eea9f 100644
--- a/js/web/src/lib/store/slices/blueskySlice.ts
+++ b/js/web/src/lib/store/slices/blueskySlice.ts
@@ -133,6 +133,7 @@ export interface BlueskySlice {
     red: number,
     green: number,
     blue: number,
+    selfLabels?: string[],
   ) => Promise<void>;
   followUser: (subjectDID: string) => Promise<void>;
   unfollowUser: (subjectDID: string, followUri?: string) => Promise<void>;
@@ -426,6 +427,10 @@ export const createBlueskySlice: StateCreator<
       if (!(params.has("code") && params.has("state") && params.has("iss"))) {
         if (params.has("error")) {
           const blueskySlice = get() as BlueskySlice;
+          console.log("OAuth error params", {
+            error: params.get("error"),
+            error_description: params.get("error_description"),
+          });
           blueskySlice.oauthError(
             params.get("error") ?? "",
             params.get("error_description") ?? "",
@@ -783,7 +788,12 @@ export const createBlueskySlice: StateCreator<
     }
   },
 
-  createChatProfileRecord: async (red: number, green: number, blue: number) => {
+  createChatProfileRecord: async (
+    red: number,
+    green: number,
+    blue: number,
+    selfLabels?: string[],
+  ) => {
     set({
       chatProfile: {
         loading: true,
@@ -810,6 +820,7 @@ export const createBlueskySlice: StateCreator<
           green: green,
           blue: blue,
         },
+        selfLabels: selfLabels,
       };
 
       const res = await state.pdsAgent.com.atproto.repo.putRecord({
diff --git a/js/web/src/routes/login.tsx b/js/web/src/routes/login.tsx
index b89d3a18..a5592ff0 100644
--- a/js/web/src/routes/login.tsx
+++ b/js/web/src/routes/login.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSession } from "../lib/session";
 
@@ -34,33 +34,12 @@ function LoginPage() {
   const [handle, setHandle] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [countdown, setCountdown] = useState<number | null>(null);
-  // Saved on first render so we can call the real window.close() after
-  // the countdown, even though we've patched it to a no-op for the rest
-  // of the popup's lifetime.
-  const originalCloseRef = useRef<(() => void) | null>(null);
-
-  // When this page is the OAuth callback target *and* was opened as a
-  // popup by signInPopup, the library's initCallback will call
-  // window.close() (and re-throw) once it's sent the result to the
-  // opener. We don't want the popup to vanish instantly — override
-  // window.close with a no-op so we can show a "closing in a few
-  // seconds" countdown first.
-  if (
-    typeof window !== "undefined" &&
-    window.opener &&
-    !originalCloseRef.current
-  ) {
-    originalCloseRef.current = window.close.bind(window);
-    window.close = () => {};
-  }
-
   // This route doubles as the OAuth callback target. In the popup case,
-  // client.initCallback (called by BlueskyProvider) sends the result back
-  // to the opener via BroadcastChannel and throws
-  // LoginContinuedInParentWindowError after calling window.close().
-  // Our oauthCallback catch then sets authStatus to "loggedOut" (which
-  // is the signal for the countdown effect below). In the direct /login
+  // client.initCallback (called by BlueskyProvider's oauthCallback) sends
+  // the result back to the opener via BroadcastChannel, then calls
+  // window.close() to close the popup. The library also re-throws
+  // LoginContinuedInParentWindowError, which our oauthCallback catch
+  // handles by setting authStatus to "loggedOut". In the direct /login
   // case (user landed here directly, or popup-blocked fallback),
   // initCallback returns the session, state becomes "authenticated",
   // and we navigate to / via the effect further down.
@@ -69,32 +48,6 @@ function LoginPage() {
     Boolean(search.error) ||
     Boolean(state.status === "loading");
 
-  const countdownStarted = useRef(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.opener) return;
-    if (countdownStarted.current) return;
-    if (!isCallbackInFlight) return;
-    // Wait for the library's initCallback to finish — state.status is
-    // "loading" while oauthCallback is awaiting, then leaves "loading"
-    // when the popup's catch sets authStatus to "loggedOut".
-    if (state.status === "loading") return;
-
-    countdownStarted.current = true;
-    setCountdown(3);
-    const interval = setInterval(() => {
-      setCountdown((c) => (c !== null ? c - 1 : null));
-    }, 1000);
-    const timer = setTimeout(() => {
-      clearInterval(interval);
-      if (originalCloseRef.current) originalCloseRef.current();
-      else window.close();
-    }, 3000);
-    return () => {
-      clearInterval(interval);
-      clearTimeout(timer);
-    };
-  }, [state.status, isCallbackInFlight]);
-
   useEffect(() => {
     if (search.error) {
       setError(
@@ -105,9 +58,10 @@ function LoginPage() {
       return;
     }
     // In the popup case state.status never reaches "authenticated"
-    // (the session lives in the opener, not the popup), so the
-    // countdown effect above handles the close. The navigate fires
-    // only for the direct /login case.
+    // (the session lives in the opener, not the popup). The library's
+    // initCallback closes the popup via window.close() after sending
+    // the result to the parent. The navigate fires only for the direct
+    // /login case.
     if (state.status === "authenticated" && !window.opener) {
       navigate({ to: "/" });
     }
@@ -130,16 +84,6 @@ function LoginPage() {
   };
 
   if (isCallbackInFlight && state.status !== "authenticated") {
-    if (countdown !== null) {
-      return (
-        <div className="mx-auto max-w-md px-6 py-16 text-center">
-          <p className="text-(--color-fg-muted)">
-            {t("closing-in", { count: countdown }) ??
-              `Closing in ${countdown}…`}
-          </p>
-        </div>
-      );
-    }
     return (
       <div className="mx-auto max-w-md px-6 py-16 text-center">
         <p className="text-(--color-fg-muted)">{t("completing-sign-in")}</p>
diff --git a/js/web/src/routes/settings.tsx b/js/web/src/routes/settings.tsx
index cb2b2e8b..8b7adcf7 100644
--- a/js/web/src/routes/settings.tsx
+++ b/js/web/src/routes/settings.tsx
@@ -1,3 +1,5 @@
+import { useSession } from "@/lib/session";
+import { useUserProfile } from "@/lib/store/hooks";
 import { cn } from "@/lib/utils";
 import {
   createFileRoute,
@@ -19,12 +21,14 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 interface NavLink {
+  needsAuth?: boolean;
   to: string;
   icon: React.ComponentType<{ className?: string }>;
   labelKey: string;
 }
 
 interface NavGroup {
+  needsAuth?: boolean;
   icon: React.ComponentType<{ className?: string }>;
   labelKey: string;
   children: NavLink[];
@@ -36,9 +40,16 @@ type NavItem =
   | { role: "divider" };
 
 const NAV_ITEMS: NavItem[] = [
-  { role: "link", to: "/settings/account", icon: User2, labelKey: "account" },
   {
     role: "link",
+    to: "/settings/account",
+    icon: User2,
+    labelKey: "account",
+    needsAuth: true,
+  },
+  {
+    role: "link",
+    needsAuth: true,
     to: "/settings/chat-profile",
     icon: Palette,
     labelKey: "chat-profile",
@@ -59,6 +70,7 @@ const NAV_ITEMS: NavItem[] = [
   { role: "link", to: "/settings/advanced", icon: Lock, labelKey: "advanced" },
   { role: "link", to: "/settings/about", icon: Info, labelKey: "about" },
   {
+    needsAuth: true,
     role: "link",
     to: "/dashboard/stream",
     icon: Video,
@@ -141,6 +153,16 @@ function NavGroupItem({ item }: { item: NavGroup }) {
 }
 
 function DisplayNavItem({ item }: { item: NavItem }) {
+  const { t } = useTranslation("settings");
+  // get auth state from context or store
+  const { state } = useSession();
+  const userProfile = useUserProfile();
+  if (state.status !== "authenticated" || !userProfile) {
+    // if the item requires auth and we're not on that page, don't render it
+    if ("needsAuth" in item && item.needsAuth) {
+      return null;
+    }
+  }
   if (item.role === "divider") {
     return (
       <div className="my-0.5 border-b border-(--color-border) lg:mx-2 lg:my-2 lg:border-b-0" />
@@ -151,7 +173,6 @@ function DisplayNavItem({ item }: { item: NavItem }) {
     return <NavGroupItem item={item} />;
   }
 
-  const { t } = useTranslation("settings");
   const Icon = item.icon;
 
   return (
diff --git a/js/web/src/routes/settings/advanced.tsx b/js/web/src/routes/settings/advanced.tsx
index 2420bd03..340c0767 100644
--- a/js/web/src/routes/settings/advanced.tsx
+++ b/js/web/src/routes/settings/advanced.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
 import { Card, CardRow } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 import { createFileRoute } from "@tanstack/react-router";
@@ -73,7 +74,7 @@ function AdvancedSettings() {
 
         {overrideEnabled && (
           <CardRow>
-            <div className="flex gap-2">
+            <div className="flex items-center justify-center gap-2">
               <input
                 type="url"
                 value={newUrl}
@@ -85,14 +86,14 @@ function AdvancedSettings() {
                 autoComplete="off"
                 className="h-9 flex-1 rounded-lg border border-(--color-border) bg-transparent px-3 font-mono text-sm outline-none focus:border-(--color-accent)"
               />
-              <button
+              <Button
                 type="button"
+                size="lg"
                 onClick={onSubmitUrl}
                 disabled={!newUrl.trim()}
-                className="h-9 rounded-md bg-(--color-accent) px-4 text-sm font-medium text-(--color-accent-fg) hover:bg-(--color-accent-hover) disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {t("save-button")}
-              </button>
+              </Button>
             </div>
           </CardRow>
         )}
diff --git a/js/web/src/routes/settings/chat-profile.tsx b/js/web/src/routes/settings/chat-profile.tsx
index 25e3db17..645c7b57 100644
--- a/js/web/src/routes/settings/chat-profile.tsx
+++ b/js/web/src/routes/settings/chat-profile.tsx
@@ -1,3 +1,11 @@
+import {
+  ColorPicker,
+  ColorPickerFormat,
+  ColorPickerHue,
+  ColorPickerOutput,
+  ColorPickerSelection,
+} from "@/components/ui/color-picker";
+import { Switch } from "@/components/ui/switch";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -85,12 +93,9 @@ function ChatProfileSettings() {
     setSaving(true);
     try {
       const rgb = hexToRgb(color);
-      const selfLabels = isBot ? (["bot"] as const) : undefined;
+      const selfLabels = isBot ? ["bot"] : undefined;
 
-      // We need to call createChatProfileRecord which only accepts r/g/b.
-      // For selfLabels, we'd need to extend the store function or call the API directly.
-      // For now, save the color through the existing function.
-      await createChatProfileRecord(rgb.red, rgb.green, rgb.blue);
+      await createChatProfileRecord(rgb.red, rgb.green, rgb.blue, selfLabels);
 
       toast.success(t("chat-profile-saved"));
     } catch (error: any) {
@@ -127,35 +132,29 @@ function ChatProfileSettings() {
                 {t("chat-profile-preview-message")}
               </span>
             </div>
-
-            {/* Color picker */}
-            <div className="flex items-center gap-3">
-              <input
-                type="color"
-                value={color}
-                onChange={(e) => setColor(e.target.value)}
-                className="h-10 w-10 cursor-pointer rounded-md border border-(--color-border) bg-transparent p-0.5"
-              />
-              <input
-                type="text"
-                value={color}
-                onChange={(e) => {
-                  const val = e.target.value;
-                  if (/^#[0-9a-f]{6}$/i.test(val)) {
-                    setColor(val);
-                  } else if (val.length <= 7) {
-                    setColor(val);
-                  }
-                }}
-                onBlur={(e) => {
-                  if (!/^#[0-9a-f]{6}$/i.test(e.target.value)) {
-                    setColor(defaultHex);
-                  }
-                }}
-                className="w-24 rounded-md border border-(--color-border) bg-transparent px-2 py-1.5 font-mono text-sm"
-                maxLength={7}
-              />
-            </div>
+            <ColorPicker
+              key={defaultHex}
+              defaultValue={defaultHex}
+              onChange={([red, green, blue]) =>
+                setColor(
+                  rgbToHex(
+                    Math.round(red),
+                    Math.round(green),
+                    Math.round(blue),
+                  ),
+                )
+              }
+              className="bg-background max-w-sm rounded-md border p-4 shadow-sm"
+            >
+              <ColorPickerSelection />
+              <div className="flex items-center gap-4">
+                <ColorPickerHue />
+              </div>
+              <div className="flex items-center gap-2">
+                <ColorPickerOutput />
+                <ColorPickerFormat />
+              </div>
+            </ColorPicker>
           </div>
         </CardMenuSection>
       </div>
@@ -173,17 +172,7 @@ function ChatProfileSettings() {
                 {t("chat-profile-label-bot-description")}
               </p>
             </div>
-            <button
-              type="button"
-              role="switch"
-              aria-checked={isBot}
-              onClick={() => setIsBot(!isBot)}
-              className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${isBot ? "bg-(--color-accent)" : "bg-(--color-border)"} `}
-            >
-              <span
-                className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transition-transform ${isBot ? "translate-x-4" : "translate-x-0"} `}
-              />
-            </button>
+            <Switch checked={isBot} onCheckedChange={setIsBot} />
           </div>
         </CardMenuSection>
       </div>
diff --git a/js/web/src/styles.css b/js/web/src/styles.css
index 275c1370..5f51bde5 100644
--- a/js/web/src/styles.css
+++ b/js/web/src/styles.css
@@ -54,20 +54,20 @@ code {
 }
 
 .dark {
-  --background: oklch(0.1841 0.0279 308.5);
+  --background: oklch(0.13 0.03 308.5);
   --foreground: oklch(0.9498 0.0183 336.6);
-  --card: oklch(0.2432 0.04 326.7);
+  --card: oklch(0.2432 0.03 326.7);
   --card-foreground: oklch(0.9498 0.0183 336.6);
   --popover: oklch(0.2123 0.0376 318);
   --popover-foreground: oklch(0.9498 0.0183 336.6);
   --primary: oklch(0.6803 0.2158 339.7);
-  --primary-foreground: oklch(0.1841 0.0279 308.5);
+  --primary-foreground: oklch(0.13 0.02 308.5);
   --secondary: oklch(0.7207 0.1189 198.3);
-  --secondary-foreground: oklch(0.1841 0.0279 308.5);
-  --muted: oklch(0.2432 0.04 326.7);
+  --secondary-foreground: oklch(0.13 0.02 308.5);
+  --muted: oklch(0.2432 0.01 326.7);
   --muted-foreground: oklch(0.7184 0.0439 337.4);
   --accent: oklch(0.7207 0.1189 198.3);
-  --accent-foreground: oklch(0.1841 0.0279 308.5);
+  --accent-foreground: oklch(0.13 0 308.5);
   --destructive: oklch(0.66 0.2286 17.5);
   --destructive-foreground: oklch(0.66 0.2286 17.5);
   --border: oklch(0.9498 0.0183 336.6 / 10%);
@@ -78,7 +78,7 @@ code {
   --chart-3: oklch(0.46 0.08 250);
   --chart-4: oklch(0.48 0.035 65);
   --chart-5: oklch(0.44 0.045 155);
-  --sidebar: oklch(0.2432 0.04 326.7);
+  --sidebar: oklch(0.2032 0.02 326.7);
   --sidebar-foreground: oklch(0.9498 0.0183 336.6);
   --sidebar-primary: oklch(0.6803 0.2158 339.7);
   --sidebar-primary-foreground: oklch(0.1841 0.0279 308.5);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5059f5a2..c7d3b657 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -858,6 +858,9 @@ importers:
       class-variance-authority:
         specifier: ^0.6.1
         version: 0.6.1
+      color:
+        specifier: ^5.0.3
+        version: 5.0.3
       emojibase:
         specifier: ^17.0.0
         version: 17.0.0
@@ -8252,15 +8255,27 @@ packages:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
+  color-convert@3.1.3:
+    resolution: {integrity: sha512-fasDH2ont2GqF5HpyO4w0+BcewlhHEZOFn9c1ckZdHpJ56Qb7MHhH/IcJZbBGgvdtwdwNbLvxiBEdg336iA9Sg==}
+    engines: {node: '>=14.6'}
+
   color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  color-name@2.1.0:
+    resolution: {integrity: sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg==}
+    engines: {node: '>=12.20'}
+
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
+  color-string@2.1.4:
+    resolution: {integrity: sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg==}
+    engines: {node: '>=18'}
+
   color-support@1.1.3:
     resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
     hasBin: true
@@ -8269,6 +8284,10 @@ packages:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
 
+  color@5.0.3:
+    resolution: {integrity: sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA==}
+    engines: {node: '>=18'}
+
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
@@ -15332,6 +15351,7 @@ packages:
   tsconfck@3.1.6:
     resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
     engines: {node: ^18 || >=20}
+    deprecated: unmaintained
     hasBin: true
     peerDependencies:
       typescript: ^5.0.0
@@ -26347,15 +26367,25 @@ snapshots:
     dependencies:
       color-name: 1.1.4
 
+  color-convert@3.1.3:
+    dependencies:
+      color-name: 2.1.0
+
   color-name@1.1.3: {}
 
   color-name@1.1.4: {}
 
+  color-name@2.1.0: {}
+
   color-string@1.9.1:
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
 
+  color-string@2.1.4:
+    dependencies:
+      color-name: 2.1.0
+
   color-support@1.1.3: {}
 
   color@4.2.3:
@@ -26363,6 +26393,11 @@ snapshots:
       color-convert: 2.0.1
       color-string: 1.9.1
 
+  color@5.0.3:
+    dependencies:
+      color-convert: 3.1.3
+      color-string: 2.1.4
+
   colorette@2.0.20: {}
 
   colors@1.4.0: {}