From 34151e03c32e908c48aacff18f3f0836f08122b6 Mon Sep 17 00:00:00 2001
From: Amar Trebinjac <amartrebinjac@gmail.com>
Date: Mon, 2 Feb 2026 21:47:08 +0100
Subject: [PATCH 1/2] decos innit

---
 .../ProfileMenu/ProfileMenuHeader.tsx         |   6 +-
 .../components/cards/entity/EntityCard.tsx    |  39 +++-
 .../cards/entity/UserEntityCard.tsx           |  13 +-
 .../shared/src/components/modals/common.tsx   |   8 +
 .../src/components/modals/common/types.ts     |   1 +
 .../decorations/DecorationSelectionModal.tsx  | 208 ++++++++++++++++++
 .../shared/src/components/post/NewComment.tsx |  10 +-
 .../src/components/profile/ProfileHeader.tsx  |  47 +++-
 .../components/profile/ProfileImageLink.tsx   |  20 +-
 .../profile/ProfilePictureWithDecoration.tsx  |  51 +++++
 .../profile/ProfilePictureWithIndicator.tsx   |  11 +-
 .../src/components/profile/UserShortInfo.tsx  |  10 +-
 packages/shared/src/graphql/comments.ts       |   2 +
 packages/shared/src/graphql/decorations.ts    |  56 +++++
 packages/shared/src/graphql/fragments.ts      |   8 +
 packages/shared/src/graphql/users.ts          |   5 +
 packages/shared/src/lib/user.ts               |   4 +
 17 files changed, 458 insertions(+), 41 deletions(-)
 create mode 100644 packages/shared/src/components/modals/decorations/DecorationSelectionModal.tsx
 create mode 100644 packages/shared/src/components/profile/ProfilePictureWithDecoration.tsx
 create mode 100644 packages/shared/src/graphql/decorations.ts

diff --git a/packages/shared/src/components/ProfileMenu/ProfileMenuHeader.tsx b/packages/shared/src/components/ProfileMenu/ProfileMenuHeader.tsx
index dc615137a9..29084a01dc 100644
--- a/packages/shared/src/components/ProfileMenu/ProfileMenuHeader.tsx
+++ b/packages/shared/src/components/ProfileMenu/ProfileMenuHeader.tsx
@@ -7,7 +7,7 @@ import {
   TypographyColor,
   TypographyType,
 } from '../typography/Typography';
-import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
+import { ProfileImageSize } from '../ProfilePicture';
 import { useAuthContext } from '../../contexts/AuthContext';
 import { usePlusSubscription } from '../../hooks';
 import { PlusUser } from '../PlusUser';
@@ -17,6 +17,7 @@ import type { WithClassNameProps } from '../utilities';
 import { webappUrl } from '../../lib/constants';
 import ConditionalWrapper from '../ConditionalWrapper';
 import { IconSize } from '../Icon';
+import { ProfilePictureWithDecoration } from '../profile/ProfilePictureWithDecoration';
 
 type Props = WithClassNameProps & {
   shouldOpenProfile?: boolean;
@@ -43,11 +44,12 @@ export const ProfileMenuHeader = ({
       <div
         className={classNames('relative flex items-center gap-2', className)}
       >
-        <ProfilePicture
+        <ProfilePictureWithDecoration
           user={user}
           nativeLazyLoading
           eager
           size={profileImageSize}
+          decoration={user.activeDecoration}
           className="!rounded-10 border-background-default"
         />
 
diff --git a/packages/shared/src/components/cards/entity/EntityCard.tsx b/packages/shared/src/components/cards/entity/EntityCard.tsx
index 7c1ec810f6..db65f8dcba 100644
--- a/packages/shared/src/components/cards/entity/EntityCard.tsx
+++ b/packages/shared/src/components/cards/entity/EntityCard.tsx
@@ -5,7 +5,8 @@ import Link from '../../utilities/Link';
 import { Image } from '../../image/Image';
 
 export type EntityCardProps = {
-  image: string;
+  image?: string;
+  imageNode?: ReactNode;
   type?: 'user' | 'source' | 'squad';
   children?: ReactNode;
   entityName?: string;
@@ -22,10 +23,29 @@ const EntityCard = ({
   className,
   actionButtons,
   image,
+  imageNode,
   type,
   entityName,
   permalink,
 }: EntityCardProps) => {
+  const renderImage = () => {
+    if (imageNode) {
+      return imageNode;
+    }
+
+    return (
+      <Image
+        className="h-full w-full object-cover"
+        src={image}
+        alt={
+          type === 'user'
+            ? `${entityName}'s user avatar`
+            : `${entityName}'s image`
+        }
+      />
+    );
+  };
+
   return (
     <div
       className={classNames(
@@ -35,16 +55,13 @@ const EntityCard = ({
     >
       <div className="flex w-full items-start gap-2">
         <Link href={permalink}>
-          <a className={classNames(className?.image, 'overflow-hidden')}>
-            <Image
-              className="h-full w-full object-cover"
-              src={image}
-              alt={
-                type === 'user'
-                  ? `${entityName}'s user avatar`
-                  : `${entityName}'s image`
-              }
-            />
+          <a
+            className={classNames(
+              className?.image,
+              !imageNode && 'overflow-hidden',
+            )}
+          >
+            {renderImage()}
           </a>
         </Link>
         <div className="ml-auto flex items-center gap-2">{actionButtons}</div>
diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx
index 31ce88ed4b..f77a95f3b8 100644
--- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx
+++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx
@@ -32,6 +32,7 @@ import EntityDescription from './EntityDescription';
 import useUserMenuProps from '../../../hooks/useUserMenuProps';
 import useShowFollowAction from '../../../hooks/useShowFollowAction';
 import type { MenuItemProps } from '../../dropdown/common';
+import { ProfilePictureWithDecoration } from '../../profile/ProfilePictureWithDecoration';
 
 type Props = {
   user?: UserShortProfile;
@@ -72,8 +73,7 @@ const UserEntityCard = ({ user, className }: Props) => {
     },
     [user, openModal],
   );
-  const { username, bio, name, image, isPlus, createdAt, id, permalink } =
-    user || {};
+  const { username, bio, name, isPlus, createdAt, id, permalink } = user || {};
   const options: MenuItemProps[] = [
     {
       icon: <BlockIcon />,
@@ -120,13 +120,20 @@ const UserEntityCard = ({ user, className }: Props) => {
   return (
     <EntityCard
       permalink={permalink}
-      image={image}
       type="user"
       className={{
         image: 'size-16 rounded-20',
         container: className?.container,
       }}
       entityName={username}
+      imageNode={
+        <ProfilePictureWithDecoration
+          user={user}
+          size={ProfileImageSize.XXXLarge}
+          decoration={user?.activeDecoration}
+          nativeLazyLoading
+        />
+      }
       actionButtons={
         showActionBtns && (
           <>
diff --git a/packages/shared/src/components/modals/common.tsx b/packages/shared/src/components/modals/common.tsx
index 7620df5e20..c06681077c 100644
--- a/packages/shared/src/components/modals/common.tsx
+++ b/packages/shared/src/components/modals/common.tsx
@@ -413,6 +413,13 @@ const CandidateSignInModal = dynamic(
     ),
 );
 
+const DecorationSelectionModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "decorationSelectionModal" */ './decorations/DecorationSelectionModal'
+    ),
+);
+
 export const modals = {
   [LazyModal.SquadMember]: SquadMemberModal,
   [LazyModal.UpvotedPopup]: UpvotedPopupModal,
@@ -480,6 +487,7 @@ export const modals = {
   [LazyModal.SlackChannelConfirmation]: SlackChannelConfirmationModal,
   [LazyModal.RecruiterSeats]: RecruiterSeatsModal,
   [LazyModal.CandidateSignIn]: CandidateSignInModal,
+  [LazyModal.DecorationSelection]: DecorationSelectionModal,
 };
 
 type GetComponentProps<T> = T extends
diff --git a/packages/shared/src/components/modals/common/types.ts b/packages/shared/src/components/modals/common/types.ts
index 155ee78030..2278c2899d 100644
--- a/packages/shared/src/components/modals/common/types.ts
+++ b/packages/shared/src/components/modals/common/types.ts
@@ -91,6 +91,7 @@ export enum LazyModal {
   SlackChannelConfirmation = 'slackChannelConfirmation',
   RecruiterSeats = 'recruiterSeats',
   CandidateSignIn = 'candidateSignIn',
+  DecorationSelection = 'decorationSelection',
 }
 
 export type ModalTabItem = {
diff --git a/packages/shared/src/components/modals/decorations/DecorationSelectionModal.tsx b/packages/shared/src/components/modals/decorations/DecorationSelectionModal.tsx
new file mode 100644
index 0000000000..6b5b50eaa2
--- /dev/null
+++ b/packages/shared/src/components/modals/decorations/DecorationSelectionModal.tsx
@@ -0,0 +1,208 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import classNames from 'classnames';
+import type { ModalProps } from '../common/Modal';
+import { Modal } from '../common/Modal';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../typography/Typography';
+import { Button, ButtonVariant } from '../../buttons/Button';
+import { ProfilePictureWithDecoration } from '../../profile/ProfilePictureWithDecoration';
+import { ProfileImageSize } from '../../ProfilePicture';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import {
+  DECORATIONS_BY_GROUP_QUERY,
+  SET_ACTIVE_DECORATION_MUTATION,
+} from '../../../graphql/decorations';
+import type { Decoration, DecorationGroup } from '../../../graphql/decorations';
+import { gqlClient } from '../../../graphql/common';
+import { LockIcon, VIcon } from '../../icons';
+import { useToastNotification } from '../../../hooks/useToastNotification';
+import { Loader } from '../../Loader';
+
+interface DecorationItemProps {
+  decoration: Decoration;
+  isSelected: boolean;
+  onSelect: (decoration: Decoration) => void;
+}
+
+const DecorationItem = ({
+  decoration,
+  isSelected,
+  onSelect,
+}: DecorationItemProps): ReactElement => {
+  const isLocked = !decoration.isUnlocked;
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        'relative flex flex-col items-center gap-2 rounded-12 border p-3 transition-colors',
+        isSelected
+          ? 'border-accent-cabbage-default bg-surface-float'
+          : 'border-border-subtlest-tertiary hover:border-border-subtlest-secondary',
+        isLocked && 'opacity-60',
+      )}
+      onClick={() => onSelect(decoration)}
+    >
+      <div className="relative">
+        <img
+          src={decoration.media}
+          alt={decoration.name}
+          className="size-16 object-contain"
+        />
+        {isLocked && (
+          <div className="absolute inset-0 flex items-center justify-center rounded-full bg-overlay-tertiary-pepper">
+            <LockIcon className="text-text-secondary" />
+          </div>
+        )}
+        {isSelected && (
+          <div className="absolute -right-1 -top-1 flex size-5 items-center justify-center rounded-full bg-accent-cabbage-default">
+            <VIcon className="size-3 text-white" />
+          </div>
+        )}
+      </div>
+      <Typography
+        type={TypographyType.Footnote}
+        color={isLocked ? TypographyColor.Quaternary : TypographyColor.Primary}
+        className="text-center"
+      >
+        {decoration.name}
+      </Typography>
+      {isLocked && decoration.unlockCriteria && (
+        <Typography
+          type={TypographyType.Caption2}
+          color={TypographyColor.Tertiary}
+          className="text-center"
+        >
+          {decoration.unlockCriteria}
+        </Typography>
+      )}
+    </button>
+  );
+};
+
+export default function DecorationSelectionModal({
+  onRequestClose,
+  ...props
+}: ModalProps): ReactElement {
+  const { user, updateUser } = useAuthContext();
+  const { displayToast } = useToastNotification();
+  const [selectedDecoration, setSelectedDecoration] =
+    useState<Decoration | null>(
+      user?.activeDecoration ? (user.activeDecoration as Decoration) : null,
+    );
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['decorationsByGroup'],
+    queryFn: async () => {
+      const result = await gqlClient.request<{
+        decorationsByGroup: DecorationGroup[];
+      }>(DECORATIONS_BY_GROUP_QUERY);
+      return result.decorationsByGroup;
+    },
+  });
+
+  const { mutate: setActiveDecoration, isPending } = useMutation({
+    mutationFn: async (decorationId: string | null) => {
+      const result = await gqlClient.request<{
+        setActiveDecoration: {
+          id: string;
+          activeDecoration: Decoration | null;
+        };
+      }>(SET_ACTIVE_DECORATION_MUTATION, { decorationId });
+      return result.setActiveDecoration;
+    },
+    onSuccess: (response) => {
+      updateUser({
+        ...user,
+        activeDecoration: response.activeDecoration,
+      });
+      displayToast('Avatar decoration updated');
+      onRequestClose?.(null);
+    },
+    onError: () => {
+      displayToast('Failed to update decoration');
+    },
+  });
+
+  const handleApply = () => {
+    setActiveDecoration(selectedDecoration?.id ?? null);
+  };
+
+  const handleClearDecoration = () => {
+    setSelectedDecoration(null);
+  };
+
+  const hasChanged =
+    (selectedDecoration?.id ?? null) !== (user?.activeDecoration?.id ?? null);
+  const isSelectedLocked = selectedDecoration && !selectedDecoration.isUnlocked;
+
+  return (
+    <Modal
+      kind={Modal.Kind.FlexibleCenter}
+      size={Modal.Size.Medium}
+      onRequestClose={onRequestClose}
+      {...props}
+    >
+      <Modal.Header title="Avatar Decoration" />
+      <Modal.Body className="flex flex-col gap-6">
+        <div className="flex flex-col items-center gap-4 overflow-visible p-4">
+          <ProfilePictureWithDecoration
+            user={user}
+            size={ProfileImageSize.XXXXLarge}
+            decoration={selectedDecoration}
+          />
+          {selectedDecoration && (
+            <Button
+              variant={ButtonVariant.Tertiary}
+              onClick={handleClearDecoration}
+            >
+              Remove decoration
+            </Button>
+          )}
+        </div>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Loader />
+          </div>
+        ) : (
+          data?.map((group) => (
+            <div key={group.group} className="flex flex-col gap-3">
+              <Typography type={TypographyType.Body} bold>
+                {group.label}
+              </Typography>
+              <div className="grid grid-cols-3 gap-3 tablet:grid-cols-4">
+                {group.decorations.map((decoration) => (
+                  <DecorationItem
+                    key={decoration.id}
+                    decoration={decoration}
+                    isSelected={selectedDecoration?.id === decoration.id}
+                    onSelect={setSelectedDecoration}
+                  />
+                ))}
+              </div>
+            </div>
+          ))
+        )}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant={ButtonVariant.Tertiary} onClick={onRequestClose}>
+          Cancel
+        </Button>
+        <Button
+          variant={ButtonVariant.Primary}
+          onClick={handleApply}
+          disabled={!hasChanged || isPending || isSelectedLocked}
+          loading={isPending}
+        >
+          Apply
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
diff --git a/packages/shared/src/components/post/NewComment.tsx b/packages/shared/src/components/post/NewComment.tsx
index 5d662f3440..fde2f061aa 100644
--- a/packages/shared/src/components/post/NewComment.tsx
+++ b/packages/shared/src/components/post/NewComment.tsx
@@ -8,11 +8,8 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-import {
-  getProfilePictureClasses,
-  ProfileImageSize,
-  ProfilePicture,
-} from '../ProfilePicture';
+import { getProfilePictureClasses, ProfileImageSize } from '../ProfilePicture';
+import { ProfilePictureWithDecoration } from '../profile/ProfilePictureWithDecoration';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { Image } from '../image/Image';
 import { fallbackImages } from '../../lib/config';
@@ -138,9 +135,10 @@ function NewCommentComponent(
       onClick={() => onCommentClick(Origin.StartDiscussion)}
     >
       {user ? (
-        <ProfilePicture
+        <ProfilePictureWithDecoration
           user={user}
           size={size}
+          decoration={user.activeDecoration}
           nativeLazyLoading
           className={pictureClasses}
         />
diff --git a/packages/shared/src/components/profile/ProfileHeader.tsx b/packages/shared/src/components/profile/ProfileHeader.tsx
index 8ac8673610..d528ebdbe6 100644
--- a/packages/shared/src/components/profile/ProfileHeader.tsx
+++ b/packages/shared/src/components/profile/ProfileHeader.tsx
@@ -7,13 +7,13 @@ import {
   TypographyColor,
   TypographyType,
 } from '../typography/Typography';
-import { DevPlusIcon, EditIcon } from '../icons';
+import { DevPlusIcon, EditIcon, SparkleIcon } from '../icons';
 import type { PublicProfile } from '../../lib/user';
 import type { UserStatsProps } from './UserStats';
 import { UserStats } from './UserStats';
 import JoinedDate from './JoinedDate';
 import { Separator } from '../cards/common/common';
-import { Button, ButtonVariant } from '../buttons/Button';
+import { Button, ButtonVariant, ButtonSize } from '../buttons/Button';
 import { webappUrl } from '../../lib/constants';
 import Link from '../utilities/Link';
 import { useAuthContext } from '../../contexts/AuthContext';
@@ -22,6 +22,8 @@ import { VerifiedCompanyUserBadge } from '../VerifiedCompanyUserBadge';
 import { locationToString } from '../../lib/utils';
 import { IconSize } from '../Icon';
 import { fallbackImages } from '../../lib/config';
+import { useLazyModal } from '../../hooks/useLazyModal';
+import { LazyModal } from '../modals/common/types';
 
 import { ElementPlaceholder } from '../ElementPlaceholder';
 
@@ -57,20 +59,47 @@ const ProfileHeader = ({
   isSameUser: propIsSameUser,
   isPreviewMode,
 }: ProfileHeaderProps) => {
-  const { name, username, bio, image, cover, isPlus } = user;
+  const { name, username, bio, image, cover, isPlus, activeDecoration } = user;
   const { user: loggedUser } = useAuthContext();
+  const { openModal } = useLazyModal();
   const isSameUser = propIsSameUser ?? loggedUser?.id === user.id;
+
+  const handleOpenDecorationModal = () => {
+    openModal({ type: LazyModal.DecorationSelection });
+  };
+
   return (
     <div className="relative w-full overflow-hidden laptop:rounded-t-16">
       <div className="h-36">
         <Image src={cover} alt="Cover" className="h-full w-full object-cover" />
       </div>
-      <Image
-        src={image}
-        fallbackSrc={fallbackImages.avatar}
-        alt="Avatar"
-        className="absolute left-6 top-16 h-[7.5rem] w-[7.5rem] rounded-16 object-cover"
-      />
+      <div className="absolute left-6 top-16 flex flex-col items-center gap-2">
+        <span className="relative inline-flex items-center justify-center">
+          {activeDecoration && (
+            <img
+              src={activeDecoration.media}
+              alt=""
+              className="pointer-events-none absolute z-modal"
+              aria-hidden="true"
+            />
+          )}
+          <Image
+            src={image}
+            fallbackSrc={fallbackImages.avatar}
+            alt="Avatar"
+            className="h-[7.5rem] w-[7.5rem] rounded-16 object-cover"
+          />
+        </span>
+        {isSameUser && !isPreviewMode && (
+          <Button
+            variant={ButtonVariant.Float}
+            size={ButtonSize.XSmall}
+            icon={<SparkleIcon />}
+            onClick={handleOpenDecorationModal}
+            aria-label="Edit avatar decoration"
+          />
+        )}
+      </div>
       <div className="flex flex-col gap-3 px-6">
         <Link passHref href={`${webappUrl}settings/profile`}>
           <Button
diff --git a/packages/shared/src/components/profile/ProfileImageLink.tsx b/packages/shared/src/components/profile/ProfileImageLink.tsx
index 6189680422..2fe9b9b1ae 100644
--- a/packages/shared/src/components/profile/ProfileImageLink.tsx
+++ b/packages/shared/src/components/profile/ProfileImageLink.tsx
@@ -2,14 +2,18 @@ import type { ReactElement, Ref } from 'react';
 import React, { forwardRef } from 'react';
 import type { ProfileLinkProps } from './ProfileLink';
 import { ProfileLink } from './ProfileLink';
-import type { ProfilePictureProps } from '../ProfilePicture';
-import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
+import { ProfileImageSize } from '../ProfilePicture';
 import type { Author } from '../../graphql/comments';
+import type { ProfilePictureWithDecorationProps } from './ProfilePictureWithDecoration';
+import { ProfilePictureWithDecoration } from './ProfilePictureWithDecoration';
+import type { Decoration } from '../../graphql/decorations';
 
 interface ProfileImageLinkProps extends ProfileLinkProps {
-  picture?: Omit<ProfilePictureProps, 'user'>;
+  picture?: Omit<ProfilePictureWithDecorationProps, 'user' | 'decoration'>;
   ref?: Ref<HTMLAnchorElement>;
-  user: Pick<Author, 'id' | 'username' | 'permalink' | 'image'>;
+  user: Pick<Author, 'id' | 'username' | 'permalink' | 'image'> & {
+    activeDecoration?: Pick<Decoration, 'id' | 'media'> | null;
+  };
 }
 
 function ProfileImageLinkComponent(
@@ -22,7 +26,13 @@ function ProfileImageLinkComponent(
 ): ReactElement {
   return (
     <ProfileLink {...props} href={user.permalink} ref={ref}>
-      <ProfilePicture {...picture} ref={null} user={user} nativeLazyLoading />
+      <ProfilePictureWithDecoration
+        {...picture}
+        ref={null}
+        user={user}
+        decoration={user.activeDecoration}
+        nativeLazyLoading
+      />
     </ProfileLink>
   );
 }
diff --git a/packages/shared/src/components/profile/ProfilePictureWithDecoration.tsx b/packages/shared/src/components/profile/ProfilePictureWithDecoration.tsx
new file mode 100644
index 0000000000..e6c19dfdf3
--- /dev/null
+++ b/packages/shared/src/components/profile/ProfilePictureWithDecoration.tsx
@@ -0,0 +1,51 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { ProfilePictureProps } from '../ProfilePicture';
+import { ProfilePicture, ProfileImageSize } from '../ProfilePicture';
+import type { Decoration } from '../../graphql/decorations';
+
+export interface ProfilePictureWithDecorationProps extends ProfilePictureProps {
+  decoration?: Pick<Decoration, 'id' | 'media'> | null;
+}
+
+// Sizes that support decorations (Medium/32px and above)
+const sizesWithDecorations: ProfileImageSize[] = [
+  ProfileImageSize.Medium,
+  ProfileImageSize.Large,
+  ProfileImageSize.XLarge,
+  ProfileImageSize.XXLarge,
+  ProfileImageSize.XXXLarge,
+  ProfileImageSize.XXXXLarge,
+];
+
+export const ProfilePictureWithDecoration = ({
+  decoration,
+  size = ProfileImageSize.XLarge,
+  className,
+  ...props
+}: ProfilePictureWithDecorationProps): ReactElement => {
+  const shouldShowDecoration =
+    decoration && sizesWithDecorations.includes(size);
+
+  if (!shouldShowDecoration) {
+    return <ProfilePicture size={size} className={className} {...props} />;
+  }
+
+  return (
+    <span
+      className={classNames(
+        'relative inline-flex items-center justify-center overflow-visible',
+        className,
+      )}
+    >
+      <img
+        src={decoration.media}
+        alt=""
+        className="pointer-events-none absolute z-modal overflow-visible"
+        aria-hidden="true"
+      />
+      <ProfilePicture size={size} {...props} />
+    </span>
+  );
+};
diff --git a/packages/shared/src/components/profile/ProfilePictureWithIndicator.tsx b/packages/shared/src/components/profile/ProfilePictureWithIndicator.tsx
index 0d7afe0635..3aef562ffc 100644
--- a/packages/shared/src/components/profile/ProfilePictureWithIndicator.tsx
+++ b/packages/shared/src/components/profile/ProfilePictureWithIndicator.tsx
@@ -1,11 +1,15 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
+import { ProfileImageSize } from '../ProfilePicture';
 import type { UserImageProps } from '../ProfilePicture';
 import { useProfileCompletionIndicator } from '../../hooks/profile/useProfileCompletionIndicator';
+import { ProfilePictureWithDecoration } from './ProfilePictureWithDecoration';
+import type { Decoration } from '../../graphql/decorations';
 
 interface ProfilePictureWithIndicatorProps {
-  user: UserImageProps;
+  user: UserImageProps & {
+    activeDecoration?: Pick<Decoration, 'id' | 'media'> | null;
+  };
   size?: ProfileImageSize;
   className?: string;
   wrapperClassName?: string;
@@ -21,9 +25,10 @@ export function ProfilePictureWithIndicator({
 
   return (
     <span className={wrapperClassName}>
-      <ProfilePicture
+      <ProfilePictureWithDecoration
         user={user}
         size={size}
+        decoration={user.activeDecoration}
         nativeLazyLoading
         className={className}
       />
diff --git a/packages/shared/src/components/profile/UserShortInfo.tsx b/packages/shared/src/components/profile/UserShortInfo.tsx
index 4690098f0f..54d7acc649 100644
--- a/packages/shared/src/components/profile/UserShortInfo.tsx
+++ b/packages/shared/src/components/profile/UserShortInfo.tsx
@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import type { ReactElement, ReactNode, Ref } from 'react';
 import React, { forwardRef } from 'react';
-import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
+import { ProfileImageSize } from '../ProfilePicture';
+import { ProfilePictureWithDecoration } from './ProfilePictureWithDecoration';
 import type { TooltipProps } from '../tooltips/BaseTooltip';
 import { getRoleName, TruncateText } from '../utilities';
 import { ProfileTooltip } from './ProfileTooltip';
@@ -111,7 +112,12 @@ const UserShortInfoComponent = <Tag extends React.ElementType>(
         tooltip={tooltipProps}
         scrollingContainer={scrollingContainer}
       >
-        <ProfilePicture user={user} size={imageSize} nativeLazyLoading />
+        <ProfilePictureWithDecoration
+          user={user}
+          size={imageSize}
+          decoration={user.activeDecoration}
+          nativeLazyLoading
+        />
       </ProfileTooltip>
       <ProfileTooltip
         userId={user?.id}
diff --git a/packages/shared/src/graphql/comments.ts b/packages/shared/src/graphql/comments.ts
index bbb5834a2c..dbeba0dbed 100644
--- a/packages/shared/src/graphql/comments.ts
+++ b/packages/shared/src/graphql/comments.ts
@@ -8,6 +8,7 @@ import type { Company } from '../lib/userCompany';
 import type { ContentPreference } from './contentPreference';
 import type { TopReader } from '../components/badges/TopReaderBadge';
 import type { FeaturedAward, Product } from './njord';
+import type { Decoration } from './decorations';
 
 export interface Author {
   __typename?: string;
@@ -24,6 +25,7 @@ export interface Author {
   topReader?: Partial<TopReader>;
   isPlus?: boolean;
   plusMemberSince?: Date;
+  activeDecoration?: Pick<Decoration, 'id' | 'media'> | null;
 }
 
 export type Scout = Author;
diff --git a/packages/shared/src/graphql/decorations.ts b/packages/shared/src/graphql/decorations.ts
new file mode 100644
index 0000000000..0220c561b1
--- /dev/null
+++ b/packages/shared/src/graphql/decorations.ts
@@ -0,0 +1,56 @@
+import { gql } from 'graphql-request';
+
+export interface Decoration {
+  id: string;
+  name: string;
+  media: string;
+  decorationGroup: string;
+  unlockCriteria: string | null;
+  isUnlocked: boolean;
+}
+
+export interface DecorationGroup {
+  group: string;
+  label: string;
+  decorations: Decoration[];
+}
+
+export const DECORATION_FRAGMENT = gql`
+  fragment DecorationFragment on Decoration {
+    id
+    name
+    media
+    decorationGroup
+    unlockCriteria
+  }
+`;
+
+export const DECORATIONS_BY_GROUP_QUERY = gql`
+  query DecorationsByGroup {
+    decorationsByGroup {
+      group
+      label
+      decorations {
+        id
+        name
+        media
+        decorationGroup
+        unlockCriteria
+        isUnlocked
+      }
+    }
+  }
+`;
+
+export const SET_ACTIVE_DECORATION_MUTATION = gql`
+  mutation SetActiveDecoration($decorationId: ID) {
+    setActiveDecoration(decorationId: $decorationId) {
+      id
+      activeDecoration {
+        id
+        name
+        media
+      }
+    }
+  }
+`;
diff --git a/packages/shared/src/graphql/fragments.ts b/packages/shared/src/graphql/fragments.ts
index 9cdc0bab8a..1eec30cc78 100644
--- a/packages/shared/src/graphql/fragments.ts
+++ b/packages/shared/src/graphql/fragments.ts
@@ -54,6 +54,10 @@ export const USER_SHORT_INFO_FRAGMENT = gql`
     isPlus
     plusMemberSince
     coresRole
+    activeDecoration {
+      id
+      media
+    }
   }
 `;
 
@@ -251,6 +255,10 @@ export const FEED_POST_INFO_FRAGMENT = gql`
         status
       }
       coresRole
+      activeDecoration {
+        id
+        media
+      }
     }
     type
     tags
diff --git a/packages/shared/src/graphql/users.ts b/packages/shared/src/graphql/users.ts
index a846ebabd2..d09e30fe4d 100644
--- a/packages/shared/src/graphql/users.ts
+++ b/packages/shared/src/graphql/users.ts
@@ -67,6 +67,11 @@ export const USER_BY_ID_STATIC_FIELDS_QUERY = `
         status
       }
       coresRole
+      activeDecoration {
+        id
+        name
+        media
+      }
     }
   }
 `;
diff --git a/packages/shared/src/lib/user.ts b/packages/shared/src/lib/user.ts
index 5753170404..7c9b10b67e 100644
--- a/packages/shared/src/lib/user.ts
+++ b/packages/shared/src/lib/user.ts
@@ -12,6 +12,7 @@ import type { FeaturedAward, UserTransactionPublic } from '../graphql/njord';
 import type { Post } from '../graphql/posts';
 import type { TLocation } from '../graphql/autocomplete';
 import { generateQueryKey, RequestKey, StaleTime } from './query';
+import type { Decoration } from '../graphql/decorations';
 
 export enum Roles {
   Moderator = 'moderator',
@@ -57,6 +58,7 @@ export interface PublicProfile {
   plusMemberSince?: Date;
   experienceLevel?: keyof typeof UserExperienceLevel;
   location?: TLocation;
+  activeDecoration?: Pick<Decoration, 'id' | 'name' | 'media'> | null;
 }
 
 export enum UserExperienceLevel {
@@ -126,6 +128,7 @@ export interface UserShortProfile
     | 'companies'
     | 'isPlus'
     | 'plusMemberSince'
+    | 'activeDecoration'
   > {
   username: string;
   permalink: string;
@@ -194,6 +197,7 @@ export interface LoggedUser extends UserProfile, AnonymousUser {
   clickbaitTries?: number;
   hasLocationSet?: boolean;
   profileCompletion?: ProfileCompletion;
+  activeDecoration?: Pick<Decoration, 'id' | 'name' | 'media'> | null;
 }
 
 export async function logout(reason: string): Promise<void> {

From 6e7c89d5b8460eb48e931d98da3fd30ebcdcb4e3 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Tue, 3 Feb 2026 09:49:05 +0000
Subject: [PATCH 2/2] fix: add missing closing parenthesis in
 DecorationSelectionModal import

Co-authored-by: Amar Trebinjac <AmarTrebinjac@users.noreply.github.com>
---
 packages/shared/src/components/modals/common.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/shared/src/components/modals/common.tsx b/packages/shared/src/components/modals/common.tsx
index 89ee19ae31..be4ecc0ec2 100644
--- a/packages/shared/src/components/modals/common.tsx
+++ b/packages/shared/src/components/modals/common.tsx
@@ -418,6 +418,8 @@ const DecorationSelectionModal = dynamic(
     import(
       /* webpackChunkName: "decorationSelectionModal" */ './decorations/DecorationSelectionModal'
     ),
+);
+
 const FeedbackModal = dynamic(
   () => import(/* webpackChunkName: "feedbackModal" */ './FeedbackModal'),
 );