diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js
index df1d4048a9..b825551db6 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, ToggleButton, toastr } from "asc-web-components";
+import { ToggleButton, toastr } from "asc-web-components";
 import styled from "styled-components";
 
 const StyledToggle = styled(ToggleButton)`
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modalDialogContainer.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modalDialogContainer.js
index 5c0613d259..ca7c9206d7 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modalDialogContainer.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modalDialogContainer.js
@@ -5,12 +5,12 @@ const tablet = utils.device.tablet;
 
 const ModalDialogContainer = styled.div`
   .modal-dialog-aside-footer {
-    @media (max-width: 1024px) {
+    @media ${tablet} {
       width: 90%;
     }
   }
   .modal-dialog-button {
-    @media (max-width: 1024px) {
+    @media ${tablet} {
       width: 100%;
     }
   }
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js
index c115fe1328..75d865fd50 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js
@@ -8,26 +8,36 @@ import { withTranslation } from "react-i18next";
 import styled from "styled-components";
 
 import { Box, Text, Link } from "asc-web-components";
+import { utils } from "asc-web-components";
 import ConsumerItem from "./sub-components/consumerItem";
 import ConsumerModalDialog from "./sub-components/consumerModalDialog";
 
+const tablet = utils.device.tablet;
+const mobile = utils.device.mobile;
+
 const RootContainer = styled(Box)`
-  @media (max-width: 768px) {
+  @media ${tablet} {
     margin: 0;
 
     .consumers-list-container {
       margin: 32px 0 40px 0;
     }
   }
+
+  @media ${tablet} {
+    .consumer-item-wrapper {
+      margin: 0 0 24px 0;
+    }
+  }
 `;
 const StyledConsumer = styled(Box)`
   width: 400px;
 
-  @media (max-width: 768px) {
+  @media ${tablet} {
     width: 496px;
   }
 
-  @media (max-width: 375px) {
+  @media ${mobile} {
     width: 343px;
   }
 `;