diff --git a/plugins/quality-changer/front.js b/plugins/quality-changer/front.js
new file mode 100644
index 00000000..d167776c
--- /dev/null
+++ b/plugins/quality-changer/front.js
@@ -0,0 +1,41 @@
+const { ElementFromFile, templatePath } = require("../utils");
+const dialog = require('electron').remote.dialog
+
+function $(selector) { return document.querySelector(selector); }
+
+const qualitySettingsButton = ElementFromFile(
+    templatePath(__dirname, "qualitySettingsTemplate.html")
+);
+
+
+module.exports = () => {
+    document.addEventListener('apiLoaded', setup);
+}
+
+function setup(event) {
+    const api = event.detail;
+
+    $('.top-row-buttons.ytmusic-player').prepend(qualitySettingsButton);
+
+    qualitySettingsButton.onclick = function chooseQuality() {
+        if (api.getPlayerState() === 2) api.playVideo();
+        else if (api.getPlayerState() === 1) api.pauseVideo();
+
+        const currentIndex = api.getAvailableQualityLevels().indexOf(api.getPlaybackQuality())
+
+        dialog.showMessageBox({
+            type: "question",
+            buttons: api.getAvailableQualityLabels(),
+            defaultId: currentIndex,
+            title: "Choose Video Quality",
+            message: "Choose Video Quality:",
+            detail: `Current Quality: ${api.getAvailableQualityLabels()[currentIndex]}`,
+            cancelId: -1
+        }).then((promise) => {
+            if (promise.response === -1) return;
+            const newQuality = api.getAvailableQualityLevels()[promise.response];
+            api.setPlaybackQualityRange(newQuality);
+            api.setPlaybackQuality(newQuality)
+        })
+    }
+}
diff --git a/plugins/quality-changer/templates/qualitySettingsTemplate.html b/plugins/quality-changer/templates/qualitySettingsTemplate.html
new file mode 100644
index 00000000..64c012fe
--- /dev/null
+++ b/plugins/quality-changer/templates/qualitySettingsTemplate.html
@@ -0,0 +1,13 @@
+<tp-yt-paper-icon-button class="player-quality-button style-scope ytmusic-player" icon="yt-icons:settings"
+    title="Open player quality changer" aria-label="Open player quality changer" role="button" tabindex="0" aria-disabled="false">
+    <tp-yt-iron-icon id="icon" class="style-scope tp-yt-paper-icon-button"><svg viewBox="0 0 24 24"
+            preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon"
+            style="pointer-events: none; display: block; width: 100%; height: 100%;">
+            <g class="style-scope yt-icon">
+                <path
+                    d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.1-1.65c.2-.15.25-.42.13-.64l-2-3.46c-.12-.22-.4-.3-.6-.22l-2.5 1c-.52-.4-1.08-.73-1.7-.98l-.37-2.65c-.06-.24-.27-.42-.5-.42h-4c-.27 0-.48.18-.5.42l-.4 2.65c-.6.25-1.17.6-1.7.98l-2.48-1c-.23-.1-.5 0-.6.22l-2 3.46c-.14.22-.08.5.1.64l2.12 1.65c-.04.32-.07.65-.07.98s.02.66.06.98l-2.1 1.65c-.2.15-.25.42-.13.64l2 3.46c.12.22.4.3.6.22l2.5-1c.52.4 1.08.73 1.7.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.6-.25 1.17-.6 1.7-.98l2.48 1c.23.1.5 0 .6-.22l2-3.46c.13-.22.08-.5-.1-.64l-2.12-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    class="style-scope yt-icon"></path>
+            </g>
+        </svg>
+    </tp-yt-iron-icon>
+</tp-yt-paper-icon-button>
\ No newline at end of file
diff --git a/preload.js b/preload.js
index 5a09c845..67ae8f7c 100644
--- a/preload.js
+++ b/preload.js
@@ -10,6 +10,8 @@ const setupSongInfo = require("./providers/song-info-front");
 
 const plugins = config.plugins.getEnabled();
 
+let api;
+
 plugins.forEach(([plugin, options]) => {
 	const preloadPath = path.join(__dirname, "plugins", plugin, "preload.js");
 	fileExists(preloadPath, () => {
@@ -38,6 +40,9 @@ document.addEventListener("DOMContentLoaded", () => {
 		});
 	});
 
+	// wait for complete load of youtube api
+	listenForApiLoad();
+
 	// inject song-info provider
 	setupSongInfo();
 
@@ -51,3 +56,25 @@ document.addEventListener("DOMContentLoaded", () => {
 	global.reload = () =>
 		remote.getCurrentWindow().webContents.loadURL(config.get("url"));
 });
+
+function listenForApiLoad() {
+	api = document.querySelector('#movie_player');
+	if (api) {
+		onApiLoaded();
+		return;
+	}
+
+	const observer = new MutationObserver(() => {
+		api = document.querySelector('#movie_player');
+		if (api) {
+			observer.disconnect();
+			onApiLoaded();
+		}
+	})
+
+	observer.observe(document.documentElement, { childList: true, subtree: true });
+}
+
+function onApiLoaded() {
+	document.dispatchEvent(new CustomEvent('apiLoaded', { detail: api }));
+}