diff --git a/.changeset/org-switcher-polish.md b/.changeset/org-switcher-polish.md
new file mode 100644
index 00000000000..417a3e92405
--- /dev/null
+++ b/.changeset/org-switcher-polish.md
@@ -0,0 +1,9 @@
+---
+'@clerk/ui': patch
+---
+
+Polish the ``:
+
+- Decode avatar images synchronously so a freshly mounted avatar (e.g. when the popover opens) paints on its first frame instead of briefly flashing the avatar background.
+- Highlight the trigger while its popover is open.
+- Align the "Create organization" action's height with the other rows for a consistent list.
diff --git a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index f410052f286..efad1c0b34e 100644
--- a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -43,6 +43,10 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
t => ({
padding: `${t.space.$1} ${t.space.$2}`,
position: 'relative',
+ '&[aria-expanded="true"]': {
+ backgroundColor: 'var(--alpha)',
+ color: 'var(--accentHover)',
+ },
}),
sx,
]}
diff --git a/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index d4f0c828f04..5d3fbd798d9 100644
--- a/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -26,7 +26,7 @@ const CreateOrganizationButton = ({
label={localizationKeys('organizationSwitcher.action__createOrganization')}
onClick={onCreateOrganizationClick}
sx={t => ({
- padding: `${t.space.$5} ${t.space.$5}`,
+ padding: `${t.space.$4} ${t.space.$5}`,
})}
iconSx={t => ({
width: t.sizes.$9,
@@ -34,7 +34,7 @@ const CreateOrganizationButton = ({
})}
iconBoxSx={t => ({
width: t.sizes.$9,
- height: t.sizes.$6,
+ height: t.sizes.$9,
})}
spinnerSize='sm'
/>
diff --git a/packages/ui/src/elements/Avatar.tsx b/packages/ui/src/elements/Avatar.tsx
index 2560197a913..0b689d9033f 100644
--- a/packages/ui/src/elements/Avatar.tsx
+++ b/packages/ui/src/elements/Avatar.tsx
@@ -97,6 +97,10 @@ export const Avatar = (props: AvatarProps) => {
title={title}
alt={`${title}'s logo`}
src={imageUrl || ''}
+ // Decode the (typically cached) avatar bytes before presenting so a freshly-mounted
+ //
paints on its first frame instead of flashing the avatar background for a tick.
+ // Safe for avatar-sized images: decode is off-thread/sub-ms and only affects already-fetched bytes.
+ decoding='sync'
sx={{
objectFit: 'cover',
width: '100%',