diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
index c918bdf6f7d98567e4d75c7243e31c16f89fd9f2..8f4c076e5f8df9e7473f495ebaad609d53ca6ef8 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
@@ -32,6 +32,8 @@ import PermIdentityOutlinedIcon from "@material-ui/icons/PermIdentityOutlined";
 import Avatar from "@material-ui/core/Avatar";
 import Chip from "@material-ui/core/Chip";
 import DoneIcon from "@material-ui/icons/Done";
+import CancelIcon from "@material-ui/icons/Cancel";
+import CardAvatar from "components/Card/CardAvatar";
 
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
@@ -200,36 +202,20 @@ export default function DisplayUserProfile(props) {
     if (userStatus === false) {
       return (
         <Chip
+          style={{ flex: 1 }}
           label="Active"
-          avatar={
-            <Avatar
-              alt={user.username}
-              src={
-                user.profilePicture
-                  ? "data:image/png;base64, " + user.profilePicture
-                  : noProfilePicture
-              }
-            />
-          }
-          color="primary"
-          deleteIcon={<DoneIcon />}
+          variant="outlined"
+          clickable={false}
         />
       );
     } else {
       return (
         <Chip
+          style={{ flex: 1 }}
           label="Revoked"
-          avatar={
-            <Avatar
-              alt={user.username}
-              src={
-                user.profilePicture
-                  ? "data:image/png;base64, " + user.profilePicture
-                  : noProfilePicture
-              }
-            />
-          }
-          deleteIcon={<DoneIcon />}
+          variant="outlined"
+          clickable={false}
+          disabled
         />
       );
     }
@@ -302,28 +288,29 @@ export default function DisplayUserProfile(props) {
         <GridContainer>
           <Grid item xs={12} sm={12} md={8}>
             <Card profile>
-              <CardHeader color="info" stats icon>
-                <CardIcon color="info">
-                  <PermIdentityOutlinedIcon />
-                </CardIcon>
-                <p className={classes.cardCategory}>{"Profile information"}</p>
-                <h3 className={classes.cardTitle}>{user.username}</h3>
-                {getUserStatus(user)}
-              </CardHeader>
               <CardBody profile>
                 <div className={classes.root}>
                   <Grid container spacing={2}>
-                    <Grid item align="center" xs={12} sm={12} md={12}>
-                      <img
-                        src={
-                          user.profilePicture
-                            ? "data:image/png;base64, " + user.profilePicture
-                            : noProfilePicture
-                        }
-                        className={classes.editProfilePicture}
-                        alt="..."
-                      />
-                      <h4>{user.username ? user.username : "no username"}</h4>
+                    <Grid item xs={12} sm={12} md={6}>
+                      <CardAvatar displayProfile>
+                        <img
+                          src={
+                            user.profilePicture
+                              ? "data:image/png;base64, " + user.profilePicture
+                              : noProfilePicture
+                          }
+                          className={classes.editProfilePicture}
+                          alt="..."
+                        />
+                      </CardAvatar>
+                    </Grid>
+
+                    <Grid item xs={12} sm={12} md={6}>
+                      <h3 className={classes.cardTitle}>
+                        {user.username ? user.username : "no username"}
+                      </h3>
+
+                      {getUserStatus(user)}
                     </Grid>
                     <Grid item xs={12} sm={12} md={6}>
                       <List dense={false}>
@@ -342,12 +329,14 @@ export default function DisplayUserProfile(props) {
                         <ListItem>
                           <ListItemAvatar>
                             <Avatar>
-                              <PersonOutlinedIcon />
+                              <PhoneInTalkOutlinedIcon />
                             </Avatar>
                           </ListItemAvatar>
                           <ListItemText
                             primary={
-                              user.lastName ? user.lastName : "no lastname"
+                              user.phoneNumber
+                                ? user.phoneNumber
+                                : "no phone number"
                             }
                           />
                         </ListItem>
@@ -383,14 +372,12 @@ export default function DisplayUserProfile(props) {
                         <ListItem>
                           <ListItemAvatar>
                             <Avatar>
-                              <PhoneInTalkOutlinedIcon />
+                              <PersonOutlinedIcon />
                             </Avatar>
                           </ListItemAvatar>
                           <ListItemText
                             primary={
-                              user.phoneNumber
-                                ? user.phoneNumber
-                                : "no phone number"
+                              user.lastName ? user.lastName : "no lastname"
                             }
                           />
                         </ListItem>