diff --git a/.changeset/khaki-shrimps-play.md b/.changeset/khaki-shrimps-play.md
new file mode 100644
index 00000000000..599feaea49d
--- /dev/null
+++ b/.changeset/khaki-shrimps-play.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+App and User avatars in order details now all have the same color.
diff --git a/src/components/UserAvatar/UserAvatar.tsx b/src/components/UserAvatar/UserAvatar.tsx
index 39b78eed1e9..2c4c9eae18d 100644
--- a/src/components/UserAvatar/UserAvatar.tsx
+++ b/src/components/UserAvatar/UserAvatar.tsx
@@ -1,7 +1,7 @@
-import { Avatar } from "@saleor/macaw-ui-next";
+import { Avatar, UserAvatarProps as UserAvatarPropsBase } from "@saleor/macaw-ui-next";
 import React from "react";
 
-interface UserAvatarProps {
+interface UserAvatarProps extends UserAvatarPropsBase {
   url?: string;
   initials?: string;
   className?: string;
diff --git a/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventCreatedBy.tsx b/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventCreatedBy.tsx
index 40e2c69dc3f..6008ea7ea99 100644
--- a/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventCreatedBy.tsx
+++ b/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventCreatedBy.tsx
@@ -1,9 +1,10 @@
 // @ts-strict-ignore
 import { AppUrls } from "@dashboard/apps/urls";
+import { UserAvatar } from "@dashboard/components/UserAvatar";
 import { AppAvatarFragment, StaffMemberAvatarFragment } from "@dashboard/graphql";
 import { getUserInitials, getUserName } from "@dashboard/misc";
 import { staffMemberDetailsUrl } from "@dashboard/staff/urls";
-import { Avatar, makeStyles } from "@saleor/macaw-ui";
+import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 import { Link } from "react-router-dom";
 
@@ -11,22 +12,7 @@ interface EventCreatedByProps {
   createdBy: StaffMemberAvatarFragment | AppAvatarFragment | null;
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    userWrapper: {
-      display: "inline-flex",
-      height: "100%",
-      gap: theme.spacing(1),
-      alignItems: "center",
-      justifyContent: "flex-end",
-    },
-  }),
-  { name: "EventCreatedBy" },
-);
-
 export const EventCreatedBy: React.FC<EventCreatedByProps> = ({ createdBy }) => {
-  const classes = useStyles();
-
   if (!createdBy) {
     return null;
   }
@@ -36,9 +22,18 @@ export const EventCreatedBy: React.FC<EventCreatedByProps> = ({ createdBy }) =>
   }
 
   return (
-    <Link to={staffMemberDetailsUrl(createdBy.id)} className={classes.userWrapper}>
-      <Avatar initials={getUserInitials(createdBy)} avatar={createdBy?.avatar?.url} />
+    <Box
+      as={Link}
+      // @ts-expect-error - Box inherits props from "Link" but it's not typed
+      to={staffMemberDetailsUrl(createdBy.id)}
+      display="inline-flex"
+      height="100%"
+      gap={2}
+      alignItems="center"
+      justifyContent="flex-end"
+    >
+      <UserAvatar initials={getUserInitials(createdBy)} src={createdBy?.avatar?.url} />
       {getUserName(createdBy, true)}
-    </Link>
+    </Box>
   );
 };