diff --git a/htdocs/index.html b/htdocs/index.html
index 1bf5219..3d8bb5a 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -26,24 +26,24 @@
             </form>
             <div class="dropdown-divider"></div>
             <a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
-            <a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB(event);">Update Database</a>
-            <a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown" onclick="window.open('/player.html#'+settings.mpdstream,'LocalPlayer');">Local Player</a>
+            <a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#">Update Database</a>
+            <a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown">Local Player</a>
             <a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings">Settings</a>
             <a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#about">About</a>
           </div>
         </div>
         <div class="btn-toolbar col-auto pl-0 pr-0" role="toolbar">
-          <div class="btn-group mr-2" role="group">
-            <button id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons" onclick="clickPrev();;">
+          <div class="btn-group mr-2" role="group" id="playControlBtns">
+            <button id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
               skip_previous
             </button>
-            <button id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons" onclick="clickStop();">
+            <button id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
               stop
             </button>
-            <button id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons" onclick="clickPlay();">
+            <button id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
               pause
             </button>
-            <button id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons" onclick="clickNext();">
+            <button id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
               skip_next
             </button>
           </div>
@@ -55,11 +55,11 @@
               <h2 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h2>
               <form class="px-4 py-0 pb-3" id="volumeControl">
                 <div class="btn-group" role="group">
-                  <input type="button" class="btn btn-secondary" value="&minus;" onclick="chVolume(-5)"/>
+                  <input id="chVolumeMinus" type="button" class="btn btn-secondary" value="&minus;"/>
                   <div class="btn btn-secondary">
                     <input type="range" min="0" max="100" step="1" class="form-control-range" id="volumeBar">
                   </div>
-                  <input type="button" class="btn btn-secondary" value="+" onclick="chVolume(5)"/>
+                  <input id="chVolumePlus" type="button" class="btn btn-secondary" value="+"/>
                 </div>
               </form>
               <div class="dropdown-divider"></div>
@@ -91,7 +91,6 @@
       </div>
     </div>
     
-    
     <div class="card hide" id="cardQueue">
       <div class="card-header">
         <a href="#" data-toggle="collapse" data-target="#queue-buttons" class="text-dark">Queue</a>
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index d74ed1b..5a01b90 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -362,63 +362,97 @@ $(document).ready(function(){
     document.getElementById('BrowseFilesystemAddAllSongs').addEventListener('click', function() {
         sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": { "uri": app.current.search}});
     },false);
+
+    document.getElementById('nav-updatedb').addEventListener('click', function(event) {
+        updateDB(event);
+    },false);
     
-    $('#cardBrowseNavFilesystem').on('click', function (e) {
-        app.goto('Browse','Filesystem');
-        e.preventDefault();
-    });
+    document.getElementById('nav-localplayer').addEventListener('click', function(event) {
+        window.open('/player.html#' + settings.mpdstream, 'LocalPlayer');
+    },false);
+    
+    document.getElementById('playControlBtns').addEventListener('click', function(event) {
+        if (event.target.nodeName == 'BUTTON') {
+            switch (event.target.getAttribute('id')) {
+                case 'btnPrev':
+                    clickPrev();
+                    break;
+                case 'btnStop':
+                    clickStop();
+                    break;
+                case 'btnPlay':
+                    clickPlay();
+                    break;
+                case 'btnNext':
+                    clickNext();
+                    break;
+            }
+        }
+    }, false);
 
-    $('#cardBrowseNavDatabase').on('click', function (e) {
-        app.goto('Browse','Database');
-        e.preventDefault();
-    });
+    document.getElementById('chVolumeMinus').addEventListener('click', function(event) {
+        chVolume(-5)
+    },false);
+    
+    document.getElementById('chVolumePlus').addEventListener('click', function(event) {
+        chVolume(5)
+    },false);
 
-    $('#btnBrowseDatabaseArtist').on('click', function (e) {
+    document.getElementById('panel-heading-browse').addEventListener('click', function(event) {
+        if (event.target.nodeName == 'A') {
+            event.preventDefault();
+            switch (event.target.getAttribute('id')) {
+                case 'cardBrowseNavDatabase':
+                    app.goto('Browse','Database');
+                    break;
+                case 'cardBrowseNavPlaylists':
+                    app.goto('Browse','Playlists');
+                    break;
+                case 'cardBrowseNavFilesystem':
+                    app.goto('Browse','Filesystem');
+                    break;
+            }
+        }
+    }, false);
+    
+    document.getElementById('btnBrowseDatabaseArtist').addEventListener('click', function (event) {
         app.goto('Browse','Database','Artist');
-        e.preventDefault();
-    });
+        event.preventDefault();
+    }, false);
 
-    $('#cardBrowseNavPlaylists').on('click', function (e) {
-        app.goto('Browse','Playlists');
-        e.preventDefault();
-    });
+    document.getElementById('navbar-bottom').addEventListener('click', function(event) {
+        if (event.target.nodeName == 'A') {
+            event.preventDefault();
+            switch (event.target.parentNode.getAttribute('id')) {
+                case 'navPlayback':
+                    app.goto('Playback');
+                    break;
+                case 'navQueue':
+                    app.goto('Queue');
+                    break;
+                case 'navBrowse':
+                    app.goto('Browse');
+                    break;
+                case 'navSearch':
+                    app.goto('Search');
+                    break;
+            }
+        }
+    }, false);
+    
+    document.getElementById('searchtags2').addEventListener('click', function(event) {
+        if (event.target.nodeName == 'BUTTON')
+            app.goto(app.current.app, app.current.tab, app.current.view, '0/' + event.target.innerText + '/' + app.current.search);
+    }, false);
 
-    $('#cardBrowseNavFilesystem').on('click', function (e) {
-        app.goto('Browse','Filesystem');
-        e.preventDefault();
-    });
-
-    $('#navPlayback').on('click', function (e) {
-        app.goto('Playback');
-        e.preventDefault();
-    });
-
-    $('#navQueue').on('click', function (e) {
-        app.goto('Queue');
-        e.preventDefault();
-    });
-
-    $('#navBrowse').on('click', function (e) {
-        app.goto('Browse');
-        e.preventDefault();
-    });
-
-    $('#navSearch').on('click', function (e) {
-        app.goto('Search');
-        e.preventDefault();
-    });
-
-    $('#searchtags2 > button').on('click',function (e) {
-        app.goto(app.current.app, app.current.tab, app.current.view, '0/' + this.innerText + '/' + app.current.search);
-    });
-
-    $('#searchqueuestr').keyup(function (event) {
+    document.getElementById('searchqueuestr').addEventListener('keyup', function(event) {
         app.goto(app.current.app, app.current.tab, app.current.view, '0/' + app.current.filter + '/' + this.value);
-    });
+    }, false);
 
-    $('#searchqueuetag > button').on('click',function (e) {
-        app.goto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + this.innerText + '/' + app.current.search);
-    });
+    document.getElementById('searchqueuetag').addEventListener('click', function (event) {
+        if (event.target.nodeName == 'BUTTON')
+            app.goto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + event.target.innerText + '/' + app.current.search);
+    }, false);
 
     document.getElementById('inputSearch').addEventListener('keypress', function (event) {
         if ( event.which == 13 )
@@ -439,7 +473,7 @@ $(document).ready(function(){
     }, false);
 
     document.getElementById('searchstr2').addEventListener('keyup', function (event) {
-        app.goto('Search', undefined, undefined, app.current.page + '0/' + app.current.filter + '/' + this.value);
+        app.goto('Search', undefined, undefined, '0/' + app.current.filter + '/' + this.value);
     }, false);
 
     window.addEventListener('hashchange', app.route, false);