diff --git a/src/components/dialogs/RouterDialog.jsx b/src/components/dialogs/RouterDialog.jsx
index 2c67886..08f48cf 100644
--- a/src/components/dialogs/RouterDialog.jsx
+++ b/src/components/dialogs/RouterDialog.jsx
@@ -56,7 +56,7 @@ const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
 );
 
 export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit, width }: Props) => (
-  <div className="control-dialog" style={{ width }}>
+  <div className="control-dialog control-dialog-big" style={{ width }}>
     {!routerPoints && noPoints({ routerCancel })}
     {routerPoints === 1 && firstPoint({ routerCancel })}
     {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}
diff --git a/src/components/dialogs/TrashDialog.jsx b/src/components/dialogs/TrashDialog.jsx
index 986b1a6..ff100c8 100644
--- a/src/components/dialogs/TrashDialog.jsx
+++ b/src/components/dialogs/TrashDialog.jsx
@@ -13,11 +13,11 @@ type Props = {
 export const TrashDialog = ({
   clearPoly, clearStickers, clearAll, clearCancel, width,
 }: Props) => (
-  <div className="control-dialog" style={{ width }}>
+  <div className="control-dialog control-dialog-big" style={{ width }}>
     <div className="helper trash-helper">
       <div className="helper__text danger">
         <Icon icon="icon-trash-4" />
-        <div className="big upper">Удалить:</div>
+        <div className="big upper desktop-only">Удалить:</div>
       </div>
       <div className="helper__buttons">
         <div className="button-group">
@@ -28,7 +28,7 @@ export const TrashDialog = ({
             Стикеры
           </div>
           <div className="button router-helper__button" onClick={clearAll}>
-            Удалить все
+            ВСЕ
           </div>
         </div>
         <div className="button primary router-helper__button" onClick={clearCancel}>
diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx
index 2b2e625..c67a475 100644
--- a/src/components/panels/EditorPanel.jsx
+++ b/src/components/panels/EditorPanel.jsx
@@ -63,13 +63,11 @@ class Component extends React.PureComponent<Props, void> {
             <UserLocation />
           </div>
 
-          <div className="status-bar padded">
+          <div className="status-bar padded desktop-only">
             {distance} км&nbsp;
             <Icon icon="icon-cycle" size={32} />
             {
-              <span>{
-                toHours(estimated)
-              }</span>
+              <span>{toHours(estimated)}</span>
             }
           </div>
         </div>
@@ -143,6 +141,7 @@ class Component extends React.PureComponent<Props, void> {
               className={classnames({ primary: changed, disabled: !changed })}
               onClick={this.startSaveMode}
             >
+              <span className="desktop-only">СХОРОНИТЬ</span>
               <Icon icon="icon-check-1" />
             </button>
           </div>
diff --git a/src/styles/colors.less b/src/styles/colors.less
index ee53887..9d3ad64 100644
--- a/src/styles/colors.less
+++ b/src/styles/colors.less
@@ -23,3 +23,5 @@
 
 @bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
 @dialog_shadow: rgba(0,0,0,0.3) 0 2px 0;
+
+@mobile_breakpoint: 768px;
diff --git a/src/styles/dialogs.less b/src/styles/dialogs.less
index 6b408f3..c5cd105 100644
--- a/src/styles/dialogs.less
+++ b/src/styles/dialogs.less
@@ -22,6 +22,10 @@
     pointer-events: all;
   }
 
+  @media (max-width: @mobile_breakpoint) {
+    width: 100%;
+  }
+
 }
 
 .dialog-content {
diff --git a/src/styles/main.less b/src/styles/main.less
index 9235436..cba184a 100644
--- a/src/styles/main.less
+++ b/src/styles/main.less
@@ -113,3 +113,7 @@ body {
 .pointer {
   cursor: pointer;
 }
+
+@media (max-width: @mobile_breakpoint) {
+  .desktop-only { display: none; }
+}
diff --git a/src/styles/panel.less b/src/styles/panel.less
index 7603856..1c2b51e 100644
--- a/src/styles/panel.less
+++ b/src/styles/panel.less
@@ -153,12 +153,23 @@
   background: #222222;
 }
 
+.panel-user {
+  z-index: 1;
+
+  @media (max-width: @mobile_breakpoint) {
+    flex-direction: column-reverse;
+
+    .control-sep {
+      opacity: 0;
+      height: 10px;
+    }
+  }
+}
+
 .control-dialog {
-  background: rgba(30, 30, 30, 0.95);
   position: absolute;
   right: 10px;
   bottom: 68px;
-  border-radius: @panel_radius;
   z-index: 3;
   color: white;
   box-sizing: border-box;
@@ -172,15 +183,38 @@
 
   &.control-dialog-big {
     min-width: 555px;
+
+    @media (max-width: @mobile_breakpoint) {
+      min-width: 100%;
+      max-width: 100%;
+      width: 100% !important;
+      left: 0;
+      padding: 0 10px;
+    }
   }
 
   &.control-dialog-medium {
     min-width: 460px;
+
+    @media (max-width: @mobile_breakpoint) {
+      min-width: 100%;
+      max-width: 100%;
+      width: 100% !important;
+      left: 0;
+      padding: 0 10px;
+    }
   }
+
 }
 
 .control-dialog-provider {
   width: 500px;
+
+  @media (max-width: @mobile_breakpoint) {
+    width: 100%;
+    left: 0;
+    padding: 0 10px;
+  }
 }
 
 .helper {
@@ -189,6 +223,10 @@
   font-weight: 200;
   font-size: 1em;
   display: flex;
+
+  background: #222222;
+  border-radius: @panel_radius;
+  box-shadow: @bar_shadow;
 }
 
 
@@ -387,6 +425,10 @@
   &.top-control {
     width: 150px;
     justify-content: flex-start;
+
+    @media (max-width: @mobile_breakpoint) {
+      width: 100px;
+    }
   }
 
   svg {
diff --git a/src/styles/user-button.less b/src/styles/user-button.less
index 44b5462..36d0a02 100644
--- a/src/styles/user-button.less
+++ b/src/styles/user-button.less
@@ -18,6 +18,14 @@
 
   user-select: none;
   cursor: pointer;
+
+  @media (max-width: @mobile_breakpoint) {
+    width: 0;
+
+    .user-button-fields {
+      display: none;
+    }
+  }
 }
 
 .user-button-picture {
@@ -74,7 +82,11 @@
   border-radius: @panel_radius;
   padding: 0;
   box-sizing: border-box;
-  z-index: -1
+  z-index: -1;
+
+  @media (max-width: @mobile_breakpoint) {
+    left: 58px;
+  }
 }
 .user-panel-title {
   font-size: 20px;