diff --git a/packages/asc-web-components/avatar/avatar.stories.js b/packages/asc-web-components/avatar/avatar.stories.js
index 39ee1197d3b..c565f59acb0 100644
--- a/packages/asc-web-components/avatar/avatar.stories.js
+++ b/packages/asc-web-components/avatar/avatar.stories.js
@@ -27,5 +27,4 @@ Default.args = {
   source: "",
   userName: "",
   editing: false,
-  editLabel: "Edit photo",
 };
diff --git a/packages/asc-web-components/avatar/index.js b/packages/asc-web-components/avatar/index.js
index d89e4132cde..efd5051b785 100644
--- a/packages/asc-web-components/avatar/index.js
+++ b/packages/asc-web-components/avatar/index.js
@@ -4,7 +4,6 @@ import styled from "styled-components";
 
 import { GuestIcon, AdministratorIcon, OwnerIcon } from "./svg";
 import {
-  EditLink,
   EmptyIcon,
   EditContainer,
   AvatarWrapper,
@@ -13,7 +12,7 @@ import {
   StyledImage,
   StyledAvatar,
 } from "./styled-avatar";
-import Link from "../link";
+import IconButton from "../icon-button";
 import commonIconsStyles from "../utils/common-icons-style";
 
 const whiteColor = "#FFFFFF";
@@ -57,15 +56,7 @@ Initials.propTypes = {
 // eslint-disable-next-line react/display-name
 const Avatar = (props) => {
   //console.log("Avatar render");
-  const {
-    size,
-    source,
-    userName,
-    role,
-    editing,
-    editLabel,
-    editAction,
-  } = props;
+  const { size, source, userName, role, editing, editAction } = props;
 
   const avatarContent = source ? (
     <StyledImage src={source} />
@@ -83,21 +74,13 @@ const Avatar = (props) => {
         {avatarContent}
       </AvatarWrapper>
       {editing && size === "max" && (
-        <EditContainer gradient={!!source}>
-          <EditLink>
-            <Link
-              type="action"
-              title={editLabel}
-              isTextOverflow={true}
-              isHovered={true}
-              fontSize="14px"
-              fontWeight={600}
-              color={whiteColor}
-              onClick={editAction}
-            >
-              {editLabel}
-            </Link>
-          </EditLink>
+        <EditContainer>
+          <IconButton
+            color={whiteColor}
+            iconName="/static/images/pencil.react.svg"
+            onClick={editAction}
+            size={16}
+          />
         </EditContainer>
       )}
       <RoleWrapper size={size}>{roleIcon}</RoleWrapper>
@@ -112,8 +95,6 @@ Avatar.propTypes = {
   role: PropTypes.oneOf(["owner", "admin", "guest", "user"]),
   /** The address of the image for an image avatar */
   source: PropTypes.string,
-  /** Displays avatar edit layer */
-  editLabel: PropTypes.string,
   userName: PropTypes.string,
   editing: PropTypes.bool,
   /** Function called when the avatar change button is pressed */
@@ -130,7 +111,6 @@ Avatar.defaultProps = {
   size: "medium",
   role: "",
   source: "",
-  editLabel: "Edit photo",
   userName: "",
   editing: false,
 };
diff --git a/packages/asc-web-components/avatar/styled-avatar.js b/packages/asc-web-components/avatar/styled-avatar.js
index e6edc02676b..30115ac9d78 100644
--- a/packages/asc-web-components/avatar/styled-avatar.js
+++ b/packages/asc-web-components/avatar/styled-avatar.js
@@ -5,23 +5,6 @@ import NoUserSelect from "../utils/commonStyles";
 import { CameraIcon } from "./svg";
 import commonIconsStyles from "../utils/common-icons-style";
 
-
-const EditLink = styled.div`
-  padding-left: ${(props) => props.theme.avatar.editLink.paddingLeft};
-  padding-right: ${(props) => props.theme.avatar.editLink.paddingRight};
-
-  a:hover {
-    border-bottom: ${(props) => props.theme.avatar.editLink.borderBottom};
-  }
-
-  span {
-    display: ${(props) => props.theme.avatar.editLink.display};
-    max-width: ${(props) => props.theme.avatar.editLink.maxWidth};
-    text-decoration: ${(props) => props.theme.avatar.editLink.textDecoration};
-  }
-`;
-EditLink.defaultProps = { theme: Base };
-
 const EmptyIcon = styled(CameraIcon)`
   ${commonIconsStyles}
   border-radius: ${(props) => props.theme.avatar.image.borderRadius};
@@ -29,21 +12,17 @@ const EmptyIcon = styled(CameraIcon)`
 EmptyIcon.defaultProps = { theme: Base };
 
 const EditContainer = styled.div`
-  box-sizing: ${(props) => props.theme.avatar.editContainer.boxSizing};
   position: absolute;
-  width: ${(props) => props.theme.avatar.editContainer.width};
-  height: ${(props) => props.theme.avatar.editContainer.height};
-  top: ${(props) => props.theme.avatar.editContainer.top};
-  left: ${(props) => props.theme.avatar.editContainer.left};
-  transform: ${(props) => props.theme.avatar.editContainer.transform};
-  padding: ${(props) => props.theme.avatar.editContainer.padding};
-  text-align: ${(props) => props.theme.avatar.editContainer.textAlign};
-  line-height: ${(props) => props.theme.avatar.editContainer.lineHeight};
+  display: flex;
+  right: ${(props) => props.theme.avatar.editContainer.right};
+  bottom: ${(props) => props.theme.avatar.editContainer.bottom};
+  background-color: ${(props) =>
+    props.theme.avatar.editContainer.backgroundColor};
   border-radius: ${(props) => props.theme.avatar.editContainer.borderRadius};
-  background: ${(props) =>
-    props.gradient
-      ? props.theme.avatar.editContainer.linearGradient
-      : props.theme.avatar.editContainer.transparent};
+  height: ${(props) => props.theme.avatar.editContainer.height};
+  width: ${(props) => props.theme.avatar.editContainer.width};
+  align-items: center;
+  justify-content: center;
 `;
 EditContainer.defaultProps = { theme: Base };
 
@@ -129,7 +108,6 @@ const StyledAvatar = styled.div`
 StyledAvatar.defaultProps = { theme: Base };
 
 export {
-  EditLink,
   EmptyIcon,
   EditContainer,
   AvatarWrapper,
diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js
index d3ccfbe5deb..d4ccd35faf2 100644
--- a/packages/asc-web-components/themes/base.js
+++ b/packages/asc-web-components/themes/base.js
@@ -917,28 +917,12 @@ const Base = {
     },
 
     editContainer: {
-      boxSizing: "border-box",
-      width: "100%",
-      height: "100%",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      padding: "75% 16px 5px",
-      textAlign: "center",
-      lineHeight: "19px",
+      right: "0px",
+      bottom: "0px",
+      backgroundColor: "#265a8f",
       borderRadius: "50%",
-      linearGradient:
-        "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)",
-      transparent: "transparent",
-    },
-
-    editLink: {
-      paddingLeft: "10px",
-      paddingRight: "10px",
-      borderBottom: "none",
-      display: "inline-block",
-      maxWidth: "100%",
-      textDecoration: "underline dashed",
+      height: "32px",
+      width: "32px",
     },
 
     image: {
diff --git a/packages/asc-web-components/themes/dark.js b/packages/asc-web-components/themes/dark.js
index 394091912ae..ee89540de5a 100644
--- a/packages/asc-web-components/themes/dark.js
+++ b/packages/asc-web-components/themes/dark.js
@@ -880,29 +880,14 @@ const Dark = {
       },
     },
     editContainer: {
-      boxSizing: "border-box",
-      width: "100%",
-      height: "100%",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      padding: "75% 16px 5px",
-      textAlign: "center",
-      lineHeight: "19px",
+      right: "0px",
+      bottom: "0px",
+      backgroundColor: "#265a8f",
       borderRadius: "50%",
-      linearGradient:
-        "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)",
-      transparent: "transparent",
+      height: "32px",
+      width: "32px",
     },
 
-    editLink: {
-      paddingLeft: "10px",
-      paddingRight: "10px",
-      borderBottom: "none",
-      display: "inline-block",
-      maxWidth: "100%",
-      textDecoration: "underline dashed",
-    },
     image: {
       width: "100%",
       height: "100%",
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js
index 213ede6319b..0dcab07946f 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js
@@ -21,8 +21,6 @@ class ContactField extends React.Component {
   }
 
   render() {
-    console.log("ContactField render");
-
     const {
       isDisabled,
 
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js
index 5c6dfabcb5b..7934d07d8e3 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js
@@ -66,8 +66,6 @@ class ContactsField extends React.Component {
   }
 
   render() {
-    console.log("ContactsField render");
-
     const {
       pattern,
       contacts,
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js
index 7a9e78772e4..c47a3ff3237 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js
@@ -9,8 +9,6 @@ class DateField extends React.Component {
   }
 
   render() {
-    console.log("DateField render");
-
     const {
       isRequired,
       hasError,
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js
index 4187c70b0ae..0f747d04f43 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js
@@ -16,8 +16,6 @@ class DepartmentField extends React.Component {
   };
 
   render() {
-    console.log("DepartmentField render");
-
     const {
       isRequired,
       isDisabled,
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js
index 9254125500b..39d1894c500 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js
@@ -9,8 +9,6 @@ class EmailField extends React.Component {
   }
 
   render() {
-    console.log("EmailField render");
-
     const {
       isRequired,
       hasError,
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js
index e8b3a494ab7..af01550b52a 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js
@@ -11,8 +11,6 @@ class PasswordField extends React.Component {
   }
 
   render() {
-    console.log("PasswordField render");
-
     const {
       isRequired,
       hasError,
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js
index 1e3b7bc29ec..47dc5b9e4f2 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js
@@ -9,8 +9,6 @@ class RadioField extends React.Component {
   }
 
   render() {
-    //console.log("RadioField render");
-
     const {
       isRequired,
       hasError,
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
index e80c98d36a2..39eaca95da1 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
@@ -18,8 +18,6 @@ class TextChangeField extends React.Component {
   }
 
   render() {
-    console.log("TextChangeField render");
-
     const {
       isRequired,
       hasError,
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js
index 2050a968a42..9f690ac8a4d 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js
@@ -9,8 +9,6 @@ class TextField extends React.Component {
   }
 
   render() {
-    console.log("TextField render");
-
     const {
       isRequired,
       hasError,
diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
index 9556d50f784..c90638b5db1 100644
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
@@ -499,7 +499,6 @@ class UpdateUserForm extends React.Component {
     this.setState({ isLoading: true });
     const { profile, setAvatarMax, personal } = this.props;
 
-    console.log("profile", profile);
     if (isUpdate) {
       createThumbnailsAvatar(profile.id, {
         x: Math.round(result.x * avatar.defaultWidth - result.width / 2),
@@ -727,7 +726,6 @@ class UpdateUserForm extends React.Component {
               source={this.props.avatarMax || profile.avatarMax}
               userName={profile.displayName}
               editing={true}
-              editLabel={t("Common:EditAvatar")}
               editAction={
                 isMobile ? this.openAvatarEditorPage : this.openAvatarEditor
               }
diff --git a/public/images/pencil.react.svg b/public/images/pencil.react.svg
new file mode 100644
index 00000000000..335ff09ebed
--- /dev/null
+++ b/public/images/pencil.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.35866 11.0127L0.366956 14.6494C0.204108 15.2466 0.752062 15.7945 1.34924 15.6317L4.98595 14.64C5.32177 14.5484 5.62787 14.3708 5.87399 14.1247L12.7918 7.20689L8.79177 3.20689L1.87399 10.1247C1.62787 10.3708 1.45024 10.6769 1.35866 11.0127ZM10.2059 1.79264L14.2059 5.79264L14.9985 4.99999C16.103 3.89541 16.103 2.1046 14.9985 1.00006C13.8939 -0.104537 12.103 -0.104507 10.9984 1.00012L10.2059 1.79264Z" fill="white"/>
+</svg>