diff --git a/openlp/core/lib/__init__.py b/openlp/core/lib/__init__.py
index 0de5b8fdb..84cde2006 100644
--- a/openlp/core/lib/__init__.py
+++ b/openlp/core/lib/__init__.py
@@ -379,6 +379,14 @@ def expand_and_align_chords_in_line(match):
             for c in range(chordlen):
                 whitespaces += ' '
     if whitespaces:
+        if '_' in whitespaces:
+            ws_length = len(whitespaces)
+            if ws_length == 1:
+                whitespaces = '-'
+            else:
+                wsl_mod = ws_length // 2
+                ws_right = ws_left = ' ' * wsl_mod
+                whitespaces = ws_left + '-' + ws_right
         whitespaces = '<span class="ws">' + whitespaces + '</span>'
     return '<span class="chord"><span><strong>' + chord + '</strong></span></span>' + tail + whitespaces + remainder
 
@@ -414,6 +422,7 @@ def expand_chords(text):
 
 def compare_chord_lyric(chord, lyric):
     """
+    Compare the width of chord and lyrics. If chord width is greater than the lyric width the diff is returned.
 
     :param chord:
     :param lyric:
diff --git a/openlp/core/lib/htmlbuilder.py b/openlp/core/lib/htmlbuilder.py
index 4bbbeebd3..54040b33e 100644
--- a/openlp/core/lib/htmlbuilder.py
+++ b/openlp/core/lib/htmlbuilder.py
@@ -630,6 +630,10 @@ CHORDS_FORMAT = Template("""
     }
     .firstchordline {
         line-height: ${first_chord_line_height};
+    }
+    .ws {
+        display: ${chords_display};
+        white-space: pre-wrap;
     }""")
 
 
diff --git a/openlp/plugins/remotes/html/css/chords.css b/openlp/plugins/remotes/html/css/chords.css
index 73e01208d..4b6427e8d 100644
--- a/openlp/plugins/remotes/html/css/chords.css
+++ b/openlp/plugins/remotes/html/css/chords.css
@@ -76,10 +76,6 @@
   line-height: 1.0
 }
 
-.firstchordline {
-  line-height: 2.1em;
-}
-
 .chordline span.chord span {
   position: relative;
 }
@@ -94,6 +90,10 @@
   color: yellow;
 }
 
+.ws {
+  white-space: pre-wrap;
+}
+
 #nextslide .chordline span.chord span strong {
   color: gray;
 }
diff --git a/openlp/plugins/remotes/html/js/chords.js b/openlp/plugins/remotes/html/js/chords.js
index 39340c895..0de2edf5a 100644
--- a/openlp/plugins/remotes/html/js/chords.js
+++ b/openlp/plugins/remotes/html/js/chords.js
@@ -210,6 +210,16 @@ window.OpenLP = {
         if (!$tail && $remainder.charAt(0) == ' ') {for (c = 0; c < $chordlen; c++) {w += '&nbsp;';}}
       }
       if (w!='') {
+        if (w[0] == '_') {
+          ws_length = w.length;
+          if (ws_length==1) {
+            w = '-';
+          } else {
+            wsl_mod = Math.floor(ws_length / 2);
+            ws_right = ws_left = new Array(wsl_mod +1).join(' ');
+            w = ws_left + '-' + ws_right;
+          }
+        }
         w='<span class="ws">' + w + '</span>';
       }
       return $.grep(['<span class="chord"><span><strong>', $chord, '</strong></span></span>', $tail, w, $remainder, $end], Boolean).join('');
@@ -259,13 +269,16 @@ window.OpenLP = {
       }
       text = text.replace(/\n/g, "<br />");
       $("#nextslide").html(text);
-      $("#nextslide").class("nextslide");
     }
     else {
       text = "<p class=\"nextslide\">" + $("#next-text").val() + ": " + OpenLP.nextSong + "</p>";
       $("#nextslide").html(text);
     }
-    if(!OpenLP.showchords) $(".chordline").toggleClass('chordline1');
+    if(!OpenLP.showchords) {
+      $(".chordline").toggleClass('chordline1');
+      $(".chord").toggle();
+      $(".ws").toggle();
+    }
   },
   updateClock: function(data) {
     var div = $("#clock");
@@ -314,6 +327,7 @@ $(document).ready(function() {
   });
   $('#chords').click(function () {
     OpenLP.showchords = OpenLP.showchords ? false : true;
-    OpenLP.updateSlide();
+    OpenLP.loadSlides();
+    $
   });
 });