diff --git a/src/public/javascripts/services/note_detail_code.js b/src/public/javascripts/services/note_detail_code.js
index 5a9baf2b3..ee779f272 100644
--- a/src/public/javascripts/services/note_detail_code.js
+++ b/src/public/javascripts/services/note_detail_code.js
@@ -31,7 +31,8 @@ async function show() {
             highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false},
             lint: true,
             gutters: ["CodeMirror-lint-markers"],
-            lineNumbers: true
+            lineNumbers: true,
+            tabindex: 2 // so that tab from title will lead to code editor focus
         });
 
         codeEditor.on('change', noteDetailService.noteChanged);
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index a99b283c2..f37a9550e 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -28,6 +28,23 @@
     align-items: center;
 }
 
+#note-detail-wrapper {
+    position: relative;
+    overflow: hidden;
+    grid-area: note-detail;
+    padding-left: 10px;
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+#note-detail-component-wrapper {
+    flex-grow: 1;
+    position: relative;
+    overflow: auto;
+    flex-basis: content;
+}
+
 .note-detail-component {
     display: none;
 }
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 69bdad9c5..f114c9e3a 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -132,9 +132,9 @@
         </div>
       </div>
 
-      <div style="position: relative; overflow: hidden; grid-area: note-detail; padding-left: 10px; padding-top: 10px; display: flex; flex-direction: column;" id="note-detail-wrapper">
-        <div style="flex-grow: 1; position: relative; overflow: auto; flex-basis: content;">
-          <div id="note-detail-text" style="height: 100%;" class="note-detail-component"></div>
+      <div  id="note-detail-wrapper">
+        <div id="note-detail-component-wrapper">
+          <div id="note-detail-text" class="note-detail-component" tabindex="2"></div>
 
           <div id="note-detail-search" class="note-detail-component">
             <div style="display: flex; align-items: center;">