diff --git a/htdocs/index.html b/htdocs/index.html
index ed77279..0ed3f94 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -55,6 +55,11 @@
               <span class="glyphicon glyphicon-forward"></span>
             </button>
           </div>
+          <div class="btn-group">
+            <button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
+              <span class="glyphicon glyphicon-heart"></span>
+            </button>
+          </div>
           <div class="btn-group">
             <div class="btn btn-toolbar btn-default">
               <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 6000b79..577b076 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -466,6 +466,8 @@ function webSocketConnect() {
                     $('#album').text("");
                     $('#artist').text("");
 
+					$('#btnlove').removeClass("active");
+
                     $('#currenttrack').text(" " + obj.data.title);
                     var notification = "<strong><h4>" + obj.data.title + "</h4></strong>";
 
@@ -598,6 +600,14 @@ function basename(path) {
     return path.split('/').reverse()[0];
 }
 
+function clickLove() {
+    socket.send("MPD_API_SEND_MESSAGE,mpdas," + ($('#btnlove').hasClass('active') ? "unlove" : "love"));
+	if ( $('#btnlove').hasClass('active') )
+		$('#btnlove').removeClass("active");
+	else
+		$('#btnlove').addClass("active");
+}
+
 $('#btnrandom').on('click', function (e) {
     socket.send("MPD_API_TOGGLE_RANDOM," + ($(this).hasClass('active') ? 0 : 1));