diff --git a/layout.html b/layout.html
index 78cd830..3c0c2ec 100644
--- a/layout.html
+++ b/layout.html
@@ -376,35 +376,49 @@
 				const api_url = "media.php";
 				fetch(api_url).then((response) => {
 					if (response.ok) {
-						response.json().then((rows) => {
-							const media_library_target = document.getElementById("media_library_contents");
-							media_library_target.innerHTML = "";
-							rows.forEach((row) => {
-								const duration = new Date(row['duration_secs'] * 1000).toISOString().substring(11, 19);
-								const template = document.getElementById("media_item_template");
-								const template_clone = template.content.firstElementChild.cloneNode(true);
-								template_clone.querySelector(".media_item_title").innerHTML = row['title'];
-								template_clone.querySelector(".media_item_info").innerHTML = "<p>" + row['description'] + "</p><p>Season " + row['season'] + " Episode " + row['episode_number'] + " - (Duration " +  duration + ")</p>";
-								const thisRow = media_library_target.appendChild(template_clone);
-								thisRow.setAttribute("data-id", row['id']);
-								thisRow.setAttribute("data-title", row['title']);
-								thisRow.setAttribute("data-description", row['description']);
-								thisRow.setAttribute("data-season", row['season']);
-								thisRow.setAttribute("data-episode-number", row['episode_number']);
-								thisRow.setAttribute("data-duration", row['duration_secs']);
-							});
-							const nodes = document.querySelectorAll(".media_item_list_element");
-							nodes.forEach((node) => {
-								node.addEventListener("click", (event) => {
-									// open media item details editing pane
-									const media_item = event.target.classList.contains(".media_item_list_element") ? event.target : event.target.closest(".media_item_list_element");
-									edit_media_item(media_item);
-								});
-							});
-						});
+						response.json().then(populate_media_library);
 					}
 				});
 			}
+			
+			const fetch_filtered_media_items = () => {
+				const filter_term = document.querySelector("#media_library_filter").value;
+				const api_url = "media.php?filter=" + filter_term;
+
+				fetch(api_url).then((response) => {
+					if (response.ok) {
+						response.json().then(populate_media_library);
+					}
+				});
+			}
+
+			const populate_media_library = (rows) => {
+				const media_library_target = document.querySelector("#media_library_contents");
+				media_library_target.innerHTML = "";
+
+				rows.forEach((row) => {
+					const duration = new Date(row['duration_secs'] * 1000).toISOString().substring(11, 19);
+					const template = document.getElementById("media_item_template");
+					const template_clone = template.content.firstElementChild.cloneNode(true);
+					template_clone.querySelector(".media_item_title").innerHTML = row['title'];
+					template_clone.querySelector(".media_item_info").innerHTML = `<p>${row['description']}</p><p>Season ${row['season']} Episode ${row['episode_number']} - (Duration ${duration})</p>`;
+					const thisRow = media_library_target.appendChild(template_clone);
+					thisRow.setAttribute("data-id", row['id']);
+					thisRow.setAttribute("data-title", row['title']);
+					thisRow.setAttribute("data-description", row['description']);
+					thisRow.setAttribute("data-season", row['season']);
+					thisRow.setAttribute("data-episode-number", row['episode_number']);
+					thisRow.setAttribute("data-duration", row['duration_secs']);
+				});
+				const nodes = document.querySelectorAll(".media_item_list_element");
+				nodes.forEach((node) => {
+					node.addEventListener("click", (event) => {
+						// open media item details editing pane
+						const media_item = event.target.classList.contains(".media_item_list_element") ? event.target : event.target.closest(".media_item_list_element");
+						edit_media_item(media_item);
+					});
+				});
+			}
 
 			const edit_media_item = (media_item_element) => {
 				const template = document.getElementById("media_item_editor");