diff --git a/web/ASC.Web.Common/src/components/NavMenu/index.js b/web/ASC.Web.Common/src/components/NavMenu/index.js
index 81b815971c..8d784f9858 100644
--- a/web/ASC.Web.Common/src/components/NavMenu/index.js
+++ b/web/ASC.Web.Common/src/components/NavMenu/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { Backdrop, Toast, Aside } from "asc-web-components";
+import { Backdrop, Toast, Aside, utils } from "asc-web-components";
 import Header from "./sub-components/header";
 import HeaderNav from "./sub-components/header-nav";
 import HeaderUnAuth from "./sub-components/header-unauth";
@@ -12,12 +12,16 @@ import { connect } from "react-redux";
 import { withRouter } from "react-router";
 
 import { getLanguage } from "../../store/auth/selectors";
+const { tablet } = utils.device;
 
 const StyledHideAndShow = styled.div`
-  position: fixed; 
-  top: 0px; 
-  transition: top 0.3s;
-  z-index:100;
+  @media ${tablet} {
+    top: 0px; 
+    transition: top 0.3s;
+    z-index:100;
+  }
+  
+
 `
 class NavMenu extends React.Component {
   constructor(props) {
diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js
index 7099d9404e..d3d7c556f5 100644
--- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js
+++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js
@@ -24,6 +24,10 @@ const StyledNav = styled.nav`
   height: 56px;
   z-index: 190;
 
+  @media ${tablet} {
+      position:fixed;
+  }
+    
   .profile-menu {
     right: 12px;
     top: 66px;
diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js
index 0c7ada39c4..06375347ea 100644
--- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js
+++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header.js
@@ -17,7 +17,7 @@ import {
   getTotalNotificationsCount,
 } from "../../../store/auth/selectors";
 
-const { desktop } = utils.device;
+const { desktop, tablet } = utils.device;
 
 const backgroundColor = "#0F4071";
 
@@ -28,6 +28,10 @@ const Header = styled.header`
   width: 100vw;
   height: 56px;
 
+  @media ${tablet} {
+      position:fixed;
+      z-index:100;
+    }
   .header-logo-wrapper {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
@@ -40,6 +44,8 @@ const Header = styled.header`
     @media ${desktop} {
       display: none;
     }
+
+  
   }
 
   .header-logo-min_icon {
diff --git a/web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js b/web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js
index 480193930f..3222b60a50 100644
--- a/web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js
+++ b/web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js
@@ -17,6 +17,7 @@ const StyledArticle = styled.article`
 
   @media ${tablet} {
     padding: 0 16px;
+
     ${(props) =>
       props.visible
         ? props.pinned
@@ -24,6 +25,7 @@ const StyledArticle = styled.article`
             display: flex;
             width: 240px;
             min-width: 240px;
+            margin-top: 50px;
           `
           : `
             width: 240px;
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 7831056695..69f67fd8dd 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
@@ -22,7 +22,7 @@ const StyledSectionHeader = styled.div`
     top: 56px; 
     padding-right:100%;
     transition: top 0.3s;
-    z-index:100;
+    z-index:1;
   }
 
   .section-header {