diff --git a/src/public/javascripts/services/mobile.js b/src/public/javascripts/services/mobile.js
index f4a8fd091..9c54c4b5b 100644
--- a/src/public/javascripts/services/mobile.js
+++ b/src/public/javascripts/services/mobile.js
@@ -4,14 +4,15 @@ import dragAndDropSetup from "./drag_and_drop.js";
 import treeCache from "./tree_cache.js";
 import treeBuilder from "./tree_builder.js";
 
+const $leftPane = $("#left-pane");
 const $tree = $("#tree");
 const $detail = $("#detail");
 const $closeDetailButton = $("#close-detail-button");
 
 function togglePanes() {
-    if (!$tree.is(":visible") || !$detail.is(":visible")) {
+    if (!$leftPane.is(":visible") || !$detail.is(":visible")) {
         $detail.toggleClass("d-none");
-        $tree.toggleClass("d-none");
+        $leftPane.toggleClass("d-none");
     }
 }
 
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
new file mode 100644
index 000000000..7da33afc1
--- /dev/null
+++ b/src/public/stylesheets/desktop.css
@@ -0,0 +1,56 @@
+#container {
+    margin: 0 auto; /* center */
+    height: 100vh;
+
+    display: grid;
+    grid-template-areas: "header header"
+    "left-pane title"
+    "left-pane note-detail";
+    grid-template-rows: auto
+    auto
+    1fr;
+
+    justify-content: center;
+    grid-gap: 10px;
+}
+
+#search-box {
+    display: none;
+    padding: 10px;
+    margin-top: 10px;
+}
+
+#tree {
+    overflow: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 60%;
+    margin-top: 10px;
+}
+
+#left-pane {
+    grid-area: left-pane;
+    display: flex;
+    flex-direction: column;
+}
+
+#header {
+    grid-area: header;
+    background-color: #f8f8f8;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+}
+
+#header button {
+    padding: 1px 5px 1px 5px;
+    font-size: small;
+}
+
+#global-buttons {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0 10px 0;
+    margin: 0 10px 0 16px;
+    border: 1px solid #ccc;
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/mobile.css b/src/public/stylesheets/mobile.css
index ef875ecb0..99db6eb38 100644
--- a/src/public/stylesheets/mobile.css
+++ b/src/public/stylesheets/mobile.css
@@ -9,10 +9,23 @@ html, body {
     height: 100%;
 }
 
+#left-pane {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#global-buttons {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0 10px 0;
+    margin: 0 10px 0 16px;
+}
+
 #tree {
     font-size: larger;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     overflow: auto;
 }
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 18e801dd6..ef417ce96 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -4,55 +4,6 @@ body {
     position: fixed;
 }
 
-#container {
-    margin: 0 auto; /* center */
-    height: 100vh;
-
-    display: grid;
-    grid-template-areas: "header header"
-                         "left-pane title"
-                         "left-pane note-detail";
-    grid-template-rows: auto
-                        auto
-                        1fr;
-
-    justify-content: center;
-    grid-gap: 10px;
-}
-
-#header {
-    grid-area: header;
-    background-color: #f8f8f8;
-    display: flex;
-    align-items: center;
-    padding: 4px;
-}
-
-#header button {
-    padding: 1px 5px 1px 5px;
-    font-size: small;
-}
-
-#left-pane {
-    grid-area: left-pane;
-    display: flex;
-    flex-direction: column;
-}
-
-#global-buttons {
-    display: flex;
-    justify-content: space-around;
-    padding: 10px 0 10px 0;
-    margin: 0 10px 0 16px;
-    border: 1px solid #ccc;
-}
-
-#search-box {
-    display: none;
-    padding: 10px;
-    margin-top: 10px;
-}
-
 #title-container {
     grid-area: title;
 }
@@ -225,14 +176,6 @@ div.ui-tooltip {
     width: auto;
 }
 
-#tree {
-    overflow: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 60%;
-    margin-top: 10px;
-}
-
 #search-results {
     padding: 0 5px 5px 15px;
     flex-basis: 40%;
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 12fdf631e..a074bfd01 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -236,6 +236,7 @@
 <script src="libraries/autocomplete.jquery.min.js"></script>
 
 <link href="stylesheets/style.css" rel="stylesheet">
+<link href="stylesheets/desktop.css" rel="stylesheet">
 
 <script src="javascripts/services/bootstrap.js" crossorigin type="module"></script>
 
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index 8406fe269..bedd04908 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -6,9 +6,20 @@
 </head>
 <body class="mobile">
 <div class="row" id="container-row">
-    <div id="tree" class="d-sm-block d-md-block d-lg-block d-xl-block col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
 
-    <div id="detail" class="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-8 col-md-8 col-lg-8">
+    <div id="left-pane" class="d-sm-block d-md-block d-lg-block d-xl-block col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4">
+        <div id="global-buttons">
+            <a id="create-top-level-note-button" title="Create new top level note" class="icon-action jam jam-plus-circle"></a>
+
+            <a id="collapse-tree-button" title="Collapse note tree. Shortcut ALT+C" class="icon-action jam jam-align-justify"></a>
+
+            <a id="scroll-to-current-note-button" title="Scroll to current note. Shortcut CTRL+." class="icon-action jam jam-download"></a>
+        </div>
+
+        <div id="tree"></div>
+    </div>
+
+    <div id="detail" 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">
         <div id="note-title-row">
             <button type="button" id="note-menu-button" class="action-button jam jam-align-justify"></button>