diff --git a/airsonic-main/src/main/resources/templates/head.html b/airsonic-main/src/main/resources/templates/head.html
index dc1afe6d3..ff7f91cff 100644
--- a/airsonic-main/src/main/resources/templates/head.html
+++ b/airsonic-main/src/main/resources/templates/head.html
@@ -23,6 +23,13 @@
             <script defer type="text/javascript" th:src="@{/script/mousetrap-1.6.5.min.js}"></script>
             <script defer type="text/javascript" th:src="@{/script/keyboard_shortcuts.js}"></script>
             <script defer type="text/javascript" th:src="@{/script/feather-4.29.2.min.js}"></script>
+            <script type="text/javascript" th:src="@{/script/purify-3.1.6.min.js}"></script>
+            <script type="text/javascript">
+                function changeLocation(dest) {
+                    const safeDest = DOMPurify.sanitize(dest);
+                    location.href = safeDest;
+                }
+            </script>
         </th:block>
     </head>
 </html>
\ No newline at end of file
diff --git a/airsonic-main/src/main/resources/templates/home.html b/airsonic-main/src/main/resources/templates/home.html
index 17819a251..07125503a 100644
--- a/airsonic-main/src/main/resources/templates/home.html
+++ b/airsonic-main/src/main/resources/templates/home.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-<html><head>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
     <th:block th:replace="~{head :: common_head}" />
     <th:block th:replace="~{jquery}" />
 
@@ -48,7 +49,7 @@ <h2 th:if="${!#strings.isEmpty(model.welcomeSubtitle)}" th:text="${model.welcome
     </th:block>
 </p>
 
-<th:block th:replace="~{homePager}" />
+<table th:replace="~{homePager::table}"></table>
 
 <div th:if="${!#strings.isEmpty(model.welcomeMessage)}"
      th:style="|width:15em;float:right;padding:0 1em 0 1em;border-left:1px solid #${#themes.code('detailColor')}|"
@@ -72,7 +73,7 @@ <h2 th:if="${!#strings.isEmpty(model.welcomeSubtitle)}" th:text="${model.welcome
     </div>
 </th:block>
 <th:block th:if="${model.listSize eq #lists.size(model.albums)}">
-    <th:block th:replace="~{homePager}"></th:block>
+    <table th:replace="~{homePager::table}"></table>
 </th:block>
 
 </body></html>
diff --git a/airsonic-main/src/main/resources/templates/homePager.html b/airsonic-main/src/main/resources/templates/homePager.html
index 79878d1e7..54ef8d415 100644
--- a/airsonic-main/src/main/resources/templates/homePager.html
+++ b/airsonic-main/src/main/resources/templates/homePager.html
@@ -1,12 +1,17 @@
-<table th:object="${model}">
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+  <th:block th:replace="~{head :: common_head}" />
+</head>
+<body>
+<table th:object="${model}" th:fragment="table">
     <tr>
-        <th:block th:if="*{!#strings.isEmpty(musicFolder)}">
-            <td style="padding-right: 2em">
-                <div th:style="|border:1px solid #${#themes.code('detailColor')}; padding-left: 0.5em;padding-right: 0.5em|"
-                th:text="*{musicFolder.name}">
-                </div>
-            </td>
-        </th:block>
+        <td th:if="*{!#strings.isEmpty(musicFolder)}" style="padding-right: 2em;">
+            <div th:style="|border:1px solid #${#themes.code('detailColor')}; padding-left: 0.5em;padding-right: 0.5em|"
+            th:text="*{musicFolder.name}">
+            </div>
+        </td>
 
         <th:block th:if="*{listType ne 'random'}">
             <th:block th:if="*{#lists.size(albums) gt 0}">
@@ -14,12 +19,15 @@
                 </td>
 
                 <td th:if="*{listOffset gt 0}">
-                    <a th:href="@{/home(listType=*{listType},listOffset=*{listOffset - listSize},genre=*{genre}, decade=*{decade})}"><img th:src="${#themes.code('backImage')}" alt=""></a>
+                    <a th:href="@{/home(listType=*{listType},listOffset=*{listOffset - listSize},genre=*{genre}, decade=*{decade})}">
+                        <img th:src="${#themes.code('backImage')}" alt="">
+                    </a>
                 </td>
 
                 <td th:if="*{#lists.size(albums) eq listSize}">
                     <a th:href="@{/home(listType=*{listType},listOffset=*{listOffset + listSize},genre=*{genre}, decade=*{decade})}">
-                        <img th:src="${#themes.code('forwardImage')}" alt=""></a>
+                        <img th:src="${#themes.code('forwardImage')}" alt="">
+                    </a>
                 </td>
                 <td style="padding-right: 2em">
                 </td>
@@ -28,11 +36,9 @@
             <th:block th:if="*{listType eq 'decade'}" >
                 <td th:text="#{home.decade.text}"></td>
                 <td style="padding-right: 2em">
-                    <select th:field="*{decade}"
-                            th:data-listtype="*{listType}"
-                            onchange="location='home?listType='+this.getAttribute('data-listtype')+'&amp;decade=' + options[selectedIndex].value">
-                            <option th:each="item: *{decades}" 
-                             th:value="${item}" th:text="${item}">1990</option>
+                    <select onchange="changeLocation(this.options[selectedIndex].value)">
+                        <option th:each="item: *{decades}" th:selected="${model.decade eq item}"
+                         th:value="@{/home(listType=*{listType}, decade=${item})}" th:text="${item}">1990</option>
                     </select>
                 </td>
             </th:block>
@@ -41,9 +47,11 @@
                 <td style="padding-right: 2em">
                     <select name="genre"
                             th:data-listtype="*{listType}"
-                            onchange="location='home?listType='+this.getAttribute('data-listtype')+'&amp;genre=' + encodeURIComponent(options[selectedIndex].value)">
-                        <option th:each="item: *{genres}" th:value="${item.name}"
-                        th:text="|${item.name} (${item.albumCount})|"></option>
+                            th:onchange="changeLocation(this.options[selectedIndex].value)">
+                        <option th:each="item: *{genres}" 
+                            th:value="@{/home(listType=*{listType}, genre=${item.name})}"
+                            th:selected="${model.genre eq item.name}"
+                            th:text="|${item.name} (${item.albumCount})|"></option>
                     </select>
                 </td>
             </th:block>
@@ -64,3 +72,5 @@
         </td>
     </tr>
 </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/airsonic-main/src/main/resources/templates/mediaMain.html b/airsonic-main/src/main/resources/templates/mediaMain.html
index bc1b78aaa..0eb43400a 100644
--- a/airsonic-main/src/main/resources/templates/mediaMain.html
+++ b/airsonic-main/src/main/resources/templates/mediaMain.html
@@ -829,7 +829,8 @@
         feather.replace();
         <!-- add title to feather icons-->
         Array.from(document.querySelectorAll('svg.feather[title]')).forEach((element) => {
-           element.insertAdjacentHTML('afterbegin', `<title>${element.attributes.title.value}</title>`);
+           const title = DOMPurify.sanitize(element.attributes.title.value);
+           element.insertAdjacentHTML('afterbegin', '<title>' + title  + '</title>');
         });
     }
 
@@ -921,7 +922,8 @@
             $("#starMediaDir").empty().append(feather.icons.star.toSvg({title: svgTitle}));
         }
         Array.from(document.querySelectorAll('#starMediaDir svg.feather[title]')).forEach((element) => {
-           element.insertAdjacentHTML('afterbegin', `<title>${element.attributes.title.value}</title>`);
+            const title = DOMPurify.sanitize(element.attributes.title.value);
+            element.insertAdjacentHTML('afterbegin', '<title>' + title + '</title>');
         });
     }
 
diff --git a/airsonic-main/src/main/resources/templates/playQueue.html b/airsonic-main/src/main/resources/templates/playQueue.html
index 630e2ad42..e03982bde 100644
--- a/airsonic-main/src/main/resources/templates/playQueue.html
+++ b/airsonic-main/src/main/resources/templates/playQueue.html
@@ -9,6 +9,7 @@
         <script th:src="@{/script/mediaelement/plugins/speed/speed-i18n.js}"></script>
         <script th:src="@{/script/mediaelement/plugins/chromecast/chromecast.min.js}"></script>
         <script th:src="@{/script/mediaelement/plugins/chromecast/chromecast-i18n.js}"></script>
+        <script type="text/javascript" th:src="@{/script/purify-3.1.6.min.js}"></script>
         <link rel="stylesheet" th:href="@{/script/mediaelement/plugins/speed/speed.min.css}">
         <link rel="stylesheet" th:href="@{/script/mediaelement/plugins/chromecast/chromecast.min.css}">
 
@@ -59,7 +60,7 @@
                     if (elt.hasAttribute("class")) node.setAttribute("class", elt.getAttribute("class"));
                 
                     if (newState) {
-                        if (elt.hasAttribute("data-href")) node.setAttribute("href", elt.getAttribute("data-href"));
+                        if (elt.hasAttribute("data-href")) node.setAttribute("href", DOMPurify.sanitize(elt.getAttribute("data-href")));
                         node.classList.remove("disabled");
                         node.removeAttribute("aria-disabled");
                     } else {
diff --git a/airsonic-main/src/main/resources/templates/podcastChannel.html b/airsonic-main/src/main/resources/templates/podcastChannel.html
index dcd2ab0d3..fe24e5a42 100644
--- a/airsonic-main/src/main/resources/templates/podcastChannel.html
+++ b/airsonic-main/src/main/resources/templates/podcastChannel.html
@@ -24,7 +24,6 @@
     <th:block th:replace="~{jquery}" />
     <th:block th:replace="~{table}" />
     <script type="text/javascript" th:src="@{/script/utils.js}"></script>
-    <script type="text/javascript" th:src="@{/script/purify-3.1.6.min.js}"></script>
     <script type="text/javascript" th:inline="javascript">
         function init() {
             $("#dialog-delete").dialog({resizable: false, height: 170, autoOpen: false,
@@ -106,12 +105,6 @@
             }
         }
 
-        function changePageSize(path) {
-            var url = DOMPurify.sanitize(path);
-            console.log(url);
-            location.href = url;
-        }
-
     </script>
     <style type="text/css">
       .music .center {
@@ -207,7 +200,7 @@ <h2>
 <div class="dataTables_wrapper">
     <div name="table_length" th:if="${pages.totalPages gt 1}" class="dataTables_length">
         <label>Show </label>
-        <select name="table_length" aria-controls="table" class="custom-select custom-select-sm form-control form-control-sm" onchange="changePageSize(this.options[this.selectedIndex].value)">
+        <select name="table_length" aria-controls="table" class="custom-select custom-select-sm form-control form-control-sm" onchange="changeLocation(this.options[this.selectedIndex].value)">
             <option th:each="size: ${ {5, 10, 25, 50, 100} }" th:value="@{/podcastChannel.view(page=0, id=${command.channel.id}, size=${size})}" th:selected="${pages.size eq size}" th:text="${size}"></option>
         </select>
         <label> entities</label>
diff --git a/pom.xml b/pom.xml
index 89ea4e32b..3fec21425 100644
--- a/pom.xml
+++ b/pom.xml
@@ -263,7 +263,7 @@
                 <plugin>
                     <groupId>org.apache.maven.plugins</groupId>
                     <artifactId>maven-pmd-plugin</artifactId>
-                    <version>3.23.0</version>
+                    <version>3.24.0</version>
                     <executions>
                         <execution>
                             <id>validate</id>
