diff --git a/.changeset/implement_an_interface_to_allow_roomspace_profile_customization_without_needing_to_call_the_relating_commands_directly.md b/.changeset/implement_an_interface_to_allow_roomspace_profile_customization_without_needing_to_call_the_relating_commands_directly.md
new file mode 100644
index 000000000..75f66a09f
--- /dev/null
+++ b/.changeset/implement_an_interface_to_allow_roomspace_profile_customization_without_needing_to_call_the_relating_commands_directly.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Implement an interface to allow room/space profile customization without needing to call the relating commands directly.
diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index 70c4cacd0..dbfbd1390 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -1,5 +1,32 @@
-import { useCallback } from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll, Switch } from 'folds';
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  FormEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Scroll,
+  Switch,
+  Avatar,
+  Input,
+  config,
+  Button,
+  Spinner,
+  OverlayBackdrop,
+  Overlay,
+  OverlayCenter,
+  Modal,
+  Dialog,
+  Header,
+} from 'folds';
 import { Page, PageContent, PageHeader } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
 import { SettingTile } from '$components/setting-tile';
@@ -11,25 +38,352 @@ import { useRoomCreators } from '$hooks/useRoomCreators';
 import { useRoomPermissions } from '$hooks/useRoomPermissions';
 import { createLogger } from '$utils/debug';
 import { SequenceCardStyle } from '$features/common-settings/styles.css';
+import { UserAvatar } from '$components/user-avatar';
+import { nameInitials } from '$utils/common';
+import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
+import { UserProfile, useUserProfile } from '$hooks/useUserProfile';
+import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
+import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
+import { Room, RoomMember } from '$types/matrix-sdk';
+import { Command, useCommands } from '$hooks/useCommands';
+import { useCapabilities } from '$hooks/useCapabilities';
+import { useObjectURL } from '$hooks/useObjectURL';
+import { createUploadAtom, UploadSuccess } from '$state/upload';
+import { useFilePicker } from '$hooks/useFilePicker';
+import { CompactUploadCardRenderer } from '$components/upload-card';
+import FocusTrap from 'focus-trap-react';
+import { ImageEditor } from '$components/image-editor';
+import { stopPropagation } from '$utils/keyboard';
+import { ModalWide } from '$styles/Modal.css';
+import { NameColorEditor } from '$features/settings/account/NameColorEditor';
+import { PronounEditor, PronounSet } from '$features/settings/account/PronounEditor';
 
-type CosmeticsProps = {
-  requestClose: () => void;
+const log = createLogger('Cosmetics');
+
+type CosmeticsSettingProps = {
+  profile: UserProfile;
+  member: RoomMember;
+  userId: string;
+  room: Room;
 };
+export function CosmeticsAvatar({ profile, member, userId, room }: CosmeticsSettingProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const capabilities = useCapabilities();
+  const [alertRemove, setAlertRemove] = useState(false);
+  const disableSetAvatar = capabilities['m.set_avatar_url']?.enabled === false;
 
-const log = createLogger('Cosmetics');
+  const avatarMxc = member.getMxcAvatarUrl();
+  const avatarUrl =
+    avatarMxc && (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined);
+
+  const [imageFile, setImageFile] = useState<File>();
+  const imageFileURL = useObjectURL(imageFile);
+  const uploadAtom = useMemo(() => {
+    if (imageFile) return createUploadAtom(imageFile);
+    return undefined;
+  }, [imageFile]);
+
+  const pickFile = useFilePicker(setImageFile, false);
+
+  const handleRemoveUpload = useCallback(() => {
+    setImageFile(undefined);
+  }, []);
+
+  const myRoomAvatar = useCommands(mx, room)[Command.MyRoomAvatar];
+  const handleUploaded = useCallback(
+    (upload: UploadSuccess) => {
+      const { mxc } = upload;
+      myRoomAvatar.exe(mxc);
+      handleRemoveUpload();
+    },
+    [myRoomAvatar, handleRemoveUpload]
+  );
+
+  const handleRemoveAvatar = () => {
+    myRoomAvatar.exe('');
+    setAlertRemove(false);
+  };
+
+  return (
+    <SettingTile
+      title="Room Avatar"
+      after={
+        <Avatar size="500" radii="300">
+          <UserAvatar
+            userId={userId}
+            src={avatarUrl}
+            renderFallback={() => (
+              <Text size="H4">{nameInitials(room.getMember(userId)!.rawDisplayName)}</Text>
+            )}
+          />
+        </Avatar>
+      }
+    >
+      {uploadAtom ? (
+        <Box gap="200" direction="Column">
+          <CompactUploadCardRenderer
+            uploadAtom={uploadAtom}
+            onRemove={handleRemoveUpload}
+            onComplete={handleUploaded}
+          />
+        </Box>
+      ) : (
+        <Box gap="200">
+          <Button
+            onClick={() => pickFile('image/*')}
+            size="300"
+            variant="Secondary"
+            fill="Soft"
+            outlined
+            radii="300"
+            disabled={disableSetAvatar}
+          >
+            <Text size="B300">Upload</Text>
+          </Button>
+          {avatarUrl &&
+            avatarUrl !==
+              mxcUrlToHttp(mx, profile.avatarUrl ?? '', useAuthentication, 96, 96, 'crop') && (
+              <Button
+                size="300"
+                variant="Critical"
+                fill="None"
+                radii="300"
+                disabled={disableSetAvatar}
+                onClick={() => setAlertRemove(true)}
+              >
+                <Text size="B300">Remove</Text>
+              </Button>
+            )}
+        </Box>
+      )}
+
+      {imageFileURL && (
+        <Overlay open={false} backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: handleRemoveUpload,
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal className={ModalWide} variant="Surface" size="500">
+                <ImageEditor
+                  name={imageFile?.name ?? 'Unnamed'}
+                  url={imageFileURL}
+                  requestClose={handleRemoveUpload}
+                />
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+
+      <Overlay open={alertRemove} backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setAlertRemove(false),
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Dialog variant="Surface">
+              <Header
+                style={{
+                  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                  borderBottomWidth: config.borderWidth.B300,
+                }}
+                variant="Surface"
+                size="500"
+              >
+                <Box grow="Yes">
+                  <Text size="H4">Remove Room Avatar</Text>
+                </Box>
+                <IconButton size="300" onClick={() => setAlertRemove(false)} radii="300">
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              </Header>
+              <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+                <Box direction="Column" gap="200">
+                  <Text priority="400">Are you sure you want to remove room avatar?</Text>
+                </Box>
+                <Button variant="Critical" onClick={handleRemoveAvatar}>
+                  <Text size="B400">Remove</Text>
+                </Button>
+              </Box>
+            </Dialog>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </SettingTile>
+  );
+}
+
+export function CosmeticsNickname({ profile, member, userId, room }: CosmeticsSettingProps) {
+  const mx = useMatrixClient();
+
+  const defaultDisplayName = member.rawDisplayName;
+  const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
+  const hasChanges = displayName !== defaultDisplayName;
+
+  const myRoomNick = useCommands(mx, room)[Command.MyRoomNick];
+  const [changeState, changeDisplayName] = useAsyncCallback((name: string) => myRoomNick.exe(name));
+  const changingDisplayName = changeState.status === AsyncStatus.Loading;
+
+  useEffect(() => {
+    setDisplayName(defaultDisplayName);
+  }, [defaultDisplayName]);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const name = evt.currentTarget.value;
+    setDisplayName(name);
+  };
+
+  const handleReset = () => {
+    if (hasChanges) {
+      setDisplayName(defaultDisplayName);
+    } else {
+      setDisplayName(profile.displayName ?? getMxIdLocalPart(userId) ?? userId);
+    }
+  };
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (changingDisplayName) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const displayNameInput = target?.displayNameInput as HTMLInputElement | undefined;
+    const name = displayNameInput?.value;
 
+    changeDisplayName(name ?? '');
+  };
+
+  return (
+    <SettingTile title="Room Display Name">
+      <Box direction="Column" grow="Yes" gap="100">
+        <Box as="form" onSubmit={handleSubmit} gap="200">
+          <Box grow="Yes" direction="Column">
+            <Input
+              name="displayNameInput"
+              value={displayName}
+              onChange={handleChange}
+              variant="Secondary"
+              radii="300"
+              style={{ paddingRight: config.space.S200 }}
+              readOnly={changingDisplayName}
+              after={
+                displayName !== (profile.displayName ?? getMxIdLocalPart(userId) ?? userId) &&
+                !changingDisplayName && (
+                  <IconButton
+                    type="reset"
+                    onClick={handleReset}
+                    size="300"
+                    radii="300"
+                    variant="Secondary"
+                  >
+                    <Icon src={Icons.Cross} size="100" />
+                  </IconButton>
+                )
+              }
+            />
+          </Box>
+          <Button
+            size="400"
+            variant={hasChanges ? 'Success' : 'Secondary'}
+            fill={hasChanges ? 'Solid' : 'Soft'}
+            outlined
+            radii="300"
+            disabled={!hasChanges || changingDisplayName}
+            type="submit"
+          >
+            {changingDisplayName && <Spinner variant="Success" fill="Solid" size="300" />}
+            <Text size="B400">Save</Text>
+          </Button>
+        </Box>
+      </Box>
+    </SettingTile>
+  );
+}
+
+export function CosmeticsFont({
+  room,
+  isSpace,
+  font,
+  disabled,
+}: {
+  room: Room;
+  isSpace: boolean;
+  font?: string;
+  disabled: boolean;
+}) {
+  const mx = useMatrixClient();
+
+  const initialFont = (/^"?(.*?)"?, var\(--font-secondary\)$/.exec(font ?? '') ?? [''])[1];
+  const [val, setVal] = useState(initialFont);
+
+  useEffect(() => setVal(initialFont), [initialFont]);
+
+  const fontCommand = useCommands(mx, room)[isSpace ? Command.SFont : Command.Font];
+  const handleSave = () => {
+    if (val === initialFont) return;
+    fontCommand.exe(val);
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setVal(e.currentTarget.value);
+  };
+
+  return (
+    <SettingTile
+      title={isSpace ? 'Space Font' : 'Room Font'}
+      description="Use a custom font to render your display name"
+      after={
+        <Input
+          value={val}
+          size="300"
+          radii="300"
+          disabled={disabled}
+          variant="Secondary"
+          placeholder="Comic Sans"
+          onChange={handleChange}
+          onBlur={handleSave}
+          onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+          style={{ width: '232px' }}
+        />
+      }
+    />
+  );
+}
+
+type CosmeticsProps = {
+  requestClose: () => void;
+};
 export function Cosmetics({ requestClose }: CosmeticsProps) {
   const mx = useMatrixClient();
+  const userId = mx.getUserId()!;
+  const profile = useUserProfile(userId);
   const room = useRoom();
+  const roomProfile = useUserProfile(userId, room);
   const creators = useRoomCreators(room);
+  const member = room.getMember(userId)!;
   const powerLevels = usePowerLevels(room);
   const isSpace = room.isSpaceRoom();
 
   const permissions = useRoomPermissions(creators, powerLevels);
   const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
 
+  const commands = useCommands(mx, room);
+
   const getLevel = (eventType: string) => (powerLevels as any).events?.[eventType] ?? 50;
 
+  const canHaveRoomColor = getLevel(StateEvent.RoomCosmeticsColor) === 0;
+  const canHaveRoomPronouns = getLevel(StateEvent.RoomCosmeticsPronouns) === 0;
+  const canHaveRoomFont = getLevel(StateEvent.RoomCosmeticsFont) === 0;
+
   const handleToggle = useCallback(
     async (eventType: string, enabled: boolean) => {
       const newLevel = enabled ? 0 : 50;
@@ -71,97 +425,89 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <Box direction="Column" gap="100">
-                <Text size="L400">Settings</Text>
-
+                <Text size="L400">Profile</Text>
+                {!isSpace && (
+                  <SequenceCard
+                    className={SequenceCardStyle}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="400"
+                  >
+                    <CosmeticsAvatar
+                      profile={profile}
+                      member={member}
+                      userId={userId}
+                      room={room}
+                    />
+                  </SequenceCard>
+                )}
+                {!isSpace && (
+                  <SequenceCard
+                    className={SequenceCardStyle}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="400"
+                  >
+                    <CosmeticsNickname
+                      profile={profile}
+                      member={member}
+                      userId={userId}
+                      room={room}
+                    />
+                  </SequenceCard>
+                )}
                 <SequenceCard
                   className={SequenceCardStyle}
                   variant="SurfaceVariant"
                   direction="Column"
                   gap="400"
                 >
-                  <SettingTile
-                    title={isSpace ? 'Space-Wide Colors' : 'Room Colors'}
-                    description={
-                      isSpace
-                        ? 'Allow everyone to use /scolor in this space.'
-                        : 'Allow everyone to use /color in this room.'
-                    }
-                    after={
-                      <Switch
-                        variant="Primary"
-                        value={getLevel(StateEvent.RoomCosmeticsColor) === 0}
-                        onChange={(enabled) => handleToggle(StateEvent.RoomCosmeticsColor, enabled)}
-                        disabled={!canEditPermissions}
-                      />
+                  <NameColorEditor
+                    title={isSpace ? 'Space Name Color' : 'Room Name Color'}
+                    current={roomProfile.resolvedColor}
+                    disabled={!(canHaveRoomColor || canEditPermissions)}
+                    onSave={(color) =>
+                      commands[isSpace ? Command.SColor : Command.Color].exe(color ?? 'clear')
                     }
                   />
                 </SequenceCard>
-
                 <SequenceCard
                   className={SequenceCardStyle}
                   variant="SurfaceVariant"
                   direction="Column"
                   gap="400"
                 >
-                  <SettingTile
-                    title={isSpace ? 'Space-Wide Fonts' : 'Room Fonts'}
-                    description={
-                      isSpace
-                        ? 'Allow everyone to use /sfont in this space.'
-                        : 'Allow everyone to use /font in this room.'
-                    }
-                    after={
-                      <Switch
-                        variant="Primary"
-                        value={getLevel(StateEvent.RoomCosmeticsFont) === 0}
-                        onChange={(enabled) => handleToggle(StateEvent.RoomCosmeticsFont, enabled)}
-                        disabled={!canEditPermissions}
-                      />
+                  <PronounEditor
+                    title={isSpace ? 'Space Pronouns' : 'Room Pronouns'}
+                    current={roomProfile.resolvedPronouns as any}
+                    disabled={!(canHaveRoomPronouns || canEditPermissions)}
+                    onSave={(p) =>
+                      commands[isSpace ? Command.SPronoun : Command.Pronoun].exe(
+                        p
+                          .map(({ language, summary }: PronounSet) =>
+                            language ? `${language}:${summary}` : summary
+                          )
+                          .join()
+                      )
                     }
                   />
                 </SequenceCard>
-
                 <SequenceCard
                   className={SequenceCardStyle}
                   variant="SurfaceVariant"
                   direction="Column"
                   gap="400"
                 >
-                  <SettingTile
-                    title={isSpace ? 'Space-Wide Pronouns' : 'Room Pronouns'}
-                    description={
-                      isSpace
-                        ? 'Allow everyone to use /spronoun in this space.'
-                        : 'Allow everyone to use /pronoun in this room.'
-                    }
-                    after={
-                      <Switch
-                        variant="Primary"
-                        value={getLevel(StateEvent.RoomCosmeticsPronouns) === 0}
-                        onChange={(enabled) =>
-                          handleToggle(StateEvent.RoomCosmeticsPronouns, enabled)
-                        }
-                        disabled={!canEditPermissions}
-                      />
-                    }
+                  <CosmeticsFont
+                    room={room}
+                    isSpace={isSpace}
+                    font={roomProfile.resolvedFont}
+                    disabled={!(canHaveRoomFont || canEditPermissions)}
                   />
                 </SequenceCard>
               </Box>
-
-              {/* --- COMMAND REFERENCE SECTION --- */}
               <Box direction="Column" gap="100">
-                <Text size="L400">Commands</Text>
-                <SequenceCard
-                  className={SequenceCardStyle}
-                  variant="SurfaceVariant"
-                  direction="Column"
-                  gap="400"
-                >
-                  <SettingTile
-                    title="/color [hex]"
-                    description="Set room-specific name color. (e.g. /color #ff00ff)"
-                  />
-                </SequenceCard>
+                <Text size="L400">Settings</Text>
                 <SequenceCard
                   className={SequenceCardStyle}
                   variant="SurfaceVariant"
@@ -169,8 +515,16 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   gap="400"
                 >
                   <SettingTile
-                    title="/font [name]"
-                    description="Set room-specific name font. (e.g. /font monospace)"
+                    title={isSpace ? 'Space-Wide Colors' : 'Room Colors'}
+                    description={`Allow everyone to set a color that applies in ${isSpace ? "all the space's rooms" : 'this room'}.`}
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={canHaveRoomColor}
+                        onChange={(enabled) => handleToggle(StateEvent.RoomCosmeticsColor, enabled)}
+                        disabled={!canEditPermissions}
+                      />
+                    }
                   />
                 </SequenceCard>
                 <SequenceCard
@@ -180,8 +534,18 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   gap="400"
                 >
                   <SettingTile
-                    title="/pronoun [pronouns]"
-                    description='Set room-specific pronoun set. (e.g. /pronoun "they\them, it\its")'
+                    title={isSpace ? 'Space-Wide Pronouns' : 'Room Pronouns'}
+                    description={`Allow everyone to set pronouns that apply in ${isSpace ? "all the space's rooms" : 'this room'}.`}
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={canHaveRoomPronouns}
+                        onChange={(enabled) =>
+                          handleToggle(StateEvent.RoomCosmeticsPronouns, enabled)
+                        }
+                        disabled={!canEditPermissions}
+                      />
+                    }
                   />
                 </SequenceCard>
                 <SequenceCard
@@ -191,8 +555,16 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   gap="400"
                 >
                   <SettingTile
-                    title="/scolor | /sfont | /spronoun"
-                    description="Apply colors/fonts/pronouns to the entire space."
+                    title={isSpace ? 'Space-Wide Fonts' : 'Room Fonts'}
+                    description={`Allow everyone to set a font that applies in ${isSpace ? "all the space's rooms" : 'this room'}.`}
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={canHaveRoomFont}
+                        onChange={(enabled) => handleToggle(StateEvent.RoomCosmeticsFont, enabled)}
+                        disabled={!canEditPermissions}
+                      />
+                    }
                   />
                 </SequenceCard>
               </Box>
diff --git a/src/app/features/room-settings/RoomSettings.tsx b/src/app/features/room-settings/RoomSettings.tsx
index 8707cefa6..7c973d995 100644
--- a/src/app/features/room-settings/RoomSettings.tsx
+++ b/src/app/features/room-settings/RoomSettings.tsx
@@ -24,6 +24,7 @@ type RoomSettingsMenuItem = {
   page: RoomSettingsPage;
   name: string;
   icon: IconSrc;
+  activeIcon?: IconSrc;
 };
 
 const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] =>
@@ -48,6 +49,7 @@ const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] =>
         page: RoomSettingsPage.CosmeticsPage,
         name: 'Cosmetics',
         icon: Icons.Alphabet,
+        activeIcon: Icons.AlphabetUnderline,
       },
       {
         page: RoomSettingsPage.EmojisStickersPage,
@@ -141,29 +143,34 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
               <Box grow="Yes" direction="Column">
                 <PageNavContent>
                   <div style={{ flexGrow: 1 }}>
-                    {menuItems.map((item) => (
-                      <MenuItem
-                        key={item.name}
-                        variant="Background"
-                        radii="400"
-                        aria-pressed={activePage === item.page}
-                        before={
-                          <Icon src={item.icon} size="100" filled={activePage === item.page} />
-                        }
-                        onClick={() => setActivePage(item.page)}
-                      >
-                        <Text
-                          style={{
-                            fontWeight:
-                              activePage === item.page ? config.fontWeight.W600 : undefined,
-                          }}
-                          size="T300"
-                          truncate
+                    {menuItems.map((item) => {
+                      const currentIcon =
+                        activePage === item.page && item.activeIcon ? item.activeIcon : item.icon;
+
+                      return (
+                        <MenuItem
+                          key={item.name}
+                          variant="Background"
+                          radii="400"
+                          aria-pressed={activePage === item.page}
+                          before={
+                            <Icon src={currentIcon} size="100" filled={activePage === item.page} />
+                          }
+                          onClick={() => setActivePage(item.page)}
                         >
-                          {item.name}
-                        </Text>
-                      </MenuItem>
-                    ))}
+                          <Text
+                            style={{
+                              fontWeight:
+                                activePage === item.page ? config.fontWeight.W600 : undefined,
+                            }}
+                            size="T300"
+                            truncate
+                          >
+                            {item.name}
+                          </Text>
+                        </MenuItem>
+                      );
+                    })}
                   </div>
                 </PageNavContent>
               </Box>
diff --git a/src/app/features/settings/account/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx
index df7ce7de9..2c6e10a10 100644
--- a/src/app/features/settings/account/NameColorEditor.tsx
+++ b/src/app/features/settings/account/NameColorEditor.tsx
@@ -5,11 +5,20 @@ import { SettingTile } from '$components/setting-tile';
 import { HexColorPickerPopOut } from '$components/HexColorPickerPopOut';
 
 type NameColorEditorProps = {
+  title: string;
+  description?: string;
   current?: string;
   onSave: (color: string | null) => void;
+  disabled?: boolean;
 };
 
-export function NameColorEditor({ current, onSave }: NameColorEditorProps) {
+export function NameColorEditor({
+  title,
+  description,
+  current,
+  onSave,
+  disabled,
+}: NameColorEditorProps) {
   const stripQuotes = (str?: string) => {
     if (!str) return '';
     // to solve the silly tuwunel
@@ -48,10 +57,7 @@ export function NameColorEditor({ current, onSave }: NameColorEditorProps) {
 
   return (
     <Box direction="Column" gap="100">
-      <SettingTile
-        title="Global Name Color"
-        description="Custom name color everywhere names have color!"
-      />
+      <SettingTile title={title} description={description} />
       <Box
         alignItems="Center"
         justifyContent="SpaceBetween"
@@ -73,6 +79,7 @@ export function NameColorEditor({ current, onSave }: NameColorEditorProps) {
                 variant="Secondary"
                 fill="None"
                 radii="300"
+                disabled={disabled ?? false}
                 style={{
                   padding: config.space.S100,
                   border: `2px solid ${opened ? 'var(--sable-primary-main)' : 'var(--sable-border-focus)'}`,
@@ -99,6 +106,7 @@ export function NameColorEditor({ current, onSave }: NameColorEditorProps) {
               variant="Background"
               size="300"
               radii="300"
+              disabled={disabled ?? false}
               style={{
                 textTransform: 'uppercase',
                 fontFamily: 'monospace',
@@ -110,6 +118,7 @@ export function NameColorEditor({ current, onSave }: NameColorEditorProps) {
                 variant="Secondary"
                 size="300"
                 radii="300"
+                disabled={disabled ?? false}
                 onClick={handleReset}
                 title="Reset to default"
               >
diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index 85bf0bc37..42204d177 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -538,6 +538,8 @@ function ProfileExtended({ profile, userId }: ProfileProps) {
         gap="400"
       >
         <NameColorEditor
+          title="Global Name Color"
+          description="Custom name color everywhere names have color!"
           current={profile.nameColor || profile.extended?.['moe.sable.app.name_color']}
           onSave={(color) => handleSaveField('moe.sable.app.name_color', color)}
         />
@@ -549,6 +551,7 @@ function ProfileExtended({ profile, userId }: ProfileProps) {
         gap="400"
       >
         <PronounEditor
+          title="Pronouns"
           current={pronouns}
           onSave={(p) => handleSaveField('io.fsky.nyx.pronouns', p)}
         />
diff --git a/src/app/features/settings/account/PronounEditor.tsx b/src/app/features/settings/account/PronounEditor.tsx
index 29ee9467e..53aa64d27 100644
--- a/src/app/features/settings/account/PronounEditor.tsx
+++ b/src/app/features/settings/account/PronounEditor.tsx
@@ -3,18 +3,20 @@ import { Input } from 'folds';
 import { SettingTile } from '$components/setting-tile';
 import { parsePronounsInput } from '$utils/pronouns';
 
-type PronounSet = {
+export type PronounSet = {
   summary: string;
   language?: string;
   grammatical_gender?: string;
 };
 
 type PronounEditorProps = {
+  title: string;
   current: PronounSet[];
   onSave: (p: PronounSet[]) => void;
+  disabled?: boolean;
 };
 
-export function PronounEditor({ current, onSave }: PronounEditorProps) {
+export function PronounEditor({ title, current, onSave, disabled }: PronounEditorProps) {
   const initialString = current
     .map((p) => `${p.language ? `${p.language}:` : ''}${p.summary}`)
     .join(', ');
@@ -35,7 +37,7 @@ export function PronounEditor({ current, onSave }: PronounEditorProps) {
 
   return (
     <SettingTile
-      title="Pronouns"
+      title={title}
       // let people specify multiple sets of pronouns for different languages
       // the input is a comma separated list of pronoun sets, each set can have an optional language tag (e.g. "en:they/them, de:sie/ihr")
       description="Separate sets with commas (e.g. 'en:they/them, en:it/its, de:sie/ihr')."
@@ -44,6 +46,7 @@ export function PronounEditor({ current, onSave }: PronounEditorProps) {
           value={val}
           size="300"
           radii="300"
+          disabled={disabled ?? false}
           variant="Secondary"
           placeholder="Add pronouns..."
           onChange={handleChange}
diff --git a/src/app/features/space-settings/SpaceSettings.tsx b/src/app/features/space-settings/SpaceSettings.tsx
index 79ab84429..ddd1d5c74 100644
--- a/src/app/features/space-settings/SpaceSettings.tsx
+++ b/src/app/features/space-settings/SpaceSettings.tsx
@@ -23,6 +23,7 @@ type SpaceSettingsMenuItem = {
   page: SpaceSettingsPage;
   name: string;
   icon: IconSrc;
+  activeIcon?: IconSrc;
 };
 
 const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
@@ -47,6 +48,7 @@ const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
         page: SpaceSettingsPage.CosmeticsPage,
         name: 'Cosmetics',
         icon: Icons.Alphabet,
+        activeIcon: Icons.AlphabetUnderline,
       },
       {
         page: SpaceSettingsPage.EmojisStickersPage,
@@ -132,26 +134,34 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
             <Box grow="Yes" direction="Column">
               <PageNavContent>
                 <div style={{ flexGrow: 1 }}>
-                  {menuItems.map((item) => (
-                    <MenuItem
-                      key={item.name}
-                      variant="Background"
-                      radii="400"
-                      aria-pressed={activePage === item.page}
-                      before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
-                      onClick={() => setActivePage(item.page)}
-                    >
-                      <Text
-                        style={{
-                          fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
-                        }}
-                        size="T300"
-                        truncate
+                  {menuItems.map((item) => {
+                    const currentIcon =
+                      activePage === item.page && item.activeIcon ? item.activeIcon : item.icon;
+
+                    return (
+                      <MenuItem
+                        key={item.name}
+                        variant="Background"
+                        radii="400"
+                        aria-pressed={activePage === item.page}
+                        before={
+                          <Icon src={currentIcon} size="100" filled={activePage === item.page} />
+                        }
+                        onClick={() => setActivePage(item.page)}
                       >
-                        {item.name}
-                      </Text>
-                    </MenuItem>
-                  ))}
+                        <Text
+                          style={{
+                            fontWeight:
+                              activePage === item.page ? config.fontWeight.W600 : undefined,
+                          }}
+                          size="T300"
+                          truncate
+                        >
+                          {item.name}
+                        </Text>
+                      </MenuItem>
+                    );
+                  })}
                 </div>
               </PageNavContent>
             </Box>