diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index e2140eb3daf92e0b4b89d5f8e19c79a329581b31..17a82d1e0f976e224709e4fe91abd0bead4f205e 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -107,15 +107,21 @@ const WaxSurfaceScroll = styled.div`
 const MainMenuContainer = styled.div`
   background: #fff;
   min-height: 52px;
-  line-height: 32px;
+  /* line-height: 32px; */
   position: relative;
   user-select: none;
   border-bottom: 2px solid #ecedf1;
+  @media (max-width: 600px) {
+    font-size: 10px;
+    min-height: 72px;
+  }
 `;
 const MainMenuInner = styled.div`
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-wrap: wrap;
+
+  /* align-items: center; */
+  /* justify-content: center; */
   flex-direction: column;
   left: 0;
   position: absolute;
@@ -135,6 +141,9 @@ const SideMenuContainer = styled.div`
   display: flex;
   width: 14%;
   height: 98%;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 
 const SideMenuInner = styled.div`
diff --git a/wax-prosemirror-services/src/MenuService/MenuWrapper.js b/wax-prosemirror-services/src/MenuService/MenuWrapper.js
index 471d9d621066a18e236d4589b7d001cd74eaa7ad..e546894e6e39ec17e840be5d585ca0194cd570df 100644
--- a/wax-prosemirror-services/src/MenuService/MenuWrapper.js
+++ b/wax-prosemirror-services/src/MenuService/MenuWrapper.js
@@ -1,13 +1,14 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 
-import { map } from "lodash";
+import { map } from 'lodash';
 
 const MainMenu = styled.div`
+  display: flex;
+  flex-wrap: wrap;
   background: #fff;
   padding: 2px 2px 2px 0;
   position: relative;
-  background: transparent;
 `;
 
 const MainMenuBar = ({ items = [], view }) => {