diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
index a4e5379581..8696612683 100644
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
@@ -60,21 +60,27 @@ const { tablet, desktop } = utils.device;
 const { Consumer } = utils.context;
 
 const StyledContainer = styled.div`
-  @media ${desktop} {
-    ${(props) =>
-      props.isHeaderVisible &&
-      css`
-        width: calc(100% + 76px);
-      `}
-  }
-
   .header-container {
     position: relative;
-    display: flex;
+    display: grid;
+    grid-template-columns: ${(props) =>
+      props.isRootFolder
+        ? "auto auto 1fr"
+        : props.canCreate
+        ? "auto auto auto auto 1fr"
+        : "auto auto auto 1fr"};
+
     align-items: center;
     max-width: calc(100vw - 32px);
 
     @media ${tablet} {
+      grid-template-columns: ${(props) =>
+        props.isRootFolder
+          ? "1fr auto"
+          : props.canCreate
+          ? "auto 1fr auto auto"
+          : "auto 1fr auto"};
+
       .headline-header {
         margin-left: -1px;
       }
@@ -519,8 +525,9 @@ class SectionHeaderContent extends React.Component {
       <Consumer>
         {(context) => (
           <StyledContainer
-            isHeaderVisible={isHeaderVisible}
             width={context.sectionWidth}
+            isRootFolder={isRootFolder}
+            canCreate={canCreate}
           >
             {isHeaderVisible ? (
               <div className="group-button-menu-container">
diff --git a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js
index 77cd0cdacf..0a07fb4a82 100644
--- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js
+++ b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js
@@ -10,7 +10,8 @@ const { tablet, desktop } = utils.device;
 const { getSettings } = store.auth.selectors;
 
 const StyledContainer = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   align-items: center;
 
   .arrow-button {
@@ -24,14 +25,6 @@ const StyledContainer = styled.div`
     }
   }
 
-  @media ${desktop} {
-    ${(props) =>
-      props.isHeaderVisible &&
-      css`
-        width: calc(100% + 76px);
-      `}
-  }
-
   .group-button-menu-container {
     margin: 0 -16px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -85,7 +78,7 @@ const SectionHeaderContent = (props) => {
   };
 
   return (
-    <StyledContainer isHeaderVisible={true}>
+    <StyledContainer>
       <IconButton
         iconName="ArrowPathIcon"
         size="17"
diff --git a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js
index 7476b119af..9983ab1dfa 100644
--- a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js
+++ b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js
@@ -10,7 +10,8 @@ import { setFilter } from "../../../../../store/people/actions";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   align-items: center;
 
   .arrow-button {
diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
index f436f5a07b..317e57c814 100644
--- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
+++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
@@ -75,11 +75,15 @@ const StyledContainer = styled.div`
 
   .header-container {
     position: relative;
-
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto 1fr;
     align-items: center;
     max-width: calc(100vw - 32px);
 
+    @media ${tablet} {
+      grid-template-columns: 1fr auto;
+    }
+
     .action-button {
       margin-left: 16px;
 
diff --git a/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js
index 48915727dc..a94e07a14d 100644
--- a/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js
+++ b/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js
@@ -46,9 +46,16 @@ const { EmployeeStatus } = constants;
 const StyledContainer = styled.div`
   position: relative;
 
-  display: flex;
+  display: grid;
+  grid-template-columns: ${(props) =>
+    props.showContextButton ? "auto auto auto 1fr" : "auto 1fr"};
   align-items: center;
 
+  @media (max-width: 1024px) {
+    grid-template-columns: ${(props) =>
+      props.showContextButton ? "auto 1fr auto" : "auto 1fr"};
+  }
+
   .action-button {
     margin-left: 16px;
 
@@ -410,9 +417,12 @@ class SectionHeaderContent extends React.PureComponent {
     } = this.props;
     const { avatar, visibleAvatarEditor, dialogsVisible } = this.state;
     const contextOptions = () => this.getUserContextOptions(profile, viewer);
+    const IsMe = isMe(viewer, profile.userName);
 
     return (
-      <StyledContainer>
+      <StyledContainer
+        showContextButton={(isAdmin && !profile.isOwner) || IsMe}
+      >
         <IconButton
           iconName="ArrowPathIcon"
           color="#A3A9AE"
@@ -426,7 +436,7 @@ class SectionHeaderContent extends React.PureComponent {
           {profile.displayName}
           {profile.isLDAP && ` (${t("LDAPLbl")})`}
         </Headline>
-        {((isAdmin && !profile.isOwner) || isMe(viewer, profile.userName)) && (
+        {((isAdmin && !profile.isOwner) || IsMe) && (
           <ContextMenuButton
             className="action-button"
             directionX="right"
diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js
index 3c792e4d30..d0c2ec8411 100644
--- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js
+++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js
@@ -12,7 +12,8 @@ import {
 } from "../../../../../store/people/actions";
 import { resetProfile } from "../../../../../store/profile/actions";
 const Wrapper = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   align-items: center;
 
   .arrow-button {
diff --git a/products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js
index 19a66cce5d..ecbddb0fdc 100644
--- a/products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js
+++ b/products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js
@@ -7,7 +7,8 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
   align-items: center;
 
   .arrow-button {
@@ -20,7 +21,6 @@ const Wrapper = styled.div`
 
 const textStyle = {
   marginLeft: "16px",
-  marginRight: "16px",
 };
 
 const SectionHeaderContent = (props) => {
diff --git a/web/ASC.Web.Common/package.json b/web/ASC.Web.Common/package.json
index 24978e7103..2155ee732f 100644
--- a/web/ASC.Web.Common/package.json
+++ b/web/ASC.Web.Common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "asc-web-common",
-  "version": "1.0.288",
+  "version": "1.0.289",
   "description": "Ascensio System SIA common components and solutions library",
   "license": "AGPL-3.0",
   "files": [
diff --git a/web/ASC.Web.Common/src/components/PageLayout/index.js b/web/ASC.Web.Common/src/components/PageLayout/index.js
index a7bffbe1cd..5cf321b117 100644
--- a/web/ASC.Web.Common/src/components/PageLayout/index.js
+++ b/web/ASC.Web.Common/src/components/PageLayout/index.js
@@ -108,10 +108,8 @@ class PageLayoutComponent extends React.Component {
       this.orientationChangeHandler
     );
 
-    if(this.intervalHandler)
-        clearInterval(this.intervalHandler);
-      if(this.timeoutHandler)
-        clearTimeout(this.timeoutHandler);
+    if (this.intervalHandler) clearInterval(this.intervalHandler);
+    if (this.timeoutHandler) clearTimeout(this.timeoutHandler);
   }
 
   orientationChangeHandler = () => {
@@ -135,13 +133,11 @@ class PageLayoutComponent extends React.Component {
     let lastInnerHeight, noChangeCount;
 
     const updateHeight = () => {
-      if(this.intervalHandler)
-        clearInterval(this.intervalHandler);
-      if(this.timeoutHandler)
-        clearTimeout(this.timeoutHandler);
+      if (this.intervalHandler) clearInterval(this.intervalHandler);
+      if (this.timeoutHandler) clearTimeout(this.timeoutHandler);
 
-        this.intervalHandler = null;
-        this.timeoutHandler = null;
+      this.intervalHandler = null;
+      this.timeoutHandler = null;
 
       const vh = (window.innerHeight - 57) * 0.01;
       document.documentElement.style.setProperty("--vh", `${vh}px`);
@@ -341,9 +337,7 @@ class PageLayoutComponent extends React.Component {
               >
                 <Section widthProp={width}>
                   {isSectionHeaderAvailable && (
-                    <SubSectionHeader
-                      isArticlePinned={this.state.isArticlePinned}
-                    >
+                    <SubSectionHeader>
                       {sectionHeaderContent
                         ? sectionHeaderContent.props.children
                         : null}
diff --git a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js
index ce84f60787..e06fdb4b02 100644
--- a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js
+++ b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js
@@ -24,26 +24,10 @@ const StyledSectionHeader = styled.div`
   }
 
   .section-header {
-    width: calc(100% - 76px);
-
     @media ${tablet} {
       width: 100%;
       padding-top: 4px;
     }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      max-width: calc(100vw - 435px);
-
-      @media ${tablet} {
-        max-width: ${(props) =>
-          props.isArticlePinned ? `calc(100vw - 320px)` : `calc(100vw - 96px)`};
-      }
-    }
   }
 `;
 
@@ -55,11 +39,10 @@ class SectionHeader extends React.Component {
   render() {
     //console.log("PageLayout SectionHeader render");
     // eslint-disable-next-line react/prop-types
-    const { isArticlePinned, borderBottom, ...rest } = this.props;
+    const { borderBottom, ...rest } = this.props;
 
     return (
       <StyledSectionHeader
-        isArticlePinned={isArticlePinned}
         borderBottom={borderBottom}
       >
         <div className="section-header" {...rest} />