diff --git a/app/cyp.js b/app/cyp.js
index ac5df7d..d364466 100644
--- a/app/cyp.js
+++ b/app/cyp.js
@@ -1513,7 +1513,8 @@ customElements.define("cyp-yt", YT);
 
 const ICONS$1 = {
 	"AlbumArtist": "artist",
-	"Album": "album"
+	"Album": "album",
+	"Genre": "music"
 };
 
 class Tag extends Item {
@@ -1626,7 +1627,8 @@ customElements.define("cyp-filter", Filter);
 
 const TAGS$1 = {
 	"Album": "Albums",
-	"AlbumArtist": "Artists"
+	"AlbumArtist": "Artists",
+	"Genre": "Genres"
 };
 
 function nonempty(str) { return (str.length > 0); }
@@ -1693,6 +1695,9 @@ class Library extends Component {
 		button({icon:"artist"}, "Artists and albums", nav)
 			.addEventListener("click", _ => this._pushState({type:"tags", tag:"AlbumArtist"}));
 
+		button({icon:"music"}, "Genres", nav)
+			.addEventListener("click", _ => this._pushState({type:"tags", tag:"Genre"}));
+
 		button({icon:"folder"}, "Files and directories", nav)
 			.addEventListener("click", _ => this._pushState({type:"path", path:""}));
 
@@ -1720,7 +1725,7 @@ class Library extends Component {
 		const values = (await this._mpd.listTags(tag, filter)).filter(nonempty);
 		clear(this);
 
-		if ("AlbumArtist" in filter) { this._buildBack(); }
+		if ("AlbumArtist" in filter || "Genre" in filter) { this._buildBack(); }
 		(values.length > 0) && this._addFilter();
 		values.forEach(value => this._buildTag(tag, value, filter));
 	}
@@ -1795,6 +1800,7 @@ class Library extends Component {
 		let node;
 		switch (tag) {
 			case "AlbumArtist":
+			case "Genre":
 				node = new Tag(tag, value, filter);
 				this.appendChild(node);
 				node.onClick = () => this._pushState({type:"tags", tag:"Album", filter:node.createChildFilter()});
diff --git a/app/js/elements/library.js b/app/js/elements/library.js
index b347863..e654605 100644
--- a/app/js/elements/library.js
+++ b/app/js/elements/library.js
@@ -12,7 +12,8 @@ import { escape, serializeFilter } from "../mpd.js";
 const SORT = "-Track";
 const TAGS = {
 	"Album": "Albums",
-	"AlbumArtist": "Artists"
+	"AlbumArtist": "Artists",
+	"Genre": "Genres"
 }
 
 function nonempty(str) { return (str.length > 0); }
@@ -79,6 +80,9 @@ class Library extends Component {
 		html.button({icon:"artist"}, "Artists and albums", nav)
 			.addEventListener("click", _ => this._pushState({type:"tags", tag:"AlbumArtist"}));
 
+		html.button({icon:"music"}, "Genres", nav)
+			.addEventListener("click", _ => this._pushState({type:"tags", tag:"Genre"}));
+
 		html.button({icon:"folder"}, "Files and directories", nav)
 			.addEventListener("click", _ => this._pushState({type:"path", path:""}));
 
@@ -106,7 +110,7 @@ class Library extends Component {
 		const values = (await this._mpd.listTags(tag, filter)).filter(nonempty);
 		html.clear(this);
 
-		if ("AlbumArtist" in filter) { this._buildBack(); }
+		if ("AlbumArtist" in filter || "Genre" in filter) { this._buildBack(); }
 		(values.length > 0) && this._addFilter();
 		values.forEach(value => this._buildTag(tag, value, filter));
 	}
@@ -181,6 +185,7 @@ class Library extends Component {
 		let node;
 		switch (tag) {
 			case "AlbumArtist":
+			case "Genre":
 				node = new Tag(tag, value, filter);
 				this.appendChild(node);
 				node.onClick = () => this._pushState({type:"tags", tag:"Album", filter:node.createChildFilter()});
diff --git a/app/js/elements/tag.js b/app/js/elements/tag.js
index e35c64d..f02e158 100644
--- a/app/js/elements/tag.js
+++ b/app/js/elements/tag.js
@@ -5,7 +5,8 @@ import Item from "../item.js";
 
 const ICONS = {
 	"AlbumArtist": "artist",
-	"Album": "album"
+	"Album": "album",
+	"Genre": "music"
 }
 
 export default class Tag extends Item {