diff --git a/package.json b/package.json
index d1831b13ee..88a361d8ba 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,7 @@
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/playmenu.js",
           "src/components/prompt/prompt.js",
+          "src/components/quickConnectSettings/quickConnectSettings.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
           "src/components/search/searchfields.js",
@@ -178,6 +179,7 @@
           "src/controllers/dashboard/metadatanfo.js",
           "src/controllers/dashboard/networking.js",
           "src/controllers/dashboard/playback.js",
+          "src/controllers/dashboard/quickconnect.js",
           "src/controllers/dashboard/plugins/repositories/index.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtask.js",
           "src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
@@ -204,6 +206,7 @@
           "src/controllers/user/menu/index.js",
           "src/controllers/user/playback/index.js",
           "src/controllers/user/profile/index.js",
+          "src/controllers/user/quickConnect/index.js",
           "src/controllers/user/subtitles/index.js",
           "src/controllers/user/subtitles/index.js",
           "src/controllers/wizard/finish/index.js",
diff --git a/src/components/quickConnectSettings/quickConnectSettings.js b/src/components/quickConnectSettings/quickConnectSettings.js
index 45bfe815cc..35f051a121 100644
--- a/src/components/quickConnectSettings/quickConnectSettings.js
+++ b/src/components/quickConnectSettings/quickConnectSettings.js
@@ -1,115 +1,64 @@
-define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager) {
-    "use strict";
+import globalize from 'globalize';
+import toast from 'toast';
 
-    function authorizeRequest(event) {
-        let lookup = event.data.lookup;
-        let url = ApiClient.getUrl("/QuickConnect/Authorize");
+export class QuickConnectSettings {
+    constructor() { }
+
+    authorize(code) {
+        let url = ApiClient.getUrl('/QuickConnect/Authorize');
         ApiClient.ajax({
-            type: "POST",
+            type: 'POST',
             url: url,
             data: {
-                "Lookup": lookup
+                'Code': code
             }
-        }, true);
-
-        require(["toast"], function (toast) {
-            toast("Request authorized");
+        }, true).then(() => {
+            require(['toast'], function (toast) {
+                toast(globalize.translate('QuickConnectAuthorizeSuccess'));
+            });
+        }).catch(() => {
+            require(['toast'], function (toast) {
+                toast(globalize.translate('QuickConnectAuthorizeFail'));
+            });
         });
 
         // prevent bubbling
         return false;
     }
 
-    QuickConnectSettings.prototype.list = function(argPage) {
-        ApiClient.getJSON("/QuickConnect/List").then(json => {
-            let found = false;
-            let elem = argPage.querySelector('#quickConnectIncoming');
-            elem.innerText = globalize.translate('QuickConnectNoPending');
-
-            for (let i = 0; i < json.length; i++) {
-                if (!found) {
-                    elem.innerHTML = "";
-                    found = true;
-                }
-
-                let current = json[i];
-
-                let html = '<div class="listItem listItem-border" id="div' + current.Lookup + '"><div class="listItemBody three-line">';
-                html += '<div class="listItemBodyText"><code style="font-size:large">' + current.Code + '</code></div>';
-                html += '<div class="listItemBodyText secondary">' + current.FriendlyName + '</div>';
-                html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
-
-                if (!current.Authenticated) {
-                    html += '<a style="color:rgb(15,150,255)" href="#" id="qc' + current.Lookup + '">' + globalize.translate('Authorize') + '</a>';
-                }
-
-                html += '</div></div></div>';
-                elem.innerHTML += html;
-
-                $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
-                $("#div" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
-            }
-
-            return true;
-        }).catch((e) => {
-            console.error("Unable to get quick connect login requests. error:", e);
-        });
-    };
-
-    QuickConnectSettings.prototype.activate = function() {
-        let url = ApiClient.getUrl("/QuickConnect/Activate");
-        ApiClient.ajax({
-            type: "POST",
+    activate() {
+        let url = ApiClient.getUrl('/QuickConnect/Activate');
+        return ApiClient.ajax({
+            type: 'POST',
             url: url,
-            contentType: "application/json",
-            dataType: "json"
+            contentType: 'application/json',
+            dataType: 'json'
         }).then((json) => {
             let message = json.Error;
 
-            if (message && message !== "") {
-                console.error("Error activating quick connect. Error: ", json.Error);
+            if (message && message !== '') {
+                console.error('Error activating quick connect. Error: ', json.Error);
 
                 Dashboard.alert({
-                    title: "Unable to activate quick connect",
+                    title: 'Unable to activate quick connect',
                     message: message
                 });
 
                 return false;
             }
 
-            require(["toast"], function (toast) {
-                toast(globalize.translate("QuickConnectActivationSuccessful"));
-            });
+            toast(globalize.translate('QuickConnectActivationSuccessful'));
 
             return true;
         }).catch((e) => {
-            console.error("Error activating quick connect. Error:", e);
+            console.error('Error activating quick connect. Error:', e);
             throw e;
         });
-    };
-
-    function QuickConnectSettings(options) {
-        this.options = options;
     }
 
-    QuickConnectSettings.prototype.loadData = function () {
-        this.options.interval = setInterval(this.list, 5000, this.options.page);
-        this.list(this.options.page);
-    };
-
-    QuickConnectSettings.prototype.submit = function () {
+    submit() {
         return false;
-    };
+    }
+}
 
-    QuickConnectSettings.prototype.destroy = function () {
-        console.debug("clearing refresh interval", this.options.interval);
-        clearInterval(this.options.interval);
-        this.options = null;
-    };
-
-    QuickConnectSettings.prototype.interval = function (interval) {
-        this.options.interval = interval;
-    };
-
-    return QuickConnectSettings;
-});
+export default QuickConnectSettings;
diff --git a/src/controllers/dashboard/quickconnect.js b/src/controllers/dashboard/quickconnect.js
new file mode 100644
index 0000000000..22f4781b7d
--- /dev/null
+++ b/src/controllers/dashboard/quickconnect.js
@@ -0,0 +1,62 @@
+import loading from 'loading';
+
+/* eslint-disable indent */
+
+    let page;
+    export default function(view) {
+        view.addEventListener('viewshow', function () {
+            page = this;
+            loading.show();
+            page.querySelector('#btnQuickConnectSubmit').onclick = onSubmit;
+            updatePage();
+        });
+    }
+
+    function loadPage(status) {
+        let available = status === 'Available' || status === 'Active';
+
+        page.querySelector('#quickConnectStatus').textContent = status.toLocaleLowerCase();
+        page.querySelector('#chkQuickConnectAvailable').checked = available;
+
+        loading.hide();
+    }
+
+    function onSubmit() {
+        loading.show();
+
+        let newStatus = page.querySelector('#chkQuickConnectAvailable').checked ? 'Available' : 'Unavailable';
+
+        let url = ApiClient.getUrl('/QuickConnect/Available');
+
+        ApiClient.ajax({
+            type: 'POST',
+            data: {
+                'Status': newStatus
+            },
+            url: url
+        }, true).then(() => {
+            require(['toast'], function (toast) {
+                toast('Settings saved');
+            });
+
+            setTimeout(updatePage, 500);
+
+            return true;
+        }).catch((e) => {
+            console.error('Unable to set quick connect status. error:', e);
+        });
+
+        loading.hide();
+        return false;
+    }
+
+    function updatePage() {
+        ApiClient.getQuickConnect('Status').then((response) => {
+            loadPage(response);
+            return true;
+        }).catch((e) => {
+            console.error('Unable to get quick connect status. error:', e);
+        });
+    }
+
+/* eslint-enable indent */
diff --git a/src/controllers/quickConnect.js b/src/controllers/quickConnect.js
deleted file mode 100644
index 93b74a1b52..0000000000
--- a/src/controllers/quickConnect.js
+++ /dev/null
@@ -1,61 +0,0 @@
-define(["jQuery", "loading", "fnchecked"], function ($, loading) {
-    "use strict";
-
-    let page;
-    function loadPage(status) {
-        let available = status === "Available" || status === "Active";
-
-        page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase();
-        page.querySelector("#chkQuickConnectAvailable").checked = available;
-
-        loading.hide();
-    }
-
-    function onSubmit() {
-        loading.show();
-
-        let newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable";
-
-        let url = ApiClient.getUrl("/QuickConnect/Available");
-
-        ApiClient.ajax({
-            type: "POST",
-            data: {
-                "Status": newStatus
-            },
-            url: url
-        }, true).then(() => {
-            require(["toast"], function (toast) {
-                toast("Settings saved");
-            });
-
-            setTimeout(updatePage, 500);
-
-            return true;
-        }).catch((e) => {
-            console.error("Unable to set quick connect status. error:", e);
-        });
-
-        loading.hide();
-        return false;
-    }
-
-    function updatePage() {
-        let promise1 = ApiClient.getQuickConnect("Status");
-        Promise.all([promise1]).then((responses) => {
-            loadPage(responses[0]);
-            return true;
-        }).catch((e) => {
-            console.error("Unable to get quick connect status. error:", e);
-        });
-    }
-
-    $(document).on("pageshow", "#quickConnectPage", function () {
-        loading.show();
-        page = this;
-
-        page.querySelector("#btnQuickConnectSubmit").onclick = onSubmit;
-
-        updatePage();
-    });
-});
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index cdccdd5fb4..b1fdf1bc58 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -163,11 +163,7 @@ import 'emby-checkbox';
             apiClient.getJSON(url)
                 .then(json => {
                     if (!json.Secret || !json.Code) {
-                        Dashboard.alert({
-                            message: json.Error,
-                            title: 'Error'
-                        });
-
+                        console.error('Malformed quick connect response', json);
                         return false;
                     }
 
@@ -215,10 +211,17 @@ import 'emby-checkbox';
 
                     return true;
                 }).catch((e) => {
-                    console.error('Unable to initiate quick connect login request. Error:', e);
+                    Dashboard.alert({
+                        message: Globalize.translate('QuickConnectNotActive'),
+                        title: 'Error'
+                    });
+
+                    console.error('Quick connect error: ', e);
+
+                    return false;
                 });
         }
-      
+
         view.querySelector('#divUsers').addEventListener('click', function (e) {
             const card = dom.parentWithClass(e.target, 'card');
             const cardContent = card ? card.querySelector('.cardContent') : null;
diff --git a/src/controllers/user/menu/index.js b/src/controllers/user/menu/index.js
index 73e7012f19..6d0f5f8021 100644
--- a/src/controllers/user/menu/index.js
+++ b/src/controllers/user/menu/index.js
@@ -27,7 +27,7 @@ export default function (view, params) {
         page.querySelector('.lnkHomePreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
         page.querySelector('.lnkPlaybackPreferences').setAttribute('href', 'mypreferencesplayback.html?userId=' + userId);
         page.querySelector('.lnkSubtitlePreferences').setAttribute('href', 'mypreferencessubtitles.html?userId=' + userId);
-        page.querySelector('.lnkQuickConnectPreferences').setAttribute('href', 'myPreferencesQuickConnect.html?userId=' + userId);
+        page.querySelector('.lnkQuickConnectPreferences').setAttribute('href', 'mypreferencesquickconnect.html');
 
         if (window.NativeShell && window.NativeShell.AppHost.supports('clientsettings')) {
             page.querySelector('.clientSettings').classList.remove('hide');
diff --git a/src/controllers/user/quickConnect.js b/src/controllers/user/quickConnect.js
deleted file mode 100644
index bee0c1b817..0000000000
--- a/src/controllers/user/quickConnect.js
+++ /dev/null
@@ -1,53 +0,0 @@
-define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (QuickConnectSettings, dom, globalize, loading, userSettings, autoFocuser) {
-    "use strict";
-
-    return function (view) {
-        let quickConnectSettingsInstance = null;
-
-        view.addEventListener("viewshow", function () {
-            quickConnectSettingsInstance = new QuickConnectSettings({
-                page: view,
-                interval: 0
-            });
-
-            view.querySelector("#btnQuickConnectActivate").addEventListener("click", () => {
-                quickConnectSettingsInstance.activate(quickConnectSettingsInstance);
-            });
-
-            quickConnectSettingsInstance.loadData();
-
-            ApiClient.getQuickConnect("Status").then((status) => {
-                let btn = view.querySelector("#btnQuickConnectActivate");
-
-                if (status === "Unavailable") {
-                    btn.textContent = globalize.translate("QuickConnectNotAvailable");
-                    btn.disabled = true;
-                    return false;
-                } else if (status === "Available") {
-                    return false;
-                }
-
-                btn.style.display = "none";
-                return true;
-            }).catch((e) => {
-                throw e;
-            });
-        });
-        view.addEventListener("viewbeforehide", function () {
-            if (quickConnectSettingsInstance) {
-                quickConnectSettingsInstance.submit();
-            }
-            onDestroy();
-        });
-        view.addEventListener("viewdestroy", function () {
-            onDestroy();
-        });
-
-        function onDestroy() {
-            if (quickConnectSettingsInstance) {
-                quickConnectSettingsInstance.destroy();
-                quickConnectSettingsInstance = null;
-            }
-        }
-    };
-});
diff --git a/src/controllers/user/quickConnect/index.html b/src/controllers/user/quickConnect/index.html
new file mode 100644
index 0000000000..5f698a4a6b
--- /dev/null
+++ b/src/controllers/user/quickConnect/index.html
@@ -0,0 +1,17 @@
+<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true" style="margin: 0 auto; max-width: 54em">
+    <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
+        <span>${ButtonActivate}</span>
+    </button>
+
+    <form class="quickConnectSettingsContainer">
+        <div style="margin-bottom: 1em">
+            ${QuickConnectDescription}
+        </div>
+        <div class="inputContainer">
+            <input is="emby-input" type="number" min="0" max="999999" required id="txtQuickConnectCode" label="${LabelQuickConnectCode}" autocomplete="off" />
+        </div>
+        <button id="btnQuickConnectAuthorize" is="emby-button" type="submit" class="raised button-submit block">
+            <span>${Authorize}</span>
+        </button>
+    </form>
+</div>
diff --git a/src/controllers/user/quickConnect/index.js b/src/controllers/user/quickConnect/index.js
new file mode 100644
index 0000000000..80543a0b58
--- /dev/null
+++ b/src/controllers/user/quickConnect/index.js
@@ -0,0 +1,78 @@
+import QuickConnectSettings from 'quickConnectSettings';
+import globalize from 'globalize';
+import toast from 'toast';
+
+export default function (view) {
+    let quickConnectSettingsInstance = null;
+
+    view.addEventListener('viewshow', function () {
+        let codeElement = view.querySelector('#txtQuickConnectCode');
+
+        quickConnectSettingsInstance = new QuickConnectSettings({
+            page: view,
+            interval: 0
+        });
+
+        view.querySelector('#btnQuickConnectActivate').addEventListener('click', () => {
+            quickConnectSettingsInstance.activate(quickConnectSettingsInstance).then(() => {
+                renderPage();
+            });
+        });
+
+        view.querySelector('#btnQuickConnectAuthorize').addEventListener('click', () => {
+            if (!codeElement.validity.valid) {
+                toast(globalize.translate('QuickConnectInvalidCode'));
+
+                return;
+            }
+
+            let code = codeElement.value;
+            quickConnectSettingsInstance.authorize(code);
+        });
+
+        renderPage();
+    });
+    view.addEventListener('viewbeforehide', function () {
+        if (quickConnectSettingsInstance) {
+            quickConnectSettingsInstance.submit();
+        }
+        onDestroy();
+    });
+    view.addEventListener('viewdestroy', function () {
+        onDestroy();
+    });
+
+    function onDestroy() {
+        if (quickConnectSettingsInstance) {
+            quickConnectSettingsInstance.destroy();
+            quickConnectSettingsInstance = null;
+        }
+    }
+
+    function renderPage(forceActive = false) {
+        ApiClient.getQuickConnect('Status').then((status) => {
+            let btn = view.querySelector('#btnQuickConnectActivate');
+            let container = view.querySelector('.quickConnectSettingsContainer');
+
+            // The activation button should only be visible when quick connect is unavailable (with the text replaced with an error) or when it is available (so it can be activated)
+            // The authorization container is only usable when quick connect is active, so it should be hidden otherwise
+            container.style.display = 'none';
+
+            if (status === 'Unavailable') {
+                btn.textContent = globalize.translate('QuickConnectNotAvailable');
+                btn.disabled = true;
+                btn.classList.remove('button-submit');
+                btn.classList.add('button');
+            } else if (status === 'Active' || forceActive) {
+                container.style.display = '';
+                btn.style.display = 'none';
+            }
+
+            return true;
+        }).catch((e) => {
+            throw e;
+        });
+    }
+
+    renderPage();
+}
diff --git a/src/myPreferencesQuickConnect.html b/src/myPreferencesQuickConnect.html
deleted file mode 100644
index 4f1f9febab..0000000000
--- a/src/myPreferencesQuickConnect.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true">
-    <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block">
-        <span>${ButtonActivate}</span>
-    </button>
-
-    <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
-        <div id="quickConnectIncoming" class="paperList">
-            <div>${MessagePleaseWait}</div>
-        </ul>
-    </div>
-</div>
diff --git a/src/quickConnect.html b/src/quickconnect.html
similarity index 89%
rename from src/quickConnect.html
rename to src/quickconnect.html
index dff74eb836..671bb88d77 100644
--- a/src/quickConnect.html
+++ b/src/quickconnect.html
@@ -1,6 +1,6 @@
 <div id="quickConnectPage" data-role="page" class="page type-interior advancedConfigurationPage">
-    <div>
-        <div class="content-primary">
+    <div class="content-primary">
+        <form class="quickConnectSettings">
             <div class="verticalSection">
                 <div class="sectionTitleContainer flex align-items-center">
                     <h2 class="sectionTitle">${QuickConnect}</h2>
@@ -19,6 +19,6 @@
             <button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">
                 <span>${ButtonSave}</span>
             </button>
-        </div>
+        </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index 3472d66496..ec623a485c 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -94,10 +94,11 @@ define([
         controller: 'user/home/index'
     });
     defineRoute({
-        path: '/myPreferencesQuickConnect.html',
+        alias: '/mypreferencesquickconnect.html',
+        path: '/controllers/user/quickConnect/index.html',
         autoFocus: false,
         transition: 'fade',
-        controller: 'user/quickConnect'
+        controller: 'user/quickConnect/index'
     });
     defineRoute({
         alias: '/mypreferencesplayback.html',
@@ -145,10 +146,10 @@ define([
         controller: 'dashboard/devices/device'
     });
     defineRoute({
-        path: '/quickConnect.html',
+        path: '/quickconnect.html',
         autoFocus: false,
         roles: 'admin',
-        controller: "quickConnect"
+        controller: 'dashboard/quickconnect'
     });
     defineRoute({
         path: '/dlnaprofile.html',
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 57a025d8b7..17e4662d2a 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -48,7 +48,7 @@
     "AuthProviderHelp": "Select an Authentication Provider to be used to authenticate this user's password.",
     "Auto": "Auto",
     "AutoBasedOnLanguageSetting": "Auto (based on language setting)",
-    "Authorize": "authorize",
+    "Authorize": "Authorize",
     "Backdrop": "Backdrop",
     "Backdrops": "Backdrops",
     "Banner": "Banner",
@@ -816,6 +816,7 @@
     "LabelPublicHttpPortHelp": "The public port number that should be mapped to the local HTTP port.",
     "LabelPublicHttpsPort": "Public HTTPS port number:",
     "LabelPublicHttpsPortHelp": "The public port number that should be mapped to the local HTTPS port.",
+    "LabelQuickConnectCode": "Quick connect code:",
     "LabelReadHowYouCanContribute": "Learn how you can contribute.",
     "LabelReasonForTranscoding": "Reason for transcoding:",
     "LabelRecord": "Record:",
@@ -1322,8 +1323,12 @@
     "QuickConnect": "Quick Connect",
     "QuickConnectActivationSuccessful": "Successfully activated",
     "QuickConnectAuthorizeCode": "Authorize request {0} to continue",
-    "QuickConnectNoPending": "No pending login requests",
-    "QuickConnectNotAvailable": "Quick connect is not available on this server",
+    "QuickConnectAuthorizeSuccess": "Request authorized",
+    "QuickConnectAuthorizeFail": "Unknown quick connect code",
+    "QuickConnectDescription": "To sign in with quick connect, select the Quick Connect button on the device you are logging in from and enter the displayed code below.",
+    "QuickConnectInvalidCode": "Invalid quick connect code",
+    "QuickConnectNotAvailable": "Ask your server administrator to enable quick connect",
+    "QuickConnectNotActive": "Quick connect is not active on this server",
     "Raised": "Raised",
     "Rate": "Rate",
     "RecentlyWatched": "Recently watched",