diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 82a9d919..19a6a21e 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -48,6 +48,7 @@ export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
 type ReplyProps = {
   mx: MatrixClient;
   room: Room;
+  mxidColor?: boolean;
   timelineSet?: EventTimelineSet | undefined;
   replyEventId: string;
   threadRootId?: string | undefined;
@@ -55,7 +56,7 @@ type ReplyProps = {
 };
 
 export const Reply = as<'div', ReplyProps>((_, ref) => {
-  const { mx, room, timelineSet, replyEventId, threadRootId, onClick, ...props } = _;
+  const { mx, room, mxidColor, timelineSet, replyEventId, threadRootId, onClick, ...props } = _;
   const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
     timelineSet?.findEventById(replyEventId)
   );
@@ -101,7 +102,7 @@ export const Reply = as<'div', ReplyProps>((_, ref) => {
       )}
       <ReplyLayout
         as="button"
-        userColor={sender ? colorMXID(sender) : undefined}
+        userColor={sender && mxidColor ? colorMXID(sender) : undefined}
         username={
           sender && (
             <Text size="T300" truncate>
diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
index 5793ed91..51673722 100644
--- a/src/app/features/message-search/MessageSearch.tsx
+++ b/src/app/features/message-search/MessageSearch.tsx
@@ -55,6 +55,7 @@ export function MessageSearch({
   const allRooms = useRooms(mx, allRoomsAtom, mDirects);
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [mxidColor] = useSetting(settingsAtom, 'mxidColor');
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -296,6 +297,7 @@ export function MessageSearch({
                     items={group.items}
                     mediaAutoLoad={mediaAutoLoad}
                     urlPreview={urlPreview}
+                    mxidColor={mxidColor}
                     onOpen={navigateRoom}
                   />
                 </VirtualTile>
diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx
index 29fce7bf..e70e7022 100644
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -46,6 +46,7 @@ type SearchResultGroupProps = {
   items: ResultItem[];
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
+  mxidColor?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
 };
 export function SearchResultGroup({
@@ -54,6 +55,7 @@ export function SearchResultGroup({
   items,
   mediaAutoLoad,
   urlPreview,
+  mxidColor,
   onOpen,
 }: SearchResultGroupProps) {
   const mx = useMatrixClient();
@@ -81,7 +83,15 @@ export function SearchResultGroup({
         handleSpoilerClick: spoilerClickHandler,
         handleMentionClick: mentionClickHandler,
       }),
-    [mx, room, linkifyOpts, highlightRegex, mentionClickHandler, spoilerClickHandler, useAuthentication]
+    [
+      mx,
+      room,
+      linkifyOpts,
+      highlightRegex,
+      mentionClickHandler,
+      spoilerClickHandler,
+      useAuthentication,
+    ]
   );
 
   const renderMatrixEvent = useMatrixEventRenderer<[IEventWithRoomId, string, GetContentCallback]>(
@@ -212,7 +222,14 @@ export function SearchResultGroup({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
+                            ? mxcUrlToHttp(
+                                mx,
+                                senderAvatarMxc,
+                                useAuthentication,
+                                48,
+                                48,
+                                'crop'
+                              ) ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -224,7 +241,7 @@ export function SearchResultGroup({
               >
                 <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
                   <Box gap="200" alignItems="Baseline">
-                    <Username style={{ color: colorMXID(event.sender) }}>
+                    <Username style={{ color: mxidColor ? colorMXID(event.sender) : undefined }}>
                       <Text as="span" truncate>
                         <b>{displayName}</b>
                       </Text>
@@ -246,6 +263,7 @@ export function SearchResultGroup({
                   <Reply
                     mx={mx}
                     room={room}
+                    mxidColor={mxidColor}
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 8fcfbc97..37458fe9 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -56,7 +56,13 @@ import {
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
-import { TUploadContent, encryptFile, getImageInfo, getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import {
+  TUploadContent,
+  encryptFile,
+  getImageInfo,
+  getMxIdLocalPart,
+  mxcUrlToHttp,
+} from '../../utils/matrix';
 import { useTypingStatusUpdater } from '../../hooks/useTypingStatusUpdater';
 import { useFilePicker } from '../../hooks/useFilePicker';
 import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
@@ -120,6 +126,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
   ({ editor, fileDropContainerRef, roomId, room }, ref) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
+    const [mxidColor] = useSetting(settingsAtom, 'mxidColor');
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const commands = useCommands(mx, room);
@@ -499,7 +506,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   <Box direction="Column">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
-                      userColor={colorMXID(replyDraft.userId)}
+                      userColor={mxidColor ? colorMXID(replyDraft.userId) : undefined}
                       username={
                         <Text size="T300" truncate>
                           <b>
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index a2738fcb..d18510c1 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -424,6 +424,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const encryptedRoom = mx.isRoomEncrypted(room.roomId);
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+  const [mxidColor] = useSetting(settingsAtom, 'mxidColor');
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
@@ -978,6 +979,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             mEvent={mEvent}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
+            mxidColor={mxidColor}
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
@@ -995,6 +997,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 <Reply
                   mx={mx}
                   room={room}
+                  mxidColor={mxidColor}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
@@ -1050,6 +1053,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             mEvent={mEvent}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
+            mxidColor={mxidColor}
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
@@ -1067,6 +1071,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 <Reply
                   mx={mx}
                   room={room}
+                  mxidColor={mxidColor}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
@@ -1159,6 +1164,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             mEvent={mEvent}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
+            mxidColor={mxidColor}
             collapse={collapse}
             highlight={highlighted}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index e9a2d797..f34cecd8 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -51,7 +51,12 @@ import {
   getMemberAvatarMxc,
   getMemberDisplayName,
 } from '../../../utils/room';
-import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias, mxcUrlToHttp } from '../../../utils/matrix';
+import {
+  getCanonicalAliasOrRoomId,
+  getMxIdLocalPart,
+  isRoomAlias,
+  mxcUrlToHttp,
+} from '../../../utils/matrix';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
@@ -235,9 +240,9 @@ export const MessageSourceCodeItem = as<
   const getContent = (evt: MatrixEvent) =>
     evt.isEncrypted()
       ? {
-        [`<== DECRYPTED_EVENT ==>`]: evt.getEffectiveEvent(),
-        [`<== ORIGINAL_EVENT ==>`]: evt.event,
-      }
+          [`<== DECRYPTED_EVENT ==>`]: evt.getEffectiveEvent(),
+          [`<== ORIGINAL_EVENT ==>`]: evt.event,
+        }
       : evt.event;
 
   const getText = (): string => {
@@ -615,6 +620,7 @@ export type MessageProps = {
   relations?: Relations;
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
+  mxidColor?: boolean;
   onUserClick: MouseEventHandler<HTMLButtonElement>;
   onUsernameClick: MouseEventHandler<HTMLButtonElement>;
   onReplyClick: MouseEventHandler<HTMLButtonElement>;
@@ -638,6 +644,7 @@ export const Message = as<'div', MessageProps>(
       relations,
       messageLayout,
       messageSpacing,
+      mxidColor,
       onUserClick,
       onUsernameClick,
       onReplyClick,
@@ -673,7 +680,7 @@ export const Message = as<'div', MessageProps>(
       >
         <Username
           as="button"
-          style={{ color: colorMXID(senderId) }}
+          style={mxidColor ? { color: colorMXID(senderId) } : undefined}
           data-user-id={senderId}
           onContextMenu={onUserClick}
           onClick={onUsernameClick}
@@ -952,26 +959,26 @@ export const Message = as<'div', MessageProps>(
                         </Box>
                         {((!mEvent.isRedacted() && canDelete) ||
                           mEvent.getSender() !== mx.getUserId()) && (
-                            <>
-                              <Line size="300" />
-                              <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
-                                {!mEvent.isRedacted() && canDelete && (
-                                  <MessageDeleteItem
-                                    room={room}
-                                    mEvent={mEvent}
-                                    onClose={closeMenu}
-                                  />
-                                )}
-                                {mEvent.getSender() !== mx.getUserId() && (
-                                  <MessageReportItem
-                                    room={room}
-                                    mEvent={mEvent}
-                                    onClose={closeMenu}
-                                  />
-                                )}
-                              </Box>
-                            </>
-                          )}
+                          <>
+                            <Line size="300" />
+                            <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
+                              {!mEvent.isRedacted() && canDelete && (
+                                <MessageDeleteItem
+                                  room={room}
+                                  mEvent={mEvent}
+                                  onClose={closeMenu}
+                                />
+                              )}
+                              {mEvent.getSender() !== mx.getUserId() && (
+                                <MessageReportItem
+                                  room={room}
+                                  mEvent={mEvent}
+                                  onClose={closeMenu}
+                                />
+                              )}
+                            </Box>
+                          </>
+                        )}
                       </Menu>
                     </FocusTrap>
                   }
@@ -1095,26 +1102,26 @@ export const Event = as<'div', EventProps>(
                         </Box>
                         {((!mEvent.isRedacted() && canDelete && !stateEvent) ||
                           (mEvent.getSender() !== mx.getUserId() && !stateEvent)) && (
-                            <>
-                              <Line size="300" />
-                              <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
-                                {!mEvent.isRedacted() && canDelete && (
-                                  <MessageDeleteItem
-                                    room={room}
-                                    mEvent={mEvent}
-                                    onClose={closeMenu}
-                                  />
-                                )}
-                                {mEvent.getSender() !== mx.getUserId() && (
-                                  <MessageReportItem
-                                    room={room}
-                                    mEvent={mEvent}
-                                    onClose={closeMenu}
-                                  />
-                                )}
-                              </Box>
-                            </>
-                          )}
+                          <>
+                            <Line size="300" />
+                            <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
+                              {!mEvent.isRedacted() && canDelete && (
+                                <MessageDeleteItem
+                                  room={room}
+                                  mEvent={mEvent}
+                                  onClose={closeMenu}
+                                />
+                              )}
+                              {mEvent.getSender() !== mx.getUserId() && (
+                                <MessageReportItem
+                                  room={room}
+                                  mEvent={mEvent}
+                                  onClose={closeMenu}
+                                />
+                              )}
+                            </Box>
+                          </>
+                        )}
                       </Menu>
                     </FocusTrap>
                   }
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index 6329a57f..6ed214a3 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -54,6 +54,7 @@ function AppearanceSection() {
   const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+  const [mxidColor, setMXIDColor] = useSetting(settingsAtom, 'mxidColor');
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
   const [pageZoom, setPageZoom] = useSetting(settingsAtom, 'pageZoom');
   const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
@@ -189,6 +190,11 @@ function AppearanceSection() {
             />
           }
         />
+        <SettingTile
+          title="Username Color"
+          options={<Toggle isActive={mxidColor} onToggle={() => setMXIDColor(!mxidColor)} />}
+          content={<Text variant="b3">Color username with matrix userID.</Text>}
+        />
         <SettingTile
           title="Use ENTER for Newline"
           options={
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index 64eabc99..bb64a851 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -182,6 +182,7 @@ type RoomNotificationsGroupProps = {
   notifications: INotification[];
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
+  mxidColor?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
 };
 function RoomNotificationsGroupComp({
@@ -189,6 +190,7 @@ function RoomNotificationsGroupComp({
   notifications,
   mediaAutoLoad,
   urlPreview,
+  mxidColor,
   onOpen,
 }: RoomNotificationsGroupProps) {
   const mx = useMatrixClient();
@@ -427,7 +429,14 @@ function RoomNotificationsGroupComp({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
+                            ? mxcUrlToHttp(
+                                mx,
+                                senderAvatarMxc,
+                                useAuthentication,
+                                48,
+                                48,
+                                'crop'
+                              ) ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -439,7 +448,7 @@ function RoomNotificationsGroupComp({
               >
                 <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
                   <Box gap="200" alignItems="Baseline">
-                    <Username style={{ color: colorMXID(event.sender) }}>
+                    <Username style={{ color: mxidColor ? colorMXID(event.sender) : undefined }}>
                       <Text as="span" truncate>
                         <b>{displayName}</b>
                       </Text>
@@ -461,6 +470,7 @@ function RoomNotificationsGroupComp({
                   <Reply
                     mx={mx}
                     room={room}
+                    mxidColor={mxidColor}
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
@@ -492,6 +502,7 @@ export function Notifications() {
   const mx = useMatrixClient();
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [mxidColor] = useSetting(settingsAtom, 'mxidColor');
   const screenSize = useScreenSizeContext();
 
   const { navigateRoom } = useRoomNavigate();
@@ -648,6 +659,7 @@ export function Notifications() {
                         <RoomNotificationsGroupComp
                           room={groupRoom}
                           notifications={group.notifications}
+                          mxidColor={mxidColor}
                           mediaAutoLoad={mediaAutoLoad}
                           urlPreview={urlPreview}
                           onOpen={navigateRoom}
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index e4380249..43ec3d72 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -17,6 +17,7 @@ export interface Settings {
   enterForNewline: boolean;
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
+  mxidColor: boolean;
   hideMembershipEvents: boolean;
   hideNickAvatarEvents: boolean;
   mediaAutoLoad: boolean;
@@ -41,6 +42,7 @@ const defaultSettings: Settings = {
   enterForNewline: false,
   messageLayout: 0,
   messageSpacing: '400',
+  mxidColor: true,
   hideMembershipEvents: false,
   hideNickAvatarEvents: true,
   mediaAutoLoad: true,