diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/backdrop.js b/web/ASC.Web.Components/src/components/backdrop/index.js
similarity index 83%
rename from web/ASC.Web.Components/src/components/layout/sub-components/backdrop.js
rename to web/ASC.Web.Components/src/components/backdrop/index.js
index 925c4e07a2..ad5d2ed0b2 100644
--- a/web/ASC.Web.Components/src/components/layout/sub-components/backdrop.js
+++ b/web/ASC.Web.Components/src/components/backdrop/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 const StyledBackdrop = styled.div`
   background-color: rgba(0, 0, 0, 0.3);
-  display: ${props => props.isOpen ? 'block' : 'none'};
+  display: ${props => props.visible ? 'block' : 'none'};
   height: 100vh;
   position: fixed;
   width: 100vw;
diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/device.js b/web/ASC.Web.Components/src/components/device/index.js
similarity index 100%
rename from web/ASC.Web.Components/src/components/layout/sub-components/device.js
rename to web/ASC.Web.Components/src/components/device/index.js
diff --git a/web/ASC.Web.Components/src/components/layout/index.js b/web/ASC.Web.Components/src/components/layout/index.js
index ccc238960f..aa60f0800b 100644
--- a/web/ASC.Web.Components/src/components/layout/index.js
+++ b/web/ASC.Web.Components/src/components/layout/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Backdrop from './sub-components/backdrop'
+import Backdrop from '../backdrop'
 import Header from './sub-components/header'
 import Nav from './sub-components/nav'
 import Aside from './sub-components/aside'
@@ -37,7 +37,7 @@ class Layout extends React.Component {
     }
 
     this.state = {
-      isBackdropOpen: props.isBackdropOpen,
+      isBackdropVisible: props.isBackdropVisible,
       isNavHoverEnabled: props.isNavHoverEnabled,
       isNavOpen: props.isNavOpen,
       isAsideOpen: props.isAsideOpen,
@@ -61,7 +61,7 @@ class Layout extends React.Component {
 
   backdropClick = () => {
     this.setState({
-      isBackdropOpen: false,
+      isBackdropVisible: false,
       isNavOpen: false,
       isAsideOpen: false,
       isNavHoverEnabled: !this.state.isNavHoverEnabled
@@ -70,7 +70,7 @@ class Layout extends React.Component {
 
   showNav = () => {
     this.setState({
-      isBackdropOpen: true,
+      isBackdropVisible: true,
       isNavOpen: true,
       isAsideOpen: false,
       isNavHoverEnabled: false
@@ -81,7 +81,7 @@ class Layout extends React.Component {
     if(!this.state.isNavHoverEnabled) return;
     
     this.setState({
-      isBackdropOpen: false,
+      isBackdropVisible: false,
       isNavOpen: !this.state.isNavOpen,
       isAsideOpen: false
     });
@@ -89,7 +89,7 @@ class Layout extends React.Component {
 
   toggleAside = () => {
     this.setState({
-      isBackdropOpen: true,
+      isBackdropVisible: true,
       isNavOpen: false,
       isAsideOpen: true,
       isNavHoverEnabled: false
@@ -99,7 +99,7 @@ class Layout extends React.Component {
   render() {
     return (
       <>
-        <Backdrop isOpen={this.state.isBackdropOpen} onClick={this.backdropClick}/>
+        <Backdrop visible={this.state.isBackdropVisible} onClick={this.backdropClick}/>
         <HeaderNav
           modules={this.state.isolateModules}
           user={this.state.currentUser}
@@ -144,7 +144,7 @@ class Layout extends React.Component {
 }
 
 Layout.propTypes = {
-  isBackdropOpen: PropTypes.bool,
+  isBackdropVisible: PropTypes.bool,
   isNavHoverEnabled: PropTypes.bool,
   isNavOpen: PropTypes.bool,
   isAsideOpen: PropTypes.bool,
@@ -159,7 +159,7 @@ Layout.propTypes = {
 }
 
 Layout.defaultProps = {
-  isBackdropOpen: false,
+  isBackdropVisible: false,
   isNavHoverEnabled: true,
   isNavOpen: false,
   isAsideOpen: false
diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/header.js b/web/ASC.Web.Components/src/components/layout/sub-components/header.js
index 5bd76744b6..8050c00d83 100644
--- a/web/ASC.Web.Components/src/components/layout/sub-components/header.js
+++ b/web/ASC.Web.Components/src/components/layout/sub-components/header.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import device from './device'
+import device from '../../device'
 import NavItem from './nav-item'
 import { Text } from '../../text'
 
diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/main.js b/web/ASC.Web.Components/src/components/layout/sub-components/main.js
index 7cec411c49..0213138f7d 100644
--- a/web/ASC.Web.Components/src/components/layout/sub-components/main.js
+++ b/web/ASC.Web.Components/src/components/layout/sub-components/main.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import device from './device'
+import device from '../../device'
 
 const StyledMain = styled.main` 
   height: 100vh;
diff --git a/web/ASC.Web.Components/src/components/layout/sub-components/nav.js b/web/ASC.Web.Components/src/components/layout/sub-components/nav.js
index 3a73d28bfa..16eb51174c 100644
--- a/web/ASC.Web.Components/src/components/layout/sub-components/nav.js
+++ b/web/ASC.Web.Components/src/components/layout/sub-components/nav.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import device from './device'
+import device from '../../device'
 
 const backgroundColor = '#0F4071';
 
diff --git a/web/ASC.Web.Components/src/components/page-layout/index.js b/web/ASC.Web.Components/src/components/page-layout/index.js
index af8ff4ed19..f2fcbcd0e0 100644
--- a/web/ASC.Web.Components/src/components/page-layout/index.js
+++ b/web/ASC.Web.Components/src/components/page-layout/index.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import device from '../layout/sub-components/device'
-import Backdrop from '../layout/sub-components/backdrop'
+import device from '../device'
+import Backdrop from '../backdrop'
 
 const StyledArticle = styled.article`
   padding: 0 16px;
@@ -116,7 +116,7 @@ class PageLayout extends React.Component {
 
   backdropClick = () => {
     this.setState({
-      isBackdropOpen: false,
+      isBackdropVisible: false,
       isArticleOpen: false,
       isArticlePinned: false
     });
@@ -124,7 +124,7 @@ class PageLayout extends React.Component {
 
   pinArticle = () => {
     this.setState({
-      isBackdropOpen: false,
+      isBackdropVisible: false,
       isArticlePinned: true,
       isArticleOpen: true 
     });
@@ -132,7 +132,7 @@ class PageLayout extends React.Component {
 
   unpinArticle = () => {
     this.setState({
-      isBackdropOpen: true,
+      isBackdropVisible: true,
       isArticlePinned: false,
       isArticleOpen: true 
     });
@@ -140,7 +140,7 @@ class PageLayout extends React.Component {
 
   showArticle = () => {
     this.setState({
-      isBackdropOpen: true,
+      isBackdropVisible: true,
       isArticleOpen: true,
       isArticlePinned: false
     });
@@ -149,7 +149,7 @@ class PageLayout extends React.Component {
   render() {
     return (
       <>
-        <Backdrop isOpen={this.state.isBackdropOpen} onClick={this.backdropClick}/>
+        <Backdrop visible={this.state.isBackdropVisible} onClick={this.backdropClick}/>
         <StyledArticle isOpen={this.state.isArticleOpen} isPinned={this.state.isArticlePinned}>
           <StyledArticleHeader isPinned={this.state.isArticlePinned}/>
           <StyledArticleBody/>
@@ -174,13 +174,13 @@ class PageLayout extends React.Component {
 }
 
 PageLayout.propTypes = {
-  isBackdropOpen: PropTypes.bool,
+  isBackdropVisible: PropTypes.bool,
   isArticleOpen: PropTypes.bool,
   isArticlePinned: PropTypes.bool
 }
 
 PageLayout.defaultProps = {
-  isBackdropOpen: false,
+  isBackdropVisible: false,
   isArticleOpen: false,
   isArticlePinned: false
 }