feat(profile): let users design their public profile

src/pages/Dashboard.jsx

@@ -21,11 +21,10 @@ import useForceSync from '../hooks/useForceSync.js';
 import {formatPlaytime} from '../utils/games.js';
 import useSessionExpired from '../hooks/useSessionExpired.js';
 import PageContainer from '../components/PageContainer.jsx';
-import HeroArt from '../components/HeroArt.jsx';
+import HeroBanner from '../components/HeroBanner.jsx';
 import SteamAvatar from '../components/SteamAvatar.jsx';
 import useSteamProfile from '../hooks/useSteamProfile.js';
 import useUserStats from '../hooks/useUserStats.js';
-import {cn} from '@/lib/utils';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import {apiFetch} from '../utils/api.js';
 import {hasSession} from '../utils/auth.js';
@@ -246,12 +245,8 @@ const Dashboard = () => {
     return (
         <PageContainer className="p-4 md:p-8 space-y-6">
             <Card className="relative overflow-hidden p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
-                {/* A picked game, else the game played most in the last two weeks; the gradient keeps the text readable. */}
-                <HeroArt key={bannerAppid} appid={bannerAppid}
-                         className="pointer-events-none absolute inset-0 size-full object-cover opacity-60"/>
-                <div className={cn('pointer-events-none absolute inset-0', bannerAppid
-                    ? 'bg-gradient-to-r from-card via-card/85 to-card/60'
-                    : 'bg-gradient-to-br from-primary/15 via-transparent to-transparent')}/>
+                {/* A picked game, else the game played most in the last two weeks. */}
+                <HeroBanner appid={bannerAppid}/>
                 <div className="relative flex min-w-0 items-center gap-4">
                     {/* The slot is there before the avatar loads, so the title does not jump. */}
                     {hasSteamId && (

src/pages/GameDetail.jsx

@@ -26,6 +26,7 @@ import useSessionExpired from '../hooks/useSessionExpired.js';
 import useSaveAppearance from '../hooks/useSaveAppearance.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import PageContainer from '../components/PageContainer.jsx';
+import ProfileArtMenu from '../components/ProfileArtMenu.jsx';
 import {apiFetch} from '../utils/api.js';
 import {ACHIEVEMENT_ICONS, reportBrokenImage} from '../utils/brokenImages.js';
 import {canCorrect} from '../utils/corrections.js';
@@ -72,7 +73,10 @@ export default function GameDetail() {
     const [correcting, setCorrecting] = useState(false);
     const [merging, setMerging] = useState(false);
     const [reloads, setReloads] = useState(0);
-    const auditor = canCorrect(useCurrentUser(true));
+    const currentUser = useCurrentUser(true);
+    const auditor = canCorrect(currentUser);
+    const [savedProfileStyle, setSavedProfileStyle] = useState(null);
+    const profileStyle = savedProfileStyle ?? currentUser?.profileStyle;
     const [celebration, setCelebration] = useState(null);
     const shownLevel = useRef(null);
 
@@ -269,6 +273,9 @@ export default function GameDetail() {
                                         <PanelTop/>{t('GAME_DETAIL.SET_BANNER')}
                                     </Button>
                                 )}
+                                {profileStyle && (
+                                    <ProfileArtMenu appid={data.appid} style={profileStyle} onSaved={setSavedProfileStyle}/>
+                                )}
                                 {!manual && (
                                     <Button variant="outline" size="sm" onClick={toggleHidden} disabled={hiding}>
                                         {data.hidden ? <Eye/> : <EyeOff/>}

src/pages/GameDetail.test.jsx

@@ -242,6 +242,70 @@ describe('GameDetail of a game added by hand', () => {
         expect(screen.queryByText('MANUAL_GAME.TITLE')).toBeNull();
     });
 
+    it('keeps a section hidden after the page loaded when it sets the profile art', async () => {
+        let sections = ['PLAYING'];
+        globalThis.fetch = vi.fn(async (url, init) => ({ok: true, status: init?.method === 'PUT' ? 204 : 200,
+            json: async () => (url.includes('/api/users/me')
+                ? {role: 'USER', settings: {profileStyle: {accent: 'red', corners: 'round', sections}}}
+                : {...game, source: 'STEAM'})}));
+        renderDetail();
+        const menu = await screen.findByRole('button', {name: 'GAME_DETAIL.PROFILE_ART'});
+
+        sections = []; // the owner hides PLAYING in Settings, e.g. in a second tab
+        fireEvent.keyDown(menu, {key: 'Enter'});
+        fireEvent.click(await screen.findByRole('menuitemcheckbox', {name: 'GAME_DETAIL.PROFILE_BANNER'}));
+
+        await waitFor(() => expect(fetch.mock.calls.some(([u, init]) => init?.method === 'PUT' && u.endsWith('/profile-style'))).toBe(true));
+        const sent = fetch.mock.calls.filter(([u, init]) => init?.method === 'PUT' && u.endsWith('/profile-style'))
+            .map(([, init]) => JSON.parse(init.body));
+        expect(sent.filter((body) => body.sections?.includes('PLAYING'))).toEqual([]);
+    });
+
+    it('keeps a banner picked in another tab when it sets this game as banner', async () => {
+        let bannerAppid = 220;
+        globalThis.fetch = vi.fn(async (url, init) => ({ok: true, status: init?.method === 'PUT' ? 204 : 200,
+            json: async () => (url.includes('/api/users/me')
+                ? {role: 'USER', settings: {profileStyle: {bannerAppid, sections: ['PLAYING']}}}
+                : {...game, source: 'STEAM'})}));
+        renderDetail();
+        const menu = await screen.findByRole('button', {name: 'GAME_DETAIL.PROFILE_ART'});
+
+        bannerAppid = 620; // another tab picked another game
+        fireEvent.keyDown(menu, {key: 'Enter'});
+        fireEvent.click(await screen.findByRole('menuitemcheckbox', {name: 'GAME_DETAIL.PROFILE_BANNER'}));
+
+        await waitFor(() => expect(fetch.mock.calls.some(([u, init]) => init?.method === 'PUT' && u.endsWith('/profile-style'))).toBe(true));
+        const [, init] = fetch.mock.calls.find(([u, i]) => i?.method === 'PUT' && u.endsWith('/profile-style'));
+        expect(JSON.parse(init.body).bannerAppid).toBe(220);
+    });
+
+    it('uses the art as profile banner and removes it on the second click', async () => {
+        let stored = {accent: 'red', corners: 'round', sections: ['PLAYING']};
+        globalThis.fetch = vi.fn(async (url, init) => {
+            if (init?.method === 'PUT') stored = JSON.parse(init.body);
+            return {ok: true, status: init?.method === 'PUT' ? 204 : 200,
+                json: async () => (url.includes('/api/users/me')
+                    ? {role: 'USER', settings: {profileStyle: stored}}
+                    : {...game, source: 'STEAM'})};
+        });
+        const styleBodies = () => fetch.mock.calls.filter(([url, init]) => init?.method === 'PUT' && url.endsWith('/profile-style'))
+            .map(([, init]) => JSON.parse(init.body));
+        const openMenu = async () => fireEvent.keyDown(await screen.findByRole('button', {name: 'GAME_DETAIL.PROFILE_ART'}), {key: 'Enter'});
+        renderDetail();
+
+        await openMenu();
+        fireEvent.click(await screen.findByRole('menuitemcheckbox', {name: 'GAME_DETAIL.PROFILE_BANNER'}));
+        await waitFor(() => expect(styleBodies()).toEqual([{accent: 'red', corners: 'round', bannerAppid: 220,
+            backgroundAppid: null, sections: ['PLAYING']}]));
+
+        await openMenu();
+        const banner = await screen.findByRole('menuitemcheckbox', {name: 'GAME_DETAIL.PROFILE_BANNER'});
+        expect(banner.getAttribute('aria-checked')).toBe('true');
+        fireEvent.click(banner);
+        await waitFor(() => expect(styleBodies()).toHaveLength(2));
+        expect(styleBodies()[1].bannerAppid).toBeNull();
+    });
+
     describe('corrections', () => {
         const loggedInAs = (me) => {
             globalThis.fetch = vi.fn(async (url) => ({ok: true, status: 200,

src/pages/PublicProfilePage.jsx

@@ -9,6 +9,9 @@ import GameCover from '../components/GameCover.jsx';
 import GameStatusBadge, {STATUS_META} from '../components/GameStatusBadge.jsx';
 import {GAME_STATUSES} from '../utils/backlog.js';
 import {formatPlaytime} from '../utils/games.js';
+import {normalizeProfileStyle} from '../utils/profileStyle.js';
+import HeroBanner from '../components/HeroBanner.jsx';
+import PageBackground from '../components/PageBackground.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import PileStats from '../components/stats/PileStats.jsx';
 import TrendStats from '../components/stats/TrendStats.jsx';
@@ -90,11 +93,48 @@ export default function PublicProfilePage() {
         );
     }
 
-    const finishedCount = (library.byStatus.FINISHED ?? 0) + (library.byStatus.COMPLETED ?? 0);
+    const style = normalizeProfileStyle(profile.style);
+    const memberSince = profile.memberSince
+        ? new Date(`${profile.memberSince}T12:00:00`).toLocaleDateString(i18n.language, {year: 'numeric', month: 'long'})
+        : null;
+    const sections = {
+        SUMMARY: library.totalGames != null && <Summary library={library}/>,
+        STATUS: library.byStatus && Object.values(library.byStatus).some((count) => count > 0)
+            && <StatusBar byStatus={library.byStatus}/>,
+        PLAYING: library.playing?.length > 0 && <Playing games={library.playing}/>,
+        FINISHED: library.finished?.length > 0 && <Finished games={library.finished}/>,
+        STATS: library.stats && <SharedStats stats={library.stats}/>,
+    };
+
+    // The owner's accent and corners apply to this page only; light or dark mode stays the viewer's.
+    return (
+        <div data-accent={style.accent} data-corners={style.corners}>
+            <PageBackground appid={style.backgroundAppid}/>
+            <PageContainer className="p-4 md:p-8 space-y-6">
+                <Card className="relative overflow-hidden p-6 md:p-8">
+                    <HeroBanner appid={style.bannerAppid}/>
+                    <div className="relative">
+                        <p className="text-sm font-medium text-muted-foreground">{t('PROFILE.TITLE')}</p>
+                        <h1 className="mt-1 text-3xl md:text-4xl font-bold tracking-tight break-words">{profile.displayName}</h1>
+                        {memberSince && (
+                            <p className="mt-2 text-sm text-muted-foreground">{t('PROFILE.MEMBER_SINCE', {date: memberSince})}</p>
+                        )}
+                    </div>
+                </Card>
+                {style.sections.map((section) => sections[section] && (
+                    <section key={section} data-section={section}>{sections[section]}</section>
+                ))}
+            </PageContainer>
+        </div>
+    );
+}
+
+function Summary({library}) {
+    const {t, i18n} = useTranslation();
     const stats = [
         [Library, library.totalGames.toLocaleString(i18n.language), t('PROFILE.GAMES')],
         [Clock, formatPlaytime(library.totalPlaytimeMinutes), t('PROFILE.PLAYTIME')],
-        [CircleCheck, finishedCount.toLocaleString(i18n.language), t('PROFILE.FINISHED')],
+        [CircleCheck, (library.finishedGames ?? 0).toLocaleString(i18n.language), t('PROFILE.FINISHED')],
     ];
     if (library.averageCompletion != null) {
         stats.push(
@@ -102,94 +142,86 @@ export default function PublicProfilePage() {
             [Percent, `${library.averageCompletion.toLocaleString(i18n.language)} %`, t('PROFILE.AVERAGE_COMPLETION')],
         );
     }
-    const memberSince = profile.memberSince
-        ? new Date(`${profile.memberSince}T12:00:00`).toLocaleDateString(i18n.language, {year: 'numeric', month: 'long'})
-        : null;
-
     return (
-        <PageContainer className="p-4 md:p-8 space-y-6">
-            <Card className="relative overflow-hidden p-6 md:p-8 gap-6">
-                <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/15 via-transparent to-transparent"/>
-                <div className="relative">
-                    <p className="text-sm font-medium text-muted-foreground">{t('PROFILE.TITLE')}</p>
-                    <h1 className="mt-1 text-3xl md:text-4xl font-bold tracking-tight break-words">{profile.displayName}</h1>
-                    {memberSince && (
-                        <p className="mt-2 text-sm text-muted-foreground">{t('PROFILE.MEMBER_SINCE', {date: memberSince})}</p>
-                    )}
+        <Card className={`grid gap-3 p-5 ${stats.length > 3 ? 'grid-cols-2 sm:grid-cols-5' : 'grid-cols-3'}`}>
+            {stats.map(([Icon, value, label]) => (
+                <div key={label} className="rounded-lg bg-muted/50 p-3 text-center">
+                    <Icon className="mx-auto mb-1 size-4 text-primary"/>
+                    <div className="text-xl md:text-2xl font-bold tabular-nums">{value}</div>
+                    <div className="text-xs text-muted-foreground">{label}</div>
                 </div>
-                <div className={`relative grid gap-3 ${stats.length > 3 ? 'grid-cols-2 sm:grid-cols-5' : 'grid-cols-3'}`}>
-                    {stats.map(([Icon, value, label]) => (
-                        <div key={label} className="rounded-lg bg-muted/50 p-3 text-center">
-                            <Icon className="mx-auto mb-1 size-4 text-primary"/>
-                            <div className="text-xl md:text-2xl font-bold tabular-nums">{value}</div>
-                            <div className="text-xs text-muted-foreground">{label}</div>
-                        </div>
-                    ))}
-                </div>
-                {library.totalGames > 0 && (
-                    <div className="relative space-y-2">
-                        <div className="flex h-2.5 overflow-hidden rounded-full bg-muted">
-                            {GAME_STATUSES.map((s) => (
-                                <div key={s} className={STATUS_META[s].bar}
-                                     style={{width: `${((library.byStatus[s] ?? 0) / library.totalGames) * 100}%`}}/>
-                            ))}
-                        </div>
-                        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                            {GAME_STATUSES.map((s) => (
-                                <li key={s} className="flex items-center gap-1.5">
-                                    <span className={`size-2 rounded-full ${STATUS_META[s].bar}`}/>
-                                    {t(`BACKLOG.STATUS.${s}`)}
-                                    <span className="tabular-nums text-foreground">{library.byStatus[s] ?? 0}</span>
-                                </li>
-                            ))}
-                        </ul>
-                    </div>
-                )}
-            </Card>
+            ))}
+        </Card>
+    );
+}
 
-            {library.playing.length > 0 && (
-                <Card className="gap-4 p-5">
-                    <h2 className="flex items-center gap-2 font-semibold">
-                        <Gamepad2 className="size-4 text-primary"/>{t('PROFILE.PLAYING')}
-                    </h2>
-                    <ul className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-                        {library.playing.map((g) => (
-                            <li key={g.appid} className="space-y-1.5">
-                                <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-full"/>
-                                <div className="truncate text-sm font-medium">{g.name ?? `App ${g.appid}`}</div>
-                                <div className="text-xs text-muted-foreground tabular-nums">{formatPlaytime(g.playtimeMinutes)}</div>
-                            </li>
-                        ))}
-                    </ul>
-                </Card>
-            )}
+function StatusBar({byStatus}) {
+    const {t} = useTranslation();
+    const total = GAME_STATUSES.reduce((sum, s) => sum + (byStatus[s] ?? 0), 0);
+    return (
+        <Card className="gap-2 p-5">
+            <div className="flex h-2.5 overflow-hidden rounded-full bg-muted">
+                {GAME_STATUSES.map((s) => (
+                    <div key={s} className={STATUS_META[s].bar} style={{width: `${((byStatus[s] ?? 0) / total) * 100}%`}}/>
+                ))}
+            </div>
+            <ul className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                {GAME_STATUSES.map((s) => (
+                    <li key={s} className="flex items-center gap-1.5">
+                        <span className={`size-2 rounded-full ${STATUS_META[s].bar}`}/>
+                        {t(`BACKLOG.STATUS.${s}`)}
+                        <span className="tabular-nums text-foreground">{byStatus[s] ?? 0}</span>
+                    </li>
+                ))}
+            </ul>
+        </Card>
+    );
+}
 
-            {library.finished.length > 0 && (
-                <Card className="gap-0 py-0">
-                    <h2 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">
-                        <CircleCheck className="size-4 text-emerald-500"/>{t('PROFILE.FINISHED_GAMES')}
-                    </h2>
-                    <ul className="divide-y">
-                        {library.finished.map((g) => (
-                            <li key={g.appid} className="flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3">
-                                <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 sm:w-24 shrink-0"/>
-                                <span className="min-w-0 flex-1 truncate font-medium">{g.name ?? `App ${g.appid}`}</span>
-                                {g.rating && (
-                                    <span className="flex items-center gap-0.5" aria-label={t('BACKLOG.RATING_STARS', {count: g.rating})}>
-                                        {Array.from({length: g.rating}, (_, i) => (
-                                            <Star key={i} className="size-3.5 fill-amber-400 text-amber-400"/>
-                                        ))}
-                                    </span>
-                                )}
-                                <GameStatusBadge status={g.status} compact/>
-                            </li>
-                        ))}
-                    </ul>
-                </Card>
-            )}
+function Playing({games}) {
+    const {t} = useTranslation();
+    return (
+        <Card className="gap-4 p-5">
+            <h2 className="flex items-center gap-2 font-semibold">
+                <Gamepad2 className="size-4 text-primary"/>{t('PROFILE.PLAYING')}
+            </h2>
+            <ul className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+                {games.map((g) => (
+                    <li key={g.appid} className="space-y-1.5">
+                        <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-full"/>
+                        <div className="truncate text-sm font-medium">{g.name ?? `App ${g.appid}`}</div>
+                        <div className="text-xs text-muted-foreground tabular-nums">{formatPlaytime(g.playtimeMinutes)}</div>
+                    </li>
+                ))}
+            </ul>
+        </Card>
+    );
+}
 
-            {library.stats && <SharedStats stats={library.stats}/>}
-        </PageContainer>
+function Finished({games}) {
+    const {t} = useTranslation();
+    return (
+        <Card className="gap-0 py-0">
+            <h2 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">
+                <CircleCheck className="size-4 text-emerald-500"/>{t('PROFILE.FINISHED_GAMES')}
+            </h2>
+            <ul className="divide-y">
+                {games.map((g) => (
+                    <li key={g.appid} className="flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3">
+                        <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 sm:w-24 shrink-0"/>
+                        <span className="min-w-0 flex-1 truncate font-medium">{g.name ?? `App ${g.appid}`}</span>
+                        {g.rating && (
+                            <span className="flex items-center gap-0.5" aria-label={t('BACKLOG.RATING_STARS', {count: g.rating})}>
+                                {Array.from({length: g.rating}, (_, i) => (
+                                    <Star key={i} className="size-3.5 fill-amber-400 text-amber-400"/>
+                                ))}
+                            </span>
+                        )}
+                        <GameStatusBadge status={g.status} compact/>
+                    </li>
+                ))}
+            </ul>
+        </Card>
     );
 }
 

src/pages/PublicProfilePage.test.jsx

@@ -14,13 +14,13 @@ const library = {
     finished: [{appid: 620, name: 'Portal 2', playtimeMinutes: 900, status: 'COMPLETED', rating: 5}],
 };
 
-function mockBackends({profileStatus = 200, libraryStatus = 200} = {}) {
+function mockBackends({profileStatus = 200, libraryStatus = 200, style, answer = library} = {}) {
     globalThis.fetch = vi.fn(async (url) => {
         if (url.includes('/api/public/profiles/library')) {
-            return {ok: libraryStatus === 200, status: libraryStatus, json: async () => library};
+            return {ok: libraryStatus === 200, status: libraryStatus, json: async () => answer};
         }
         return {ok: profileStatus === 200, status: profileStatus,
-            json: async () => ({displayName: 'Lobo', memberSince: '2026-03-02', ticket: 'the-ticket'})};
+            json: async () => ({displayName: 'Lobo', memberSince: '2026-03-02', ticket: 'the-ticket', style})};
     });
 }
 
@@ -74,6 +74,50 @@ describe('PublicProfilePage', () => {
         delete library.stats;
     });
 
+    it('applies the owner\'s accent and corners to the page only, with banner and background', async () => {
+        mockBackends({style: {accent: 'red', corners: 'round', bannerAppid: 620, backgroundAppid: 220, sections: ['PLAYING']}});
+        const {container} = renderPage();
+
+        await screen.findByText('Half-Life 2');
+        const page = container.querySelector('[data-accent="red"]');
+        expect(page.dataset.corners).toBe('round');
+        expect(document.documentElement.dataset.accent).not.toBe('red');
+        expect([...container.querySelectorAll('img')].map((img) => img.getAttribute('src')))
+            .toEqual(expect.arrayContaining([expect.stringContaining('/620/'), expect.stringContaining('/220/')]));
+    });
+
+    it('shows the sections in the owner\'s order and leaves out hidden ones', async () => {
+        mockBackends({
+            style: {sections: ['FINISHED', 'PLAYING', 'SUMMARY']},
+            answer: {...library, byStatus: null, finishedGames: 60},
+        });
+        const {container} = renderPage();
+
+        await screen.findByText('Portal 2');
+        expect([...container.querySelectorAll('[data-section]')].map((el) => el.dataset.section))
+            .toEqual(['FINISHED', 'PLAYING', 'SUMMARY']);
+        expect(screen.getByText('60')).toBeTruthy();
+        expect(screen.queryByText('BACKLOG.STATUS.BACKLOG')).toBeNull();
+    });
+
+    it('leaves out the status bar of a profile without games', async () => {
+        mockBackends({answer: {...library, totalGames: 0, byStatus: {BACKLOG: 0, PLAYING: 0}, playing: [], finished: []}});
+        const {container} = renderPage();
+
+        await screen.findByText('PROFILE.GAMES');
+        expect([...container.querySelectorAll('[data-section]')].map((el) => el.dataset.section)).toEqual(['SUMMARY']);
+    });
+
+    it('shows every section for an Auth without a style', async () => {
+        mockBackends();
+        const {container} = renderPage();
+
+        await screen.findByText('Portal 2');
+        expect([...container.querySelectorAll('[data-section]')].map((el) => el.dataset.section))
+            .toEqual(['SUMMARY', 'STATUS', 'PLAYING', 'FINISHED']);
+        expect(container.querySelector('[data-accent="violet"]')).toBeTruthy();
+    });
+
     it('says the profile is unknown or private on a 404', async () => {
         mockBackends({profileStatus: 404});
         renderPage();

src/pages/SettingsPage.jsx

@@ -23,10 +23,12 @@ import {settingsSchema} from '../utils/validation.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import useSessionExpired from '../hooks/useSessionExpired.js';
 import useSaveAppearance from '../hooks/useSaveAppearance.js';
-import {ACCENTS, CORNERS} from '../utils/appearance.js';
+import {AccentPicker, CornersPicker} from '../components/StylePickers.jsx';
+import ProfileStyleSettings from '../components/ProfileStyleSettings.jsx';
+import {normalizeProfileStyle} from '../utils/profileStyle.js';
+import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';
 import {coverUrl} from '../utils/games.js';
 import {saveProfileStats} from '../utils/stats.js';
-import {cn} from '@/lib/utils';
 import {apiFetch, refreshSession} from '../utils/api.js';
 import {hasSession, markSession} from '../utils/auth.js';
 
@@ -59,11 +61,13 @@ export default function SettingsPage() {
     const expireSession = useSessionExpired();
     const {isDarkMode, setDarkMode, setLanguage, appearance} = usePreferences();
     const saveAppearance = useSaveAppearance();
+    const saveStyle = useSaveProfileStyle();
 
     const [profile, setProfile] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [loadError, setLoadError] = useState(null);
     const [savingProfileStats, setSavingProfileStats] = useState(false);
+    const [savingProfileStyle, setSavingProfileStyle] = useState(false);
     const [searchParams, setSearchParams] = useSearchParams();
     // Read once: removing the parameter below must not load the profile again.
     const [steamOutcome] = useState(() => searchParams.get('steam'));
@@ -227,6 +231,15 @@ export default function SettingsPage() {
         }
     };
 
+    const handleProfileStyleChange = async (changes) => {
+        const previous = normalizeProfileStyle(profile?.settings?.profileStyle);
+        const showProfileStyle = (next) => setProfile((p) => ({...p, settings: {...p.settings, profileStyle: next}}));
+        showProfileStyle({...previous, ...changes});
+        setSavingProfileStyle(true);
+        showProfileStyle(await saveStyle(changes, previous) ?? previous);
+        setSavingProfileStyle(false);
+    };
+
     const copyProfileLink = async (link) => {
         try {
             await navigator.clipboard.writeText(link);
@@ -330,33 +343,8 @@ export default function SettingsPage() {
                     <CardTitle className="flex items-center gap-2"><Palette className="size-4 text-primary"/>{t('SETTINGS.APPEARANCE')}</CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-6">
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                        <Label id="accent-label">{t('SETTINGS.ACCENT')}</Label>
-                        <div role="group" aria-labelledby="accent-label" className="flex flex-wrap gap-2">
-                            {ACCENTS.map((accent) => (
-                                <button key={accent} type="button" data-accent={accent}
-                                        aria-label={t(`SETTINGS.ACCENT_OPTIONS.${accent.toUpperCase()}`)}
-                                        title={t(`SETTINGS.ACCENT_OPTIONS.${accent.toUpperCase()}`)}
-                                        aria-pressed={appearance.accent === accent}
-                                        onClick={() => saveAppearance({accent})}
-                                        className={cn('size-8 rounded-full bg-primary ring-offset-2 ring-offset-background transition hover:scale-110',
-                                            appearance.accent === accent && 'ring-2 ring-foreground')}/>
-                            ))}
-                        </div>
-                    </div>
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                        <Label id="corners-label">{t('SETTINGS.CORNERS')}</Label>
-                        <div role="group" aria-labelledby="corners-label" className="flex gap-2">
-                            {CORNERS.map((corners) => (
-                                <Button key={corners} type="button" size="sm" data-corners={corners}
-                                        variant={appearance.corners === corners ? 'default' : 'outline'}
-                                        aria-pressed={appearance.corners === corners}
-                                        onClick={() => saveAppearance({corners})}>
-                                    {t(`SETTINGS.CORNER_OPTIONS.${corners.toUpperCase()}`)}
-                                </Button>
-                            ))}
-                        </div>
-                    </div>
+                    <AccentPicker id="accent" value={appearance.accent} onChange={(accent) => saveAppearance({accent})}/>
+                    <CornersPicker id="corners" value={appearance.corners} onChange={(corners) => saveAppearance({corners})}/>
                     <div className="flex items-center justify-between gap-4">
                         <div className="space-y-1">
                             <Label htmlFor="wideLayout">{t('SETTINGS.WIDE_LAYOUT')}</Label>
@@ -463,6 +451,12 @@ export default function SettingsPage() {
                                               disabled={!publicProfile} saving={savingProfileStats}
                                               onChange={handleProfileStatsChange}/>
                     </div>
+
+                    <div className="mt-6 border-t pt-6">
+                        <ProfileStyleSettings style={normalizeProfileStyle(profile?.settings?.profileStyle)}
+                                              disabled={!publicProfile || savingProfileStyle}
+                                              onChange={handleProfileStyleChange}/>
+                    </div>
                 </CardContent>
             </Card>
 

src/pages/SettingsPage.test.jsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {cleanup, fireEvent, render, screen, waitFor, within} from '@testing-library/react';
 import {MemoryRouter} from 'react-router-dom';
 import SettingsPage from './SettingsPage.jsx';
 import {PreferencesProvider} from '../context/PreferencesContext.jsx';
@@ -17,6 +17,8 @@ const profile = (overrides = {}) => ({
     settings: {useDarkTheme: true, language: 'de', publicProfile: true}, ...overrides,
 });
 
+const appearanceCard = () => within(screen.getByText('SETTINGS.APPEARANCE').closest('[data-slot="card"]'));
+
 const puts = () => fetch.mock.calls.filter(([, init]) => init?.method === 'PUT').map(([, init]) => JSON.parse(init.body));
 
 function renderPage(me) {
@@ -99,6 +101,54 @@ describe('SettingsPage public profile', () => {
             .toBe('false'));
     });
 
+    const styled = (profileStyle) => profile({settings: {useDarkTheme: true, language: 'de', publicProfile: true, profileStyle}});
+    const styleGroup = (label) => within(screen.getAllByRole('group', {name: label})[1]);
+    const stylePuts = () => fetch.mock.calls.filter(([url, init]) => init?.method === 'PUT' && url.endsWith('/profile-style'))
+        .map(([, init]) => JSON.parse(init.body));
+
+    it('saves the profile accent apart from the app accent', async () => {
+        renderPage(styled({accent: 'blue', corners: 'sharp', bannerAppid: 620, backgroundAppid: null,
+            sections: ['PLAYING', 'SUMMARY']}));
+
+        await screen.findByText('SETTINGS.PROFILE_STYLE');
+        fireEvent.click(styleGroup('SETTINGS.ACCENT').getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.RED'}));
+
+        await waitFor(() => expect(stylePuts()).toEqual([{accent: 'red', corners: 'sharp', bannerAppid: 620,
+            backgroundAppid: null, sections: ['PLAYING', 'SUMMARY']}]));
+        expect(styleGroup('SETTINGS.ACCENT').getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.RED'})
+            .getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('moves, hides and shows profile sections', async () => {
+        renderPage(styled({sections: ['PLAYING', 'SUMMARY']}));
+
+        await screen.findByText('SETTINGS.PROFILE_STYLE');
+        // The first row is the first shown section, PLAYING.
+        fireEvent.click(screen.getAllByRole('button', {name: 'SETTINGS.PROFILE_SECTION_DOWN'})[0]);
+        await waitFor(() => expect(stylePuts()).toHaveLength(1));
+        expect(stylePuts()[0].sections).toEqual(['SUMMARY', 'PLAYING']);
+
+        fireEvent.click(screen.getByRole('switch', {name: 'SETTINGS.PROFILE_SECTION.STATS'}));
+        await waitFor(() => expect(stylePuts()).toHaveLength(2));
+        expect(stylePuts()[1].sections).toEqual(['SUMMARY', 'PLAYING', 'STATS']);
+    });
+
+    it('removes the profile banner', async () => {
+        renderPage(styled({bannerAppid: 620}));
+
+        fireEvent.click(await screen.findByRole('button', {name: 'SETTINGS.PROFILE_ART_REMOVE'}));
+
+        await waitFor(() => expect(stylePuts()).toHaveLength(1));
+        expect(stylePuts()[0].bannerAppid).toBeNull();
+    });
+
+    it('offers the profile look only while the profile is public', async () => {
+        renderPage(profile({settings: {useDarkTheme: true, language: 'de', publicProfile: false}}));
+
+        expect((await screen.findByRole('switch', {name: 'SETTINGS.PROFILE_SECTION.STATS'})).disabled).toBe(true);
+        expect(styleGroup('SETTINGS.ACCENT').getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.RED'}).disabled).toBe(true);
+    });
+
     it('offers the stat groups only while the profile is public', async () => {
         renderPage(profile({settings: {useDarkTheme: true, language: 'de', publicProfile: false}}));
 
@@ -142,13 +192,14 @@ describe('SettingsPage appearance', () => {
     it('saves a picked accent and corner style and marks them as picked', async () => {
         renderPage(profile());
 
-        fireEvent.click(await screen.findByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}));
-        fireEvent.click(screen.getByRole('button', {name: 'SETTINGS.CORNER_OPTIONS.ROUND'}));
+        await screen.findByText('SETTINGS.APPEARANCE');
+        fireEvent.click(appearanceCard().getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}));
+        fireEvent.click(appearanceCard().getByRole('button', {name: 'SETTINGS.CORNER_OPTIONS.ROUND'}));
 
         await waitFor(() => expect(appearancePuts()).toHaveLength(2));
         expect(appearancePuts()[1]).toEqual({accent: 'green', corners: 'round', wideLayout: false, backgroundAppid: null, bannerAppid: null, showBanner: true});
-        expect(screen.getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}).getAttribute('aria-pressed')).toBe('true');
-        expect(screen.getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.VIOLET'}).getAttribute('aria-pressed')).toBe('false');
+        expect(appearanceCard().getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}).getAttribute('aria-pressed')).toBe('true');
+        expect(appearanceCard().getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.VIOLET'}).getAttribute('aria-pressed')).toBe('false');
     });
 
     it('removes the background', async () => {