diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 049a699..3de2721 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -17,6 +17,7 @@ import { SignIn } from '@/pages/SignIn';
 import { CreateProfile } from '@/pages/CreateProfile';
 import { PiggyMark } from '@/components/PiggyMark';
 import { EmptyState } from '@/components/ui';
+import { usePageTitle } from '@/lib/title';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -170,6 +171,7 @@ function Centered({ children }: { children: React.ReactNode }) {
 }
 
 function Placeholder({ title }: { title: string }) {
+  usePageTitle(title);
   return (
     <EmptyState
       title={title}
@@ -179,6 +181,7 @@ function Placeholder({ title }: { title: string }) {
 }
 
 function Team() {
+  usePageTitle('Team');
   const { data } = useQuery({
     queryKey: ['team'],
     queryFn: () =>
diff --git a/apps/web/src/pages/Settings.tsx b/apps/web/src/pages/Settings.tsx
index 4f71afb..2ee9059 100644
--- a/apps/web/src/pages/Settings.tsx
+++ b/apps/web/src/pages/Settings.tsx
@@ -42,7 +42,7 @@ export function Settings() {
 }
 
 function Appearance() {
-  const { mode, accent, setMode, setAccent, accents } = useTheme();
+  const { mode, accent, resolved, setMode, setAccent, accents } = useTheme();
 
   return (
     <Card>
@@ -95,14 +95,20 @@ function Appearance() {
                   ].join(' ')}
                 >
                   {/*
-                    The swatch previews the light-mode value while the app is in
-                    light mode and the dark value in dark mode, because the two
-                    are tuned separately and a single preview would misrepresent
-                    one of them.
+                    The swatch previews the value for the CURRENT theme, because
+                    each accent is tuned twice — a colour that reads well on
+                    white is usually too dark on near-black. Showing the light
+                    value in dark mode made the near-black "Pig" swatch
+                    effectively invisible against a dark card, which is exactly
+                    the misrepresentation this avoids.
                   */}
                   <span
-                    className="h-4 w-4 rounded-full border border-black/10"
-                    style={{ backgroundColor: `hsl(${definition.light.accent})` }}
+                    className="h-4 w-4 rounded-full border border-fg/15"
+                    style={{
+                      backgroundColor: `hsl(${
+                        resolved === 'dark' ? definition.dark.accent : definition.light.accent
+                      })`,
+                    }}
                     aria-hidden
                   />
                   {option.label}