diff --git a/.changeset/ninety-dogs-mate.md b/.changeset/ninety-dogs-mate.md
new file mode 100644
index 0000000000..ade06ab8b6
--- /dev/null
+++ b/.changeset/ninety-dogs-mate.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Now you can see initials in your account details when there is no avatar image set for your account. 
diff --git a/src/staff/components/StaffProperties/StaffProperties.tsx b/src/staff/components/StaffProperties/StaffProperties.tsx
index bdfe610182..5bf9ccf0b3 100644
--- a/src/staff/components/StaffProperties/StaffProperties.tsx
+++ b/src/staff/components/StaffProperties/StaffProperties.tsx
@@ -7,92 +7,11 @@ import { getUserInitials } from "@dashboard/misc";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getStaffErrorMessage from "@dashboard/utils/errors/staff";
 import { TextField } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import { Text, vars } from "@saleor/macaw-ui-next";
+import { Box, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage, useIntl } from "react-intl";
 
-const useStyles = makeStyles(
-  theme => ({
-    avatar: {
-      "& svg": {
-        fill: "#fff",
-      },
-      "&:hover $avatarHover": {
-        opacity: 1,
-      },
-      alignItems: "center",
-      borderRadius: "100%",
-      display: "grid",
-      height: 120,
-      justifyContent: "center",
-      overflow: "hidden",
-      position: "relative",
-      width: 120,
-    },
-    avatarActionText: {
-      "&:hover": {
-        textDecoration: "underline",
-      },
-      color: "#fff",
-      cursor: "pointer",
-      fontSize: 12,
-    },
-    avatarDefault: {
-      "& div": {
-        color: vars.colors.text.buttonDefaultPrimary,
-        fontSize: 35,
-        fontWeight: 580,
-        lineHeight: "120px",
-      },
-      background: vars.colors.background.accent1,
-      height: 120,
-      textAlign: "center",
-      width: 120,
-    },
-    avatarHover: {
-      background: "#00000080",
-      borderRadius: "100%",
-      fontSize: 12,
-      fontWeight: 500,
-      height: 120,
-      opacity: 0,
-      padding: theme.spacing(2.5, 0),
-      position: "absolute",
-      textAlign: "center",
-      textTransform: "uppercase",
-      transition: "opacity 0.5s",
-      width: 120,
-    },
-    avatarImage: {
-      pointerEvents: "none",
-      width: "100%",
-    },
-    fileField: {
-      display: "none",
-    },
-    prop: {
-      marginBottom: theme.spacing(2),
-    },
-    propGrid: {
-      display: "grid",
-      gridColumnGap: theme.spacing(2),
-      gridRowGap: theme.spacing(1),
-      gridTemplateColumns: "1fr 1fr",
-      [theme.breakpoints.down("xs")]: {
-        gridTemplateColumns: "1fr",
-      },
-    },
-    root: {
-      display: "grid",
-      gridColumnGap: theme.spacing(4),
-      gridTemplateColumns: "120px 1fr",
-    },
-  }),
-  { name: "StaffProperties" },
-);
-
 interface StaffPropertiesProps {
   canEditAvatar: boolean;
   className?: string;
@@ -120,7 +39,6 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
     onImageDelete,
     onImageUpload,
   } = props;
-  const classes = useStyles(props);
   const intl = useIntl();
   const imgInputAnchor = React.createRef<HTMLInputElement>();
   const clickImgInput = () => imgInputAnchor.current.click();
@@ -147,20 +65,67 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
         </DashboardCard.Title>
       </DashboardCard.Header>
       <DashboardCard.Content>
-        <div className={classes.root}>
+        <Box display="grid" gap={6} __gridTemplateColumns="120px 1fr">
           <div>
-            <div className={classes.avatar}>
+            <Box
+              alignItems="center"
+              borderRadius="100%"
+              display="grid"
+              justifyContent="center"
+              overflow="hidden"
+              position="relative"
+              __height="120px"
+              __width="120px"
+            >
               {hasAvatar ? (
-                <img className={classes.avatarImage} src={staffMember.avatar.url} />
+                <Box as="img" pointerEvents="none" width="100%" src={staffMember.avatar.url} />
               ) : (
-                <div className={classes.avatarDefault}>
-                  <Text>{getUserInitials(data)}</Text>
-                </div>
+                <Box
+                  backgroundColor="accent1"
+                  __height="120px"
+                  __width="120px"
+                  display="flex"
+                  justifyContent="center"
+                >
+                  <Text
+                    color="buttonDefaultPrimary"
+                    fontWeight="bold"
+                    textAlign="center"
+                    __fontSize={35}
+                    __lineHeight="120px"
+                  >
+                    {getUserInitials(data)}
+                  </Text>
+                </Box>
               )}
               {canEditAvatar && (
-                <div className={classes.avatarHover}>
+                <Box
+                  borderRadius="100%"
+                  opacity={{
+                    hover: "1",
+                    default: "0",
+                  }}
+                  position="absolute"
+                  padding={4}
+                  __height="120px"
+                  __backgroundColor="#00000080"
+                  __width="120px"
+                  __transition="opacity 0.5s"
+                  display="flex"
+                  flexDirection="column"
+                  alignItems="center"
+                  justifyContent="center"
+                >
                   <SVG src={photoIcon} />
-                  <Text onClick={clickImgInput} className={classes.avatarActionText}>
+                  <Text
+                    onClick={clickImgInput}
+                    textDecoration={{
+                      hover: "underline",
+                    }}
+                    color="buttonDefaultPrimary"
+                    cursor="pointer"
+                    fontSize={4}
+                  >
                     <FormattedMessage
                       id="+2VzH4"
                       defaultMessage="Change"
@@ -169,7 +134,15 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                   </Text>
                   {hasAvatar && (
                     <>
-                      <Text onClick={onImageDelete} className={classes.avatarActionText}>
+                      <Text
+                        onClick={onImageDelete}
+                        textDecoration={{
+                          hover: "underline",
+                        }}
+                        color="buttonDefaultPrimary"
+                        cursor="pointer"
+                        fontSize={4}
+                      >
                         <FormattedMessage
                           id="11lR5V"
                           defaultMessage="Delete"
@@ -179,19 +152,26 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                     </>
                   )}
                   <input
-                    className={classes.fileField}
+                    style={{ display: "none" }}
                     id="fileUpload"
                     onChange={event => onImageUpload(event.target.files[0])}
                     type="file"
                     ref={imgInputAnchor}
                   />
-                </div>
+                </Box>
               )}
-            </div>
+            </Box>
           </div>
           <div>
-            <div className={classes.propGrid}>
-              <div className={classes.prop}>
+            <Box
+              display="grid"
+              gap={4}
+              gridTemplateColumns={{
+                mobile: 1,
+                tablet: 2,
+              }}
+            >
+              <Box>
                 <TextField
                   {...getFieldProps("firstName")}
                   onChange={onChange}
@@ -201,8 +181,8 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                     "data-test-id": "staffFirstName",
                   }}
                 />
-              </div>
-              <div className={classes.prop}>
+              </Box>
+              <Box>
                 <TextField
                   {...getFieldProps("lastName")}
                   onChange={onChange}
@@ -212,8 +192,8 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                     "data-test-id": "staffLastName",
                   }}
                 />
-              </div>
-              <div className={classes.prop}>
+              </Box>
+              <Box>
                 <TextField
                   {...getFieldProps("email")}
                   onChange={onChange}
@@ -223,10 +203,10 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                     "data-test-id": "staffEmail",
                   }}
                 />
-              </div>
-            </div>
+              </Box>
+            </Box>
           </div>
-        </div>
+        </Box>
       </DashboardCard.Content>
       {!!formErrors.id && (
         <DashboardCard.Content>