diff --git a/web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js b/web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js
index 17b0dea110..1adbcdf758 100644
--- a/web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js
+++ b/web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js
@@ -5,14 +5,16 @@ import i18n from "./i18n";
 import AdvancedSelector from "../AdvancedSelector";
 import { getGroupList } from "../../api/groups";
 import { changeLanguage } from "../../utils";
+import { utils } from "asc-web-components";
 
+const { size } = utils.device;
 class GroupSelector extends React.Component {
   constructor(props) {
     super(props);
 
     const { isOpen } = props;
     this.state = this.getDefaultState(isOpen, []);
-    this.isTablet = window.innerWidth < 1024;
+    this.isTablet = window.innerWidth < size.tablet;
   }
 
   componentDidMount() {
diff --git a/web/ASC.Web.Common/src/components/Layout/index.js b/web/ASC.Web.Common/src/components/Layout/index.js
index 0355a3ebff..8aaf55aa02 100644
--- a/web/ASC.Web.Common/src/components/Layout/index.js
+++ b/web/ASC.Web.Common/src/components/Layout/index.js
@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import MobileLayout from "./MobileLayout";
+import { utils } from "asc-web-components";
+
+const { size } = utils.device;
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -9,7 +12,7 @@ const StyledContainer = styled.div`
 
 const Layout = (props) => {
   const { children } = props;
-  const isTablet = window.innerWidth < 1024;
+  const isTablet = window.innerWidth < size.tablet;
 
   const [windowWidth, setWindowWidth] = useState({
     matches: isTablet,
diff --git a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js
index 9ede314ca6..44e990e625 100644
--- a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js
+++ b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js
@@ -6,7 +6,7 @@ import SelectedFrame from "./SelectedFrame";
 import isEqual from "lodash/isEqual";
 import { LayoutContextConsumer } from "asc-web-common";
 
-const { tablet } = utils.device;
+const { tablet, size } = utils.device;
 
 const commonStyles = css`
   flex-grow: 1;
@@ -111,7 +111,7 @@ class SectionBody extends React.Component {
       : {};
 
     const scrollProp = uploadFiles ? { ref: this.scrollRef } : {};
-    const isTablet = window.innerWidth < 1024;
+    const isTablet = window.innerWidth < size.tablet;
 
     return uploadFiles ? (
       <StyledDropZoneBody
diff --git a/web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js b/web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js
index 3f4af4d92b..efdd3ec964 100644
--- a/web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js
+++ b/web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js
@@ -8,7 +8,9 @@ import { getCurrentUser, isAdmin, isMe } from "../../store/auth/selectors.js";
 import { AUTH_KEY } from "../../constants";
 import { Error401, Error404 } from "../../pages/errors";
 import isEmpty from "lodash/isEmpty";
+import { utils } from "asc-web-components";
 
+const { size } = utils.device;
 const PrivateRoute = ({ component: Component, ...rest }) => {
   const {
     isAdmin,
@@ -19,7 +21,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
     computedMatch,
   } = rest;
   const { userId } = computedMatch.params;
-  const isTablet = window.innerWidth < 1024;
+  const isTablet = window.innerWidth < size.tablet;
 
   useEffect(() => {
     isTablet &&