diff --git a/public/javascripts/dialogs/note_source.js b/public/javascripts/dialogs/note_source.js
index 6fb1f4d6f..1e4e7664c 100644
--- a/public/javascripts/dialogs/note_source.js
+++ b/public/javascripts/dialogs/note_source.js
@@ -9,7 +9,8 @@ const noteSource = (function() {
 
         dialogEl.dialog({
             modal: true,
-            width: 800
+            width: 800,
+            height: 500
         });
 
         const noteText = noteEditor.getCurrentNote().detail.note_text;
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index ceecea70a..73c064e56 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -185,6 +185,12 @@ div.ui-tooltip {
     margin-left: 10px;
 }
 
+#note-source {
+    height: 98%;
+    width: 100%;
+    overflow: scroll;
+}
+
 #loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff;opacity:1;transition:opacity 2s ease}
 #loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#777;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
 #loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#aaa;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
diff --git a/views/index.ejs b/views/index.ejs
index 35dd1d627..7611f09c4 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -327,7 +327,7 @@
     </div>
 
     <div id="note-source-dialog" title="Note source" style="display: none; padding: 20px;">
-      <pre id="note-source"></pre>
+      <textarea id="note-source" readonly="readonly"></textarea>
     </div>
 
     <div id="tooltip" style="display: none;"></div>