diff --git a/src/public/javascripts/widgets/mobile_layout.js b/src/public/javascripts/widgets/mobile_layout.js
index 54e004204..1bf073ab0 100644
--- a/src/public/javascripts/widgets/mobile_layout.js
+++ b/src/public/javascripts/widgets/mobile_layout.js
@@ -11,9 +11,11 @@ export default class MobileLayout {
             .id('root-widget')
             .css('height', '100vh')
             .child(new FlexContainer('column')
+                .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
                 .child(new MobileGlobalButtonsWidget())
                 .child(new NoteTreeWidget()))
             .child(new FlexContainer('column')
+                .class("d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
                 .child(new NoteTitleWidget())
                 .child(new NoteDetailWidget()));
     }
diff --git a/src/public/stylesheets/mobile.css b/src/public/stylesheets/mobile.css
index 683cbd9b4..c5658d746 100644
--- a/src/public/stylesheets/mobile.css
+++ b/src/public/stylesheets/mobile.css
@@ -5,46 +5,15 @@ html, body {
     padding: 0;
 }
 
-
-.tree {
-    width: 100%;
-    overflow: auto;
-}
-
-.tree .action-button {
-    position: relative;
-    top: -5px;
-    margin-left: 10px;
-}
-
-#detail {
-    padding: 5px 20px 10px 0px;
+.note-detail {
+    padding: 5px 20px 10px 0;
     height: 100%;
     flex-direction: column;
 }
 
-#note-tab-container {
-    height: 100%;
-}
-
-.note-tab-row {
-    display: none !important;
-}
-
-.note-title-row {
-    display: flex;
-    padding-left: 15px;
-    padding-top: 10px;
-    flex-shrink: 0;
-}
-
-.action-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.5em;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
+.note-title-container {
+    padding: 10px;
+    font-size: larger;
 }
 
 .fancytree-custom-icon {