diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 2ba26c307..b6a0583d9 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -121,29 +121,7 @@ export default class DesktopLayout {
                         .collapsible()
                         .id('center-pane')
                         .child(new SplitNoteContainer(() =>
-                                new NoteWrapperWidget()                                    
-                                    .child(
-                                        new RibbonContainer()
-                                            // the order of the widgets matter. Some of these want to "activate" themselves
-                                            // when visible. When this happens to multiple of them, the first one "wins".
-                                            // promoted attributes should always win.
-                                            .ribbon(new ScriptExecutorWidget())
-                                            .ribbon(new SearchDefinitionWidget())
-                                            .ribbon(new EditedNotesWidget())
-                                            .ribbon(new BookPropertiesWidget())
-                                            .ribbon(new NotePropertiesWidget())
-                                            .ribbon(new FilePropertiesWidget())
-                                            .ribbon(new ImagePropertiesWidget())
-                                            .ribbon(new BasicPropertiesWidget())
-                                            .ribbon(new OwnedAttributeListWidget())
-                                            .ribbon(new InheritedAttributesWidget())
-                                            .ribbon(new NotePathsWidget())
-                                            .ribbon(new NoteMapRibbonWidget())
-                                            .ribbon(new SimilarNotesWidget())
-                                            .ribbon(new NoteInfoWidget())
-                                            .button(new RevisionsButton())
-                                            .button(new NoteActionsWidget())
-                                        )                                    
+                                new NoteWrapperWidget()                                                                                                        
                                     .child(new SharedInfoWidget())
                                     .child(new WatchedFileUpdateStatusWidget())
                                     .child(new FloatingButtons()
@@ -188,6 +166,28 @@ export default class DesktopLayout {
                                         ...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC
                                         ...this.customWidgets.get('note-detail-pane')
                                     )
+                                    .child(
+                                        new RibbonContainer()
+                                            // the order of the widgets matter. Some of these want to "activate" themselves
+                                            // when visible. When this happens to multiple of them, the first one "wins".
+                                            // promoted attributes should always win.
+                                            .ribbon(new ScriptExecutorWidget())
+                                            .ribbon(new SearchDefinitionWidget())
+                                            .ribbon(new EditedNotesWidget())
+                                            .ribbon(new BookPropertiesWidget())
+                                            .ribbon(new NotePropertiesWidget())
+                                            .ribbon(new FilePropertiesWidget())
+                                            .ribbon(new ImagePropertiesWidget())
+                                            .ribbon(new BasicPropertiesWidget())
+                                            .ribbon(new OwnedAttributeListWidget())
+                                            .ribbon(new InheritedAttributesWidget())
+                                            .ribbon(new NotePathsWidget())
+                                            .ribbon(new NoteMapRibbonWidget())
+                                            .ribbon(new SimilarNotesWidget())
+                                            .ribbon(new NoteInfoWidget())
+                                            .button(new RevisionsButton())
+                                            .button(new NoteActionsWidget())
+                                        )    
                             )
                         )
                         .child(...this.customWidgets.get('center-pane'))
diff --git a/src/public/app/widgets/containers/ribbon_container.js b/src/public/app/widgets/containers/ribbon_container.js
index c75776a99..604d2c28e 100644
--- a/src/public/app/widgets/containers/ribbon_container.js
+++ b/src/public/app/widgets/containers/ribbon_container.js
@@ -6,7 +6,7 @@ const TPL = `
 <div class="ribbon-container">
     <style>
     .ribbon-container {
-        margin-bottom: 5px;
+        margin-top: 5px;
     }
     
     .ribbon-top-row {
@@ -24,7 +24,7 @@ const TPL = `
     
     .ribbon-tab-title {
         color: var(--muted-text-color);
-        border-bottom: 1px solid var(--main-border-color); 
+        border-top: 1px solid var(--main-border-color); 
         min-width: 24px;
         flex-basis: 24px;
         max-width: max-content;
@@ -39,7 +39,7 @@ const TPL = `
     
     .ribbon-tab-title.active {
         color: var(--main-text-color);
-        border-bottom: 3px solid var(--main-text-color);
+        border-top: 3px solid var(--main-text-color);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -62,7 +62,7 @@ const TPL = `
         min-width: 0;
         max-width: 35px;
         flex-grow: 1;
-        border-bottom: 1px solid var(--main-border-color);
+        border-top: 1px solid var(--main-border-color);
     }
         
     .ribbon-tab-spacer:last-of-type {
@@ -74,7 +74,7 @@ const TPL = `
     
     .ribbon-button-container {
         display: flex;
-        border-bottom: 1px solid var(--main-border-color); 
+        border-top: 1px solid var(--main-border-color); 
         margin-right: 5px;
     }
     
@@ -86,9 +86,9 @@ const TPL = `
     
     .ribbon-body {
         display: none;
-        border-bottom: 1px solid var(--main-border-color);
+        border-top: 1px solid var(--main-border-color);
         margin-left: 10px;
-        margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
+        margin-right: 5px; /* needs to have this value so that the top border is the same width as the top one */
     }
     
     .ribbon-body.active {