diff --git a/.changeset/restore-old-chip-style.md b/.changeset/restore-old-chip-style.md
new file mode 100644
index 000000000..9a4413884
--- /dev/null
+++ b/.changeset/restore-old-chip-style.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Various small adjustments to the themed profiles for better consistency.
diff --git a/src/app/components/user-profile/CreatorChip.tsx b/src/app/components/user-profile/CreatorChip.tsx
index 1e5bf84dc..29ccbaafb 100644
--- a/src/app/components/user-profile/CreatorChip.tsx
+++ b/src/app/components/user-profile/CreatorChip.tsx
@@ -1,5 +1,6 @@
 import type { RectCords } from 'folds';
 import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, Text } from 'folds';
+import type { CSSProperties } from 'react';
 import type { MouseEventHandler } from 'react';
 import { useState } from 'react';
 import FocusTrap from 'focus-trap-react';
@@ -16,19 +17,25 @@ import { useOpenSpaceSettings } from '$state/hooks/spaceSettings';
 import { SpaceSettingsPage } from '$state/spaceSettings';
 import { RoomSettingsPage } from '$state/roomSettings';
 import { PowerColorBadge, PowerIcon } from '$components/power';
+import { heroMenuItemStyle } from './heroMenuItemStyle';
 import * as css from './styles.css';
 
 export function CreatorChip({
-  backgroundColor,
   innerColor,
   cardColor,
   textColor,
+  chipSurfaceStyle,
+  chipFillColor,
+  chipHoverBrightness,
 }: {
-  backgroundColor?: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
+  chipSurfaceStyle?: CSSProperties;
+  chipFillColor?: string;
+  chipHoverBrightness?: number;
 }) {
+  const menuItemBg = chipFillColor ?? cardColor;
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
@@ -69,7 +76,10 @@ export function CreatorChip({
                 variant="Surface"
                 fill="None"
                 className={css.UserHeroMenuItem}
-                style={{ backgroundColor: cardColor, color: textColor }}
+                style={heroMenuItemStyle(
+                  { backgroundColor: menuItemBg, color: textColor },
+                  chipHoverBrightness
+                )}
                 size="300"
                 radii="300"
                 onClick={() => {
@@ -93,6 +103,8 @@ export function CreatorChip({
       }
     >
       <Chip
+        variant={cardColor ? undefined : 'Success'}
+        outlined={!cardColor}
         radii="Pill"
         before={
           cords ? (
@@ -104,12 +116,11 @@ export function CreatorChip({
         after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
         onClick={open}
         aria-pressed={!!cords}
-        className={css.UserHeroChip}
-        style={{
-          backgroundColor: cardColor,
-          borderColor: backgroundColor,
-          color: textColor,
-        }}
+        className={cardColor ? css.UserHeroChipThemed : css.UserHeroBrightnessHover}
+        style={heroMenuItemStyle(
+          cardColor && chipSurfaceStyle ? chipSurfaceStyle : {},
+          chipHoverBrightness
+        )}
       >
         <Text size="B300" truncate>
           {tag.name}
diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx
index 58a54bd19..dbb6ae579 100644
--- a/src/app/components/user-profile/PowerChip.tsx
+++ b/src/app/components/user-profile/PowerChip.tsx
@@ -20,6 +20,7 @@ import {
   Text,
   toRem,
 } from 'folds';
+import type { CSSProperties } from 'react';
 import type { MouseEventHandler } from 'react';
 import { useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
@@ -45,6 +46,7 @@ import { useMemberPowerCompare } from '$hooks/useMemberPowerCompare';
 import { CutoutCard } from '$components/cutout-card';
 import { PowerColorBadge, PowerIcon } from '$components/power';
 import { EventType } from '$types/matrix-sdk';
+import { heroMenuItemStyle } from './heroMenuItemStyle';
 import * as css from './styles.css';
 
 type SelfDemoteAlertProps = {
@@ -149,17 +151,22 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
 
 export function PowerChip({
   userId,
-  backgroundColor,
   innerColor,
   cardColor,
   textColor,
+  chipSurfaceStyle,
+  chipFillColor,
+  chipHoverBrightness,
 }: {
   userId: string;
-  backgroundColor?: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
+  chipSurfaceStyle?: CSSProperties;
+  chipFillColor?: string;
+  chipHoverBrightness?: number;
 }) {
+  const menuItemBg = chipFillColor ?? cardColor;
   const mx = useMatrixClient();
   const room = useRoom();
   const space = useSpaceOptionally();
@@ -288,7 +295,10 @@ export function PowerChip({
                       aria-disabled={changing || !canChangePowers || !canAssignPower}
                       aria-pressed={selected}
                       className={css.UserHeroMenuItem}
-                      style={{ backgroundColor: cardColor, color: textColor }}
+                      style={heroMenuItemStyle(
+                        { backgroundColor: menuItemBg, color: textColor },
+                        chipHoverBrightness
+                      )}
                       before={<PowerColorBadge color={powerTag.color} />}
                       after={
                         powerTagIconSrc ? (
@@ -314,7 +324,10 @@ export function PowerChip({
                   size="300"
                   radii="300"
                   className={css.UserHeroMenuItem}
-                  style={{ backgroundColor: cardColor, color: textColor }}
+                  style={heroMenuItemStyle(
+                    { backgroundColor: menuItemBg, color: textColor },
+                    chipHoverBrightness
+                  )}
                   onClick={() => {
                     if (room.isSpaceRoom()) {
                       openSpaceSettings(
@@ -340,14 +353,19 @@ export function PowerChip({
         }
       >
         <Chip
-          variant={error ? 'Critical' : undefined}
+          variant={error ? 'Critical' : cardColor ? undefined : 'SurfaceVariant'}
           radii="Pill"
-          className={css.UserHeroChip}
-          style={{
-            backgroundColor: (!error && cardColor) || undefined,
-            borderColor: backgroundColor,
-            color: textColor,
-          }}
+          className={
+            error ? undefined : cardColor ? css.UserHeroChipThemed : css.UserHeroBrightnessHover
+          }
+          style={
+            error
+              ? undefined
+              : heroMenuItemStyle(
+                  cardColor && chipSurfaceStyle ? chipSurfaceStyle : {},
+                  chipHoverBrightness
+                )
+          }
           before={
             cords ? (
               <Icon size="50" src={Icons.ChevronBottom} />
diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
index c57532dd6..168a973e5 100644
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -1,4 +1,5 @@
 import type { KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { CSSProperties } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
@@ -22,6 +23,7 @@ import {
   Avatar,
 } from 'folds';
 import { useMatrixClient } from '$hooks/useMatrixClient';
+import { getMxIdServer } from '$utils/mxIdHelper';
 import { useCloseUserRoomProfile } from '$state/hooks/userRoomProfile';
 import { stopPropagation } from '$utils/keyboard';
 import { copyToClipboard } from '$utils/dom';
@@ -42,6 +44,7 @@ import { useNickname, useSetNickname } from '$hooks/useNickname';
 import { CutoutCard } from '$components/cutout-card';
 import { SettingTile } from '$components/setting-tile';
 import { RoomAvatar, RoomIcon } from '$components/room-avatar';
+import { heroMenuItemStyle } from './heroMenuItemStyle';
 import * as css from './styles.css';
 
 export function ServerChip({
@@ -49,14 +52,21 @@ export function ServerChip({
   innerColor,
   cardColor,
   textColor,
-  backgroundColor,
+  chipSurfaceStyle,
+  chipFillColor,
+  chipHoverBrightness,
 }: {
   server: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
-  backgroundColor?: string;
+  chipSurfaceStyle?: CSSProperties;
+  chipFillColor?: string;
+  chipHoverBrightness?: number;
 }) {
+  const menuItemBg = chipFillColor ?? cardColor;
+  const mx = useMatrixClient();
+  const myServer = getMxIdServer(mx.getSafeUserId());
   const navigate = useNavigate();
   const closeProfile = useCloseUserRoomProfile();
   const [copied, setCopied] = useTimeoutToggle();
@@ -89,71 +99,89 @@ export function ServerChip({
           <Menu>
             <div
               style={{
-                padding: config.space.S100,
+                padding: config.space.S200,
                 maxWidth: toRem(200),
                 backgroundColor: innerColor,
               }}
             >
-              <MenuItem
-                fill="None"
-                size="300"
-                radii="300"
-                onClick={() => {
-                  copyToClipboard(server);
-                  setCopied();
-                  close();
-                }}
-                className={css.UserHeroMenuItem}
-                style={{
-                  backgroundColor: cardColor,
-                  color: textColor,
-                }}
-              >
-                <Text size="B300">Copy Server</Text>
-              </MenuItem>
-              <MenuItem
-                fill="None"
-                size="300"
-                radii="300"
-                onClick={() => {
-                  navigate(getExploreServerPath(server));
-                  closeProfile();
-                }}
-                className={css.UserHeroMenuItem}
-                style={{
-                  backgroundColor: cardColor,
-                  color: textColor,
-                }}
-              >
-                <Text size="B300">Explore Community</Text>
-              </MenuItem>
+              <Box direction="Column" gap="100">
+                <MenuItem
+                  fill="None"
+                  size="300"
+                  radii="300"
+                  onClick={() => {
+                    copyToClipboard(server);
+                    setCopied();
+                    close();
+                  }}
+                  className={css.UserHeroMenuItem}
+                  style={heroMenuItemStyle(
+                    {
+                      backgroundColor: menuItemBg,
+                      color: textColor,
+                    },
+                    chipHoverBrightness
+                  )}
+                >
+                  <Text size="B300">Copy Server</Text>
+                </MenuItem>
+                <MenuItem
+                  fill="None"
+                  size="300"
+                  radii="300"
+                  onClick={() => {
+                    navigate(getExploreServerPath(server));
+                    closeProfile();
+                  }}
+                  className={css.UserHeroMenuItem}
+                  style={heroMenuItemStyle(
+                    {
+                      backgroundColor: menuItemBg,
+                      color: textColor,
+                    },
+                    chipHoverBrightness
+                  )}
+                >
+                  <Text size="B300">Explore Community</Text>
+                </MenuItem>
+              </Box>
             </div>
             <Line size="300" />
             <div
-              style={{ padding: config.space.S100, backgroundColor: cardColor, color: textColor }}
+              style={{
+                padding: config.space.S200,
+                backgroundColor: innerColor,
+                color: textColor,
+              }}
             >
-              <MenuItem
-                fill="None"
-                size="300"
-                radii="300"
-                onClick={() => {
-                  window.open(`https://${server}`, '_blank');
-                  close();
-                }}
-                className={css.UserHeroMenuItem}
-                style={{
-                  backgroundColor: cardColor,
-                  color: textColor,
-                }}
-              >
-                <Text size="B300">Open in Browser</Text>
-              </MenuItem>
+              <Box direction="Column" gap="100">
+                <MenuItem
+                  fill="None"
+                  size="300"
+                  radii="300"
+                  onClick={() => {
+                    window.open(`https://${server}`, '_blank');
+                    close();
+                  }}
+                  className={css.UserHeroMenuItem}
+                  style={heroMenuItemStyle(
+                    {
+                      backgroundColor: menuItemBg,
+                      color: textColor,
+                    },
+                    chipHoverBrightness
+                  )}
+                >
+                  <Text size="B300">Open in Browser</Text>
+                </MenuItem>
+              </Box>
             </div>
           </Menu>
         </FocusTrap>
       }
     >
       <Chip
+        variant={cardColor ? undefined : myServer === server ? 'SurfaceVariant' : 'Warning'}
         radii="Pill"
         before={
           cords ? (
@@ -164,12 +192,11 @@ export function ServerChip({
         }
         onClick={open}
         aria-pressed={!!cords}
-        className={css.UserHeroChip}
-        style={{
-          backgroundColor: cardColor,
-          borderColor: backgroundColor,
-          color: textColor,
-        }}
+        className={cardColor ? css.UserHeroChipThemed : css.UserHeroBrightnessHover}
+        style={heroMenuItemStyle(
+          cardColor && chipSurfaceStyle ? chipSurfaceStyle : {},
+          chipHoverBrightness
+        )}
       >
         <Text size="B300" truncate>
           {server}
@@ -184,14 +211,19 @@ export function ShareChip({
   innerColor,
   cardColor,
   textColor,
-  backgroundColor,
+  chipSurfaceStyle,
+  chipFillColor,
+  chipHoverBrightness,
 }: {
   userId: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
-  backgroundColor?: string;
+  chipSurfaceStyle?: CSSProperties;
+  chipFillColor?: string;
+  chipHoverBrightness?: number;
 }) {
+  const menuItemBg = chipFillColor ?? cardColor;
   const [cords, setCords] = useState<RectCords>();
 
   const [copied, setCopied] = useTimeoutToggle();
@@ -220,48 +252,56 @@ export function ShareChip({
           }}
         >
           <Menu>
-            <div style={{ padding: config.space.S100, backgroundColor: innerColor }}>
-              <MenuItem
-                fill="None"
-                size="300"
-                radii="300"
-                className={css.UserHeroMenuItem}
-                style={{
-                  backgroundColor: cardColor,
-                  color: textColor,
-                }}
-                onClick={() => {
-                  copyToClipboard(userId);
-                  setCopied();
-                  close();
-                }}
-              >
-                <Text size="B300">Copy User ID</Text>
-              </MenuItem>
-              <MenuItem
-                fill="None"
-                size="300"
-                radii="300"
-                className={css.UserHeroMenuItem}
-                style={{
-                  backgroundColor: cardColor,
-                  color: textColor,
-                }}
-                onClick={() => {
-                  copyToClipboard(getMatrixToUser(userId));
-                  setCopied();
-                  close();
-                }}
-              >
-                <Text size="B300">Copy User Link</Text>
-              </MenuItem>
+            <div style={{ padding: config.space.S200, backgroundColor: innerColor }}>
+              <Box direction="Column" gap="100">
+                <MenuItem
+                  fill="None"
+                  size="300"
+                  radii="300"
+                  className={css.UserHeroMenuItem}
+                  style={heroMenuItemStyle(
+                    {
+                      backgroundColor: menuItemBg,
+                      color: textColor,
+                    },
+                    chipHoverBrightness
+                  )}
+                  onClick={() => {
+                    copyToClipboard(userId);
+                    setCopied();
+                    close();
+                  }}
+                >
+                  <Text size="B300">Copy User ID</Text>
+                </MenuItem>
+                <MenuItem
+                  fill="None"
+                  size="300"
+                  radii="300"
+                  className={css.UserHeroMenuItem}
+                  style={heroMenuItemStyle(
+                    {
+                      backgroundColor: menuItemBg,
+                      color: textColor,
+                    },
+                    chipHoverBrightness
+                  )}
+                  onClick={() => {
+                    copyToClipboard(getMatrixToUser(userId));
+                    setCopied();
+                    close();
+                  }}
+                >
+                  <Text size="B300">Copy User Link</Text>
+                </MenuItem>
+              </Box>
             </div>
           </Menu>
         </FocusTrap>
       }
     >
       <Chip
-        variant={copied ? 'Success' : undefined}
+        variant={copied ? 'Success' : cardColor ? undefined : 'SurfaceVariant'}
         radii="Pill"
         before={
           cords ? (
@@ -272,12 +312,11 @@ export function ShareChip({
         }
         onClick={open}
         aria-pressed={!!cords}
-        className={css.UserHeroChip}
-        style={{
-          backgroundColor: (!copied && cardColor) || undefined,
-          borderColor: backgroundColor,
-          color: textColor,
-        }}
+        className={!copied && cardColor ? css.UserHeroChipThemed : css.UserHeroBrightnessHover}
+        style={heroMenuItemStyle(
+          cardColor && !copied && chipSurfaceStyle ? chipSurfaceStyle : {},
+          chipHoverBrightness
+        )}
       >
         <Text size="B300" truncate>
           Share
@@ -295,17 +334,22 @@ type MutualRoomsData = {
 
 export function MutualRoomsChip({
   userId,
-  backgroundColor,
   innerColor,
   cardColor,
   textColor,
+  chipSurfaceStyle,
+  chipFillColor,
+  chipHoverBrightness,
 }: {
   userId: string;
-  backgroundColor?: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
+  chipSurfaceStyle?: CSSProperties;
+  chipFillColor?: string;
+  chipHoverBrightness?: number;
 }) {
+  const menuItemBg = chipFillColor ?? cardColor;
   const mx = useMatrixClient();
   const mutualRoomSupported = useMutualRoomsSupport();
   const mutualRoomsState = useMutualRooms(userId);
@@ -372,11 +416,14 @@ export function MutualRoomsChip({
         size="300"
         radii="300"
         className={css.UserHeroMenuItem}
-        style={{
-          paddingLeft: config.space.S100,
-          backgroundColor: cardColor,
-          color: textColor,
-        }}
+        style={heroMenuItemStyle(
+          {
+            paddingLeft: config.space.S100,
+            backgroundColor: menuItemBg,
+            color: textColor,
+          },
+          chipHoverBrightness
+        )}
         onClick={() => {
           if (room.isSpaceRoom()) {
             navigateSpace(roomId);
@@ -486,6 +533,7 @@ export function MutualRoomsChip({
       }
     >
       <Chip
+        variant={cardColor ? undefined : 'SurfaceVariant'}
         radii="Pill"
         before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
         disabled={
@@ -493,12 +541,11 @@ export function MutualRoomsChip({
         }
         onClick={open}
         aria-pressed={!!cords}
-        className={css.UserHeroChip}
-        style={{
-          backgroundColor: cardColor,
-          borderColor: backgroundColor,
-          color: textColor,
-        }}
+        className={cardColor ? css.UserHeroChipThemed : css.UserHeroBrightnessHover}
+        style={heroMenuItemStyle(
+          cardColor && chipSurfaceStyle ? chipSurfaceStyle : {},
+          chipHoverBrightness
+        )}
       >
         <Text size="B300" style={{ color: textColor }}>
           {mutualRoomsState.status === AsyncStatus.Success &&
@@ -529,17 +576,22 @@ export function IgnoredUserAlert() {
 
 export function OptionsChip({
   userId,
-  backgroundColor,
   innerColor,
   cardColor,
   textColor,
+  chipSurfaceStyle,
+  chipFillColor,
+  chipHoverBrightness,
 }: {
   userId: string;
-  backgroundColor?: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
+  chipSurfaceStyle?: CSSProperties;
+  chipFillColor?: string;
+  chipHoverBrightness?: number;
 }) {
+  const menuItemBg = chipFillColor ?? cardColor;
   const mx = useMatrixClient();
   const [cords, setCords] = useState<RectCords>();
   const [editingNick, setEditingNick] = useState(false);
@@ -604,122 +656,129 @@ export function OptionsChip({
           }}
         >
           <Menu>
-            <div style={{ padding: config.space.S100, backgroundColor: innerColor }}>
-              {editingNick ? (
-                <Box
-                  direction="Column"
-                  gap="100"
-                  style={{ padding: `${config.space.S100} ${config.space.S200}`, color: textColor }}
-                >
-                  <Text size="L400">Nickname</Text>
-                  <input
-                    ref={nickInputRef}
-                    defaultValue={currentNick ?? ''}
-                    placeholder="Enter a nickname…"
-                    onKeyDown={handleNickKeyDown}
-                    style={{
-                      background: 'var(--mx-c-surface)',
-                      color: 'var(--mx-c-on-surface)',
-                      border: '1px solid var(--mx-c-outline)',
-                      borderRadius: '6px',
-                      padding: '4px 8px',
-                      fontSize: '14px',
-                      width: '100%',
-                      outline: 'none',
-                    }}
-                  />
-                  <Box gap="200">
-                    <MenuItem
-                      size="300"
-                      radii="300"
-                      variant="Success"
-                      fill="None"
-                      onClick={handleSaveNick}
-                      className={css.UserHeroMenuItem}
+            <div style={{ padding: config.space.S200, backgroundColor: innerColor }}>
+              <Box direction="Column" gap="100">
+                {editingNick ? (
+                  <Box direction="Column" gap="100" style={{ color: textColor }}>
+                    <Text size="L400">Nickname</Text>
+                    <input
+                      ref={nickInputRef}
+                      defaultValue={currentNick ?? ''}
+                      placeholder="Enter a nickname…"
+                      onKeyDown={handleNickKeyDown}
                       style={{
-                        backgroundColor: cardColor,
-                        color: textColor,
+                        background: 'var(--mx-c-surface)',
+                        color: 'var(--mx-c-on-surface)',
+                        border: '1px solid var(--mx-c-outline)',
+                        borderRadius: '6px',
+                        padding: '4px 8px',
+                        fontSize: '14px',
+                        width: '100%',
+                        outline: 'none',
                       }}
-                    >
-                      <Text size="B300">Save</Text>
-                    </MenuItem>
-                    {currentNick && (
+                    />
+                    <Box gap="200">
                       <MenuItem
                         size="300"
                         radii="300"
-                        variant="Critical"
+                        variant="Success"
                         fill="None"
+                        onClick={handleSaveNick}
                         className={css.UserHeroMenuItem}
-                        onClick={() => {
-                          setNickname(userId, undefined);
-                          close();
-                        }}
-                        style={{
-                          backgroundColor: cardColor,
-                          color: textColor,
-                        }}
+                        style={heroMenuItemStyle(
+                          {
+                            backgroundColor: menuItemBg,
+                            color: textColor,
+                          },
+                          chipHoverBrightness
+                        )}
                       >
-                        <Text size="B300">Clear</Text>
+                        <Text size="B300">Save</Text>
                       </MenuItem>
-                    )}
+                      {currentNick && (
+                        <MenuItem
+                          size="300"
+                          radii="300"
+                          variant="Critical"
+                          fill="None"
+                          className={css.UserHeroMenuItem}
+                          onClick={() => {
+                            setNickname(userId, undefined);
+                            close();
+                          }}
+                          style={heroMenuItemStyle(
+                            {
+                              backgroundColor: menuItemBg,
+                              color: textColor,
+                            },
+                            chipHoverBrightness
+                          )}
+                        >
+                          <Text size="B300">Clear</Text>
+                        </MenuItem>
+                      )}
+                    </Box>
                   </Box>
-                </Box>
-              ) : (
+                ) : (
+                  <MenuItem
+                    variant="Surface"
+                    fill="None"
+                    size="300"
+                    radii="300"
+                    before={<Icon size="50" src={Icons.Pencil} />}
+                    onClick={() => setEditingNick(true)}
+                    className={css.UserHeroMenuItem}
+                    style={heroMenuItemStyle(
+                      {
+                        backgroundColor: menuItemBg,
+                        color: textColor,
+                      },
+                      chipHoverBrightness
+                    )}
+                  >
+                    <Text size="B300">{currentNick ? 'Edit Nickname' : 'Set Nickname'}</Text>
+                  </MenuItem>
+                )}
                 <MenuItem
-                  variant="Surface"
+                  variant="Critical"
                   fill="None"
                   size="300"
                   radii="300"
-                  before={<Icon size="50" src={Icons.Pencil} />}
-                  onClick={() => setEditingNick(true)}
-                  className={css.UserHeroMenuItem}
-                  style={{
-                    backgroundColor: cardColor,
-                    color: textColor,
+                  onClick={() => {
+                    toggleIgnore();
+                    close();
                   }}
+                  className={css.UserHeroMenuItem}
+                  style={heroMenuItemStyle({ backgroundColor: menuItemBg }, chipHoverBrightness)}
+                  before={
+                    ignoring ? (
+                      <Spinner variant="Critical" size="50" />
+                    ) : (
+                      <Icon size="50" src={Icons.Prohibited} />
+                    )
+                  }
+                  disabled={ignoring}
                 >
-                  <Text size="B300">{currentNick ? 'Edit Nickname' : 'Set Nickname'}</Text>
+                  <Text size="B300" style={{ color: textColor }}>
+                    {ignored ? 'Unblock User' : 'Block User'}
+                  </Text>
                 </MenuItem>
-              )}
-              <MenuItem
-                variant="Critical"
-                fill="None"
-                size="300"
-                radii="300"
-                onClick={() => {
-                  toggleIgnore();
-                  close();
-                }}
-                className={css.UserHeroMenuItem}
-                style={{ backgroundColor: cardColor }}
-                before={
-                  ignoring ? (
-                    <Spinner variant="Critical" size="50" />
-                  ) : (
-                    <Icon size="50" src={Icons.Prohibited} />
-                  )
-                }
-                disabled={ignoring}
-              >
-                <Text size="B300" style={{ color: textColor }}>
-                  {ignored ? 'Unblock User' : 'Block User'}
-                </Text>
-              </MenuItem>
+              </Box>
             </div>
           </Menu>
         </FocusTrap>
       }
     >
       <Chip
+        variant={cardColor ? undefined : 'SurfaceVariant'}
         radii="Pill"
         onClick={open}
         aria-pressed={!!cords}
-        className={css.UserHeroChip}
-        style={{
-          backgroundColor: cardColor,
-          borderColor: backgroundColor,
-          color: textColor,
-        }}
+        className={cardColor ? css.UserHeroChipThemed : css.UserHeroBrightnessHover}
+        style={heroMenuItemStyle(
+          cardColor && chipSurfaceStyle ? chipSurfaceStyle : {},
+          chipHoverBrightness
+        )}
       >
         {ignoring ? (
           <Spinner variant="Secondary" size="50" />
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index f284296b2..746a5d1e3 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import type { CSSProperties } from 'react';
 import {
   Avatar,
   Box,
@@ -78,10 +79,14 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs
   const isBackgroundDark = fetchedBrightness ? fetchedBrightness === 'dark' : undefined;
   const cardColor =
     shadeColor(backgroundColor, isBackgroundDark ? -80 : 80) ?? standardColors.Background.Container;
+  const innerColor = shadeColor(backgroundColor, isBackgroundDark ? -50 : 50) ?? backgroundColor;
+  const statusSurfaceColor =
+    shadeColor(innerColor, fetchedBrightness === 'light' ? -14 : 32) ?? cardColor;
   const textColor =
     ((fetchedBrightness === 'dark' || areColorsTooSimilar('#000000', cardColor)) && '#FFFFFF') ||
     ((fetchedBrightness === 'light' || areColorsTooSimilar('#FFFFFF', cardColor)) && '#000000') ||
     undefined;
+  const statusHoverBrightness = fetchedBrightness === 'light' ? 0.94 : 1.08;
 
   return (
     <Box direction="Column" className={css.UserHero} style={{ backgroundColor: backgroundColor }}>
@@ -153,16 +158,29 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs
         {status && status.length > 0 && (
           <div className={css.UserHeroStatusContainer}>
             <Tooltip
+              radii="400"
+              variant="Surface"
               onClick={isExpandable ? () => setIsFullStatus(!isFullStatus) : undefined}
-              className={css.UserHeroStatusTooltip}
+              className={classNames(
+                css.UserHeroStatusTooltip,
+                isExpandable && css.UserHeroStatusTooltipInteractive
+              )}
               style={{
                 maxHeight: isFullStatus ? toRem(105) : toRem(48),
                 cursor: isExpandable ? 'pointer' : 'default',
                 transform: 'none',
                 transition: 'none',
                 display: 'flex',
-                backgroundColor: cardColor,
+                padding: `${toRem(8)} ${toRem(12)}`,
+                backgroundColor: statusSurfaceColor,
                 color: textColor,
+                borderStyle: 'none',
+                borderWidth: 0,
+                outline: 'none',
+                boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.05)',
+                ...({
+                  '--user-hero-status-hover-brightness': String(statusHoverBrightness),
+                } as CSSProperties),
               }}
             >
               <Box direction="Row" gap="100" style={{ height: '100%', width: '100%' }}>
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 59ca01b3e..8541d3a68 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -11,7 +11,7 @@ import {
   Text,
   toRem,
 } from 'folds';
-import type { SyntheticEvent } from 'react';
+import type { CSSProperties, SyntheticEvent } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
@@ -52,6 +52,8 @@ import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUr
 import { getMxIdServer } from '$utils/mxIdHelper';
 import { TextViewerContent } from '$components/text-viewer';
 import { areColorsTooSimilar, shadeColor } from '$utils/shadeColor';
+import { ThemeKind, useTheme } from '$hooks/useTheme';
+import { heroMenuItemStyle } from './heroMenuItemStyle';
 import { CreatorChip } from './CreatorChip';
 import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
 import { PowerChip } from './PowerChip';
@@ -80,7 +82,6 @@ type UserExtendedSectionProps = {
   profile: UserProfile;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: LinkifyOpts;
-  backgroundColor?: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
@@ -97,7 +98,6 @@ function UserExtendedSection({
   profile,
   htmlReactParserOptions,
   linkifyOpts,
-  backgroundColor,
   innerColor,
   cardColor,
   textColor,
@@ -228,9 +228,9 @@ function UserExtendedSection({
     () => (
       <Box justifyContent="Center" grow="Yes">
         <Button
-          variant="Secondary"
-          size="300"
           fill="None"
+          size="300"
+          className={css.MiscDataToggleButton}
           onClick={() => setShowMisc(!showMisc)}
           after={miscDataIndex === -1 && <Icon size="50" src={Icons.ChevronBottom} />}
           style={{
@@ -293,9 +293,7 @@ function UserExtendedSection({
           style={{
             backgroundColor: cardColor,
             borderRadius: config.radii.R400,
-            borderColor: backgroundColor,
-            borderStyle: 'solid',
-            borderWidth: '1px',
+            boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)',
             maxHeight: '200px',
             marginTop: config.space.S0,
             overflowY: 'auto',
@@ -326,11 +324,10 @@ function UserExtendedSection({
           {miscDataIndex > -1 && (
             <div
               style={{
-                border: '2px solid',
                 backgroundColor: cardColor,
-                borderColor: 'var(--sable-surface-container-line)',
                 borderRadius: config.radii.R400,
-                borderWidth: '1px',
+                boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)',
+                overflow: 'hidden',
               }}
             >
               <Box
@@ -345,6 +342,7 @@ function UserExtendedSection({
                   <Button
                     size="300"
                     fill="None"
+                    className={css.MiscDataToggleButton}
                     onClick={() =>
                       setMiscDataIndex(
                         miscDataIndex === 0 ? unknownFields.length - 1 : miscDataIndex - 1
@@ -360,6 +358,7 @@ function UserExtendedSection({
                   <Button
                     size="300"
                     fill="None"
+                    className={css.MiscDataToggleButton}
                     onClick={() => setMiscDataIndex((miscDataIndex + 1) % unknownFields.length)}
                     style={{ color: textColor }}
                   >
@@ -370,17 +369,22 @@ function UserExtendedSection({
               <Scroll
                 size="300"
                 direction="Both"
+                visibility="Hover"
+                hideTrack
                 style={{
-                  backgroundColor: color.Background.Container,
-                  color: color.Background.OnContainer,
+                  backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                  color: textColor,
+                  boxShadow:
+                    'inset 0 2px 0 rgba(0, 0, 0, 0.65), inset 0 4px 6px -2px rgba(0, 0, 0, 0.35)',
+                  fontFamily: 'monospace',
                 }}
               >
                 <Box
                   direction="Column"
                   style={{
                     padding: config.space.S200,
-                    borderRadius: config.radii.R400,
                     maxHeight: toRem(100),
+                    opacity: 0.85,
                   }}
                 >
                   <TextViewerContent
@@ -402,6 +406,7 @@ type UserRoomProfileProps = {
   initialProfile?: Partial<UserProfile>;
 };
 export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomProfileProps>) {
+  const theme = useTheme();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const navigate = useNavigate();
@@ -515,6 +520,43 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomPro
 
   const showCustomHeroCard = !!fetchedProfile.heroColor;
 
+  const chipFillColor =
+    shadeColor(innerColor, fetchedBrightness === 'light' ? -14 : 32) ?? cardColor;
+  const chipHoverBrightness =
+    fetchedBrightness === 'light'
+      ? 0.94
+      : fetchedBrightness === 'dark'
+        ? 1.12
+        : theme.kind === ThemeKind.Dark
+          ? 1.12
+          : 0.94;
+  const chipSurfaceStyle: CSSProperties | undefined =
+    showCustomHeroCard && chipFillColor
+      ? ({
+          backgroundColor: chipFillColor,
+          borderColor: 'transparent',
+          color: textColor,
+          '--user-hero-chip-hover-brightness': chipHoverBrightness,
+        } as CSSProperties)
+      : undefined;
+
+  const chipMenuTextColor = textColor ?? color.Surface.OnContainer;
+  const chipColors = showCustomHeroCard
+    ? {
+        innerColor,
+        cardColor,
+        textColor: chipMenuTextColor,
+        chipSurfaceStyle,
+        chipFillColor,
+        chipHoverBrightness,
+      }
+    : {
+        innerColor: color.Surface.Container,
+        chipFillColor: color.SurfaceVariant.Container,
+        textColor: color.SurfaceVariant.OnContainer,
+        chipHoverBrightness,
+      };
+
   return (
     <Box direction="Column" style={{ color: textColor }}>
       <UserHero
@@ -538,9 +580,7 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomPro
           style={{
             backgroundColor: innerColor,
             borderRadius: toRem(5),
-            borderWidth: toRem(5),
-            borderColor: '#00000000',
-            borderStyle: 'solid',
+            boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)',
             padding: showCustomHeroCard && innerColor ? config.space.S200 : config.space.S300,
           }}
         >
@@ -558,13 +598,11 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomPro
                 radii="300"
                 before={<Icon size="50" src={Icons.Message} filled />}
                 onClick={handleMessage}
-                className={css.UserHeroChip}
+                className={showCustomHeroCard ? css.UserHeroChipThemed : css.UserHeroChip}
                 style={{
                   marginLeft: 'auto',
-                  backgroundColor:
-                    backgroundColor !== color.Surface.Container ? cardColor : undefined,
-                  borderColor: backgroundColor,
-                  color: backgroundColor !== color.Surface.Container ? textColor : undefined,
+                  ...(showCustomHeroCard && chipSurfaceStyle ? chipSurfaceStyle : {}),
+                  ...heroMenuItemStyle({}, chipHoverBrightness),
                 }}
               >
                 <Text size="B300">Message</Text>
@@ -575,62 +613,20 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomPro
             profile={extendedProfile}
             htmlReactParserOptions={htmlReactParserOptions}
             linkifyOpts={linkifyOpts}
-            backgroundColor={backgroundColor}
             innerColor={innerColor}
             cardColor={cardColor}
             textColor={textColor}
           />
           <Box alignItems="Center" gap="100" wrap="Wrap" justifyContent="Center">
-            {server && (
-              <ServerChip
-                server={server}
-                backgroundColor={backgroundColor}
-                innerColor={innerColor}
-                cardColor={cardColor}
-                textColor={textColor}
-              />
-            )}
-            <ShareChip
-              userId={userId}
-              backgroundColor={backgroundColor}
-              innerColor={innerColor}
-              cardColor={cardColor}
-              textColor={textColor}
-            />
+            {server && <ServerChip server={server} {...chipColors} />}
+            <ShareChip userId={userId} {...chipColors} />
             {creator ? (
-              <CreatorChip
-                backgroundColor={backgroundColor}
-                innerColor={innerColor}
-                cardColor={cardColor}
-                textColor={textColor}
-              />
+              <CreatorChip {...chipColors} />
             ) : (
-              <PowerChip
-                userId={userId}
-                backgroundColor={backgroundColor}
-                innerColor={innerColor}
-                cardColor={cardColor}
-                textColor={textColor}
-              />
-            )}
-            {userId !== myUserId && (
-              <MutualRoomsChip
-                userId={userId}
-                backgroundColor={backgroundColor}
-                innerColor={innerColor}
-                cardColor={cardColor}
-                textColor={textColor}
-              />
-            )}
-            {userId !== myUserId && (
-              <OptionsChip
-                userId={userId}
-                backgroundColor={backgroundColor}
-                innerColor={innerColor}
-                cardColor={cardColor}
-                textColor={textColor}
-              />
+              <PowerChip userId={userId} {...chipColors} />
             )}
+            {userId !== myUserId && <MutualRoomsChip userId={userId} {...chipColors} />}
+            {userId !== myUserId && <OptionsChip userId={userId} {...chipColors} />}
           </Box>
           {ignored && <IgnoredUserAlert />}
           {member && membership === bannedMembership && (
diff --git a/src/app/components/user-profile/heroMenuItemStyle.ts b/src/app/components/user-profile/heroMenuItemStyle.ts
new file mode 100644
index 000000000..0b66e36ce
--- /dev/null
+++ b/src/app/components/user-profile/heroMenuItemStyle.ts
@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'react';
+
+export function heroMenuItemStyle(
+  base: CSSProperties,
+  chipHoverBrightness?: number
+): CSSProperties {
+  const bg = base.backgroundColor;
+  const out: CSSProperties = { ...base };
+  if (typeof bg === 'string' && bg !== '' && bg !== 'transparent') {
+    (out as CSSProperties & { '--user-hero-menu-item-bg': string })['--user-hero-menu-item-bg'] =
+      bg;
+  }
+  if (chipHoverBrightness != null) {
+    (out as CSSProperties & { '--user-hero-chip-hover-brightness': number })[
+      '--user-hero-chip-hover-brightness'
+    ] = chipHoverBrightness;
+  }
+  return out;
+}
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 3ff2f6c10..e7283d43b 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -57,9 +57,12 @@ export const UserHeroStatusContainer = style({
 export const UserHeroStatusTooltip = style({
   maxWidth: '98%',
   justifySelf: 'left',
+});
+
+export const UserHeroStatusTooltipInteractive = style({
   cursor: 'pointer',
   ':hover': {
-    filter: 'brightness(0.8)',
+    filter: 'brightness(var(--user-hero-status-hover-brightness, 0.94))',
     transform: 'translateY(-1px)',
   },
 });
@@ -78,19 +81,55 @@ export const UserHeroAvatarImg = style({
     },
   },
 });
-export const UserHeroChip = style({
-  borderStyle: 'solid',
-  borderWidth: '1px',
+export const UserHeroBrightnessHover = style({
   ':hover': {
-    filter: 'brightness(0.8)',
+    filter: 'brightness(var(--user-hero-chip-hover-brightness, 0.94))',
     transform: 'translateY(-1px)',
   },
 });
+
+export const UserHeroChip = style([
+  UserHeroBrightnessHover,
+  {
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
+  },
+]);
+
+export const UserHeroChipThemed = style([
+  UserHeroBrightnessHover,
+  {
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: 'transparent',
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
+  },
+]);
+
+export const MiscDataToggleButton = style({
+  backgroundColor: 'transparent',
+  opacity: 0.75,
+  selectors: {
+    '&:hover': {
+      opacity: 1,
+      backgroundColor: 'transparent',
+      transform: 'none !important',
+    },
+    '&:active': {
+      transform: 'none !important',
+    },
+  },
+});
+/** Same hover lift/filter as UserHeroBrightnessHover; pins bg so folds MenuItem hover can't mask brightness. */
 export const UserHeroMenuItem = style({
   borderStyle: 'hidden',
   borderWidth: '1px',
-  ':hover': {
-    filter: 'brightness(0.8)',
-    transform: 'translateY(-1px)',
+  selectors: {
+    '&:hover': {
+      filter: 'brightness(var(--user-hero-chip-hover-brightness, 0.94))',
+      transform: 'translateY(-1px)',
+      backgroundColor: 'var(--user-hero-menu-item-bg) !important',
+    },
   },
 });