diff --git a/package.json b/package.json
index 7f93d6a71c7..007db831205 100644
--- a/package.json
+++ b/package.json
@@ -4,14 +4,16 @@
   "scripts": {
     "build": "vite build --debug",
     "build-clean": "vite build --debug --emptyOutDir",
-    "dev": "vite build --watch",
+    "dev": "vite",
     "serve": "serve ./tests/fixtures/http --no-port-switching"
   },
   "type": "module",
   "dependencies": {
     "@lizardbyte/shared-web": "2025.922.181114",
+    "@popperjs/core": "2.11.8",
     "vue": "3.5.22",
-    "vue-i18n": "11.1.12"
+    "vue-i18n": "11.1.12",
+    "vue-router": "4.5.1"
   },
   "devDependencies": {
     "@codecov/vite-plugin": "1.9.1",
diff --git a/src/confighttp.cpp b/src/confighttp.cpp
index 5fad47bbd33..acb7bc2e701 100644
--- a/src/confighttp.cpp
+++ b/src/confighttp.cpp
@@ -147,10 +147,19 @@ namespace confighttp {
 
     // If credentials are shown, redirect the user to a /welcome page
     if (config::sunshine.username.empty()) {
+      if (request->path == "/welcome") {
+        return true;
+      }
       send_redirect(response, request, "/welcome");
       return false;
     }
 
+    // Redirect after /welcome to /
+    if (request->path == "/welcome") {
+      send_redirect(response, request, "/");
+      return false;
+    }
+
     auto fg = util::fail_guard([&]() {
       send_unauthorized(response, request);
     });
@@ -259,7 +268,6 @@ namespace confighttp {
    * @brief Get the index page.
    * @param response The HTTP response object.
    * @param request The HTTP request object.
-   * @todo combine these functions into a single function that accepts the page, i.e "index", "pin", "apps"
    */
   void getIndexPage(resp_https_t response, req_https_t request) {
     if (!authenticate(response, request)) {
@@ -267,211 +275,80 @@ namespace confighttp {
     }
 
     print_req(request);
-
-    std::string content = file_handler::read_file(WEB_DIR "index.html");
-    SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "text/html; charset=utf-8");
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    response->write(content, headers);
-  }
-
-  /**
-   * @brief Get the PIN page.
-   * @param response The HTTP response object.
-   * @param request The HTTP request object.
-   */
-  void getPinPage(resp_https_t response, req_https_t request) {
-    if (!authenticate(response, request)) {
-      return;
-    }
-
-    print_req(request);
-
-    std::string content = file_handler::read_file(WEB_DIR "pin.html");
-    SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "text/html; charset=utf-8");
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    response->write(content, headers);
-  }
-
-  /**
-   * @brief Get the apps page.
-   * @param response The HTTP response object.
-   * @param request The HTTP request object.
-   */
-  void getAppsPage(resp_https_t response, req_https_t request) {
-    if (!authenticate(response, request)) {
-      return;
+    if (request->path.starts_with("/api")) {
+      return not_found(response, request);
     }
-
-    print_req(request);
-
-    std::string content = file_handler::read_file(WEB_DIR "apps.html");
+    std::string content = file_handler::read_file(WEB_DIR "index.html");
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "text/html; charset=utf-8");
     headers.emplace("X-Frame-Options", "DENY");
     headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    headers.emplace("Access-Control-Allow-Origin", "https://images.igdb.com/");
     response->write(content, headers);
   }
 
   /**
-   * @brief Get the clients page.
-   * @param response The HTTP response object.
-   * @param request The HTTP request object.
+   * @brief Check if a path is a child of another path.
+   * @param base The base path.
+   * @param query The path to check.
+   * @return True if the path is a child of the base path, false otherwise.
    */
-  void getClientsPage(resp_https_t response, req_https_t request) {
-    if (!authenticate(response, request)) {
-      return;
-    }
-
-    print_req(request);
-
-    std::string content = file_handler::read_file(WEB_DIR "clients.html");
-    SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "text/html; charset=utf-8");
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    response->write(content, headers);
+  bool isChildPath(fs::path const &base, fs::path const &query) {
+    auto relPath = fs::relative(base, query);
+    return *(relPath.begin()) != fs::path("..");
   }
 
   /**
-   * @brief Get the configuration page.
+   * @brief Get an asset from the node_modules directory.
    * @param response The HTTP response object.
    * @param request The HTTP request object.
    */
-  void getConfigPage(resp_https_t response, req_https_t request) {
-    if (!authenticate(response, request)) {
-      return;
-    }
-
+  void getNodeModules(resp_https_t response, req_https_t request) {
     print_req(request);
+    fs::path webDirPath(WEB_DIR);
+    fs::path nodeModulesPath(webDirPath / "assets");
 
-    std::string content = file_handler::read_file(WEB_DIR "config.html");
-    SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "text/html; charset=utf-8");
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    response->write(content, headers);
-  }
+    // .relative_path is needed to shed any leading slash that might exist in the request path
+    auto filePath = fs::weakly_canonical(webDirPath / fs::path(request->path).relative_path());
 
-  /**
-   * @brief Get the password page.
-   * @param response The HTTP response object.
-   * @param request The HTTP request object.
-   */
-  void getPasswordPage(resp_https_t response, req_https_t request) {
-    if (!authenticate(response, request)) {
+    // Don't do anything if file does not exist or is outside the assets directory
+    if (!isChildPath(filePath, nodeModulesPath)) {
+      BOOST_LOG(warning) << "Someone requested a path " << filePath << " that is outside the assets folder";
+      bad_request(response, request);
       return;
     }
-
-    print_req(request);
-
-    std::string content = file_handler::read_file(WEB_DIR "password.html");
-    SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "text/html; charset=utf-8");
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    response->write(content, headers);
-  }
-
-  /**
-   * @brief Get the welcome page.
-   * @param response The HTTP response object.
-   * @param request The HTTP request object.
-   */
-  void getWelcomePage(resp_https_t response, req_https_t request) {
-    print_req(request);
-    if (!config::sunshine.username.empty()) {
-      send_redirect(response, request, "/");
+    if (!fs::exists(filePath)) {
+      not_found(response, request);
       return;
     }
-    std::string content = file_handler::read_file(WEB_DIR "welcome.html");
-    SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "text/html; charset=utf-8");
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    response->write(content, headers);
-  }
 
-  /**
-   * @brief Get the troubleshooting page.
-   * @param response The HTTP response object.
-   * @param request The HTTP request object.
-   */
-  void getTroubleshootingPage(resp_https_t response, req_https_t request) {
-    if (!authenticate(response, request)) {
+    auto relPath = fs::relative(filePath, webDirPath);
+    // get the mime type from the file extension mime_types map
+    // remove the leading period from the extension
+    auto mimeType = mime_types.find(relPath.extension().string().substr(1));
+    // check if the extension is in the map at the x position
+    if (mimeType == mime_types.end()) {
+      bad_request(response, request);
       return;
     }
 
-    print_req(request);
-
-    std::string content = file_handler::read_file(WEB_DIR "troubleshooting.html");
-    SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "text/html; charset=utf-8");
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    response->write(content, headers);
-  }
-
-  /**
-   * @brief Get the favicon image.
-   * @param response The HTTP response object.
-   * @param request The HTTP request object.
-   * @todo combine function with getSunshineLogoImage and possibly getNodeModules
-   * @todo use mime_types map
-   */
-  void getFaviconImage(resp_https_t response, req_https_t request) {
-    print_req(request);
-
-    std::ifstream in(WEB_DIR "images/sunshine.ico", std::ios::binary);
-    SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "image/x-icon");
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
-    response->write(SimpleWeb::StatusCode::success_ok, in, headers);
-  }
-
-  /**
-   * @brief Get the Sunshine logo image.
-   * @param response The HTTP response object.
-   * @param request The HTTP request object.
-   * @todo combine function with getFaviconImage and possibly getNodeModules
-   * @todo use mime_types map
-   */
-  void getSunshineLogoImage(resp_https_t response, req_https_t request) {
-    print_req(request);
-
-    std::ifstream in(WEB_DIR "images/logo-sunshine-45.png", std::ios::binary);
+    // if it is, set the content type to the mime type
     SimpleWeb::CaseInsensitiveMultimap headers;
-    headers.emplace("Content-Type", "image/png");
+    headers.emplace("Content-Type", mimeType->second);
     headers.emplace("X-Frame-Options", "DENY");
     headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
+    std::ifstream in(filePath.string(), std::ios::binary);
     response->write(SimpleWeb::StatusCode::success_ok, in, headers);
   }
 
-  /**
-   * @brief Check if a path is a child of another path.
-   * @param base The base path.
-   * @param query The path to check.
-   * @return True if the path is a child of the base path, false otherwise.
-   */
-  bool isChildPath(fs::path const &base, fs::path const &query) {
-    auto relPath = fs::relative(base, query);
-    return *(relPath.begin()) != fs::path("..");
-  }
-
   /**
    * @brief Get an asset from the node_modules directory.
    * @param response The HTTP response object.
    * @param request The HTTP request object.
    */
-  void getNodeModules(resp_https_t response, req_https_t request) {
+  void getImages(resp_https_t response, req_https_t request) {
     print_req(request);
     fs::path webDirPath(WEB_DIR);
-    fs::path nodeModulesPath(webDirPath / "assets");
+    fs::path nodeModulesPath(webDirPath / "images");
 
     // .relative_path is needed to shed any leading slash that might exist in the request path
     auto filePath = fs::weakly_canonical(webDirPath / fs::path(request->path).relative_path());
@@ -500,8 +377,6 @@ namespace confighttp {
     // if it is, set the content type to the mime type
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", mimeType->second);
-    headers.emplace("X-Frame-Options", "DENY");
-    headers.emplace("Content-Security-Policy", "frame-ancestors 'none';");
     std::ifstream in(filePath.string(), std::ios::binary);
     response->write(SimpleWeb::StatusCode::success_ok, in, headers);
   }
@@ -1190,15 +1065,8 @@ namespace confighttp {
     server.default_resource["PUT"] = [](resp_https_t response, req_https_t request) {
       bad_request(response, request);
     };
-    server.default_resource["GET"] = not_found;
+    server.default_resource["GET"] = getIndexPage;
     server.resource["^/$"]["GET"] = getIndexPage;
-    server.resource["^/pin/?$"]["GET"] = getPinPage;
-    server.resource["^/apps/?$"]["GET"] = getAppsPage;
-    server.resource["^/clients/?$"]["GET"] = getClientsPage;
-    server.resource["^/config/?$"]["GET"] = getConfigPage;
-    server.resource["^/password/?$"]["GET"] = getPasswordPage;
-    server.resource["^/welcome/?$"]["GET"] = getWelcomePage;
-    server.resource["^/troubleshooting/?$"]["GET"] = getTroubleshootingPage;
     server.resource["^/api/pin$"]["POST"] = savePin;
     server.resource["^/api/apps$"]["GET"] = getApps;
     server.resource["^/api/logs$"]["GET"] = getLogs;
@@ -1215,9 +1083,8 @@ namespace confighttp {
     server.resource["^/api/clients/unpair$"]["POST"] = unpair;
     server.resource["^/api/apps/close$"]["POST"] = closeApp;
     server.resource["^/api/covers/upload$"]["POST"] = uploadCover;
-    server.resource["^/images/sunshine.ico$"]["GET"] = getFaviconImage;
-    server.resource["^/images/logo-sunshine-45.png$"]["GET"] = getSunshineLogoImage;
     server.resource["^/assets\\/.+$"]["GET"] = getNodeModules;
+    server.resource["^/images\\/.+$"]["GET"] = getImages;
     server.config.reuse_address = true;
     server.config.address = net::af_to_any_address_string(address_family);
     server.config.port = port_https;
diff --git a/src_assets/common/assets/web/Navbar.vue b/src_assets/common/assets/web/Navbar.vue
deleted file mode 100644
index 166398b9fa7..00000000000
--- a/src_assets/common/assets/web/Navbar.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <nav class="navbar navbar-light navbar-expand-lg navbar-background header">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="./" title="Sunshine">
-        <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
-      </a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-          <li class="nav-item">
-            <a class="nav-link" href="./"><i class="fas fa-fw fa-home"></i> {{ $t('navbar.home') }}</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./pin"><i class="fas fa-fw fa-unlock"></i> {{ $t('navbar.pin') }}</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./apps"><i class="fas fa-fw fa-stream"></i> {{ $t('navbar.applications') }}</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./config"><i class="fas fa-fw fa-cog"></i> {{ $t('navbar.configuration') }}</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./password"><i class="fas fa-fw fa-user-shield"></i> {{ $t('navbar.password') }}</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="./troubleshooting"><i class="fas fa-fw fa-info"></i> {{ $t('navbar.troubleshoot') }}</a>
-          </li>
-          <li class="nav-item">
-            <ThemeToggle/>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-</template>
-
-<script>
-import ThemeToggle from './ThemeToggle.vue'
-import { initDiscord } from '@lizardbyte/shared-web/src/js/discord.js'
-
-export default {
-  components: { ThemeToggle },
-  created() {
-    console.log("Header mounted!")
-  },
-  mounted() {
-    let el = document.querySelector("a[href='" + document.location.pathname + "']");
-    if (el) el.classList.add("active")
-    initDiscord();
-  }
-}
-</script>
-
-<style>
-.navbar-background {
-  background-color: #ffc400
-}
-
-.header .nav-link {
-  color: rgba(0, 0, 0, .65) !important;
-}
-
-.header .nav-link.active {
-  color: rgb(0, 0, 0) !important;
-  font-weight: 500;
-}
-
-.header .nav-link:hover {
-  color: rgb(0, 0, 0) !important;
-  font-weight: 500;
-}
-
-.header .navbar-toggler {
-  color: rgba(var(--bs-dark-rgb), .65) !important;
-  border: var(--bs-border-width) solid rgba(var(--bs-dark-rgb), 0.15) !important;
-}
-
-.header .navbar-toggler-icon {
-  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
-}
-
-.form-control::placeholder {
-  opacity: 0.5;
-}
-</style>
diff --git a/src_assets/common/assets/web/index.html b/src_assets/common/assets/web/index.html
index 4a8660af376..2876e01a29c 100644
--- a/src_assets/common/assets/web/index.html
+++ b/src_assets/common/assets/web/index.html
@@ -1,157 +1,15 @@
 <!DOCTYPE html>
 <html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <h1 class="my-4">{{ $t('index.welcome') }}</h1>
-    <p>{{ $t('index.description') }}</p>
-    <div class="alert alert-danger" v-if="fancyLogs.find(x => x.level === 'Fatal')">
-      <div style="line-height: 32px;">
-        <i class="fas fa-circle-exclamation" style="font-size: 32px;margin-right: 0.25em;"></i>
-        <p v-html="$t('index.startup_errors')"></p>
-        <br>
-      </div>
-      <ul>
-        <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
-      </ul>
-      <a class="btn btn-danger" href="./troubleshooting#logs">View Logs</a>
-    </div>
-    <!-- Version -->
-    <div class="card p-2 my-4">
-      <div class="card-body" v-if="version">
-        <h2>Version {{version.version}}</h2>
-        <br>
-        <div v-if="loading">
-          {{ $t('index.loading_latest') }}
-        </div>
-        <div class="alert alert-success" v-if="buildVersionIsDirty">
-          {{ $t('index.version_dirty') }} 🌇
-        </div>
-        <div class="alert alert-info" v-if="installedVersionNotStable">
-          {{ $t('index.installed_version_not_stable') }}
-        </div>
-        <div v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
-          <div class="alert alert-success">
-            {{ $t('index.version_latest') }}
-          </div>
-        </div>
-        <div v-if="notifyPreReleases && preReleaseBuildAvailable">
-          <div class="alert alert-warning">
-            <div class="d-flex justify-content-between">
-              <div class="my-2">
-                <p>{{ $t('index.new_pre_release') }}</p>
-              </div>
-              <a class="btn btn-success m-1" :href="preReleaseVersion.release.html_url" target="_blank">{{ $t('index.download') }}</a>
-            </div>
-            <pre><b>{{preReleaseVersion.release.name}}</b></pre>
-            <pre>{{preReleaseVersion.release.body}}</pre>
-          </div>
-        </div>
-        <div v-if="stableBuildAvailable">
-          <div class="alert alert-warning">
-            <div class="d-flex justify-content-between">
-              <div class="my-2">
-                <p>{{ $t('index.new_stable') }}</p>
-              </div>
-              <a class="btn btn-success m-1" :href="githubVersion.release.html_url" target="_blank">{{ $t('index.download') }}</a>
-            </div>
-            <h3>{{githubVersion.release.name}}</h3>
-            <pre>{{githubVersion.release.body}}</pre>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Resources -->
-    <div class="my-4">
-      <Resource-Card></Resource-Card>
-    </div>
-  </div>
-</body>
-
-<script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import ResourceCard from './ResourceCard.vue'
-  import SunshineVersion from './sunshine_version'
-
-  console.log("Hello, Sunshine!")
-  let app = createApp({
-    components: {
-      Navbar,
-      ResourceCard
-    },
-    data() {
-      return {
-        version: null,
-        githubVersion: null,
-        notifyPreReleases: false,
-        preReleaseVersion: null,
-        loading: true,
-        logs: null,
-      }
-    },
-    async created() {
-      try {
-        let config = await fetch("./api/config").then((r) => r.json());
-        this.notifyPreReleases = config.notify_pre_releases;
-        this.version = new SunshineVersion(null, config.version);
-        console.log("Version: ", this.version.version)
-        this.githubVersion = new SunshineVersion(await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()), null);
-        console.log("GitHub Version: ", this.githubVersion.version)
-        this.preReleaseVersion = new SunshineVersion((await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease), null);
-        console.log("Pre-Release Version: ", this.preReleaseVersion.version)
-      } catch (e) {
-        console.error(e);
-      }
-      try {
-        this.logs = (await fetch("./api/logs").then(r => r.text()))
-      } catch (e) {
-        console.error(e);
-      }
-      this.loading = false;
-    },
-    computed: {
-      installedVersionNotStable() {
-        if (!this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.version.isGreater(this.githubVersion);
-      },
-      stableBuildAvailable() {
-        if (!this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.githubVersion.isGreater(this.version);
-      },
-      preReleaseBuildAvailable() {
-        if (!this.preReleaseVersion || !this.githubVersion || !this.version) {
-          return false;
-        }
-        return this.preReleaseVersion.isGreater(this.version) && this.preReleaseVersion.isGreater(this.githubVersion);
-      },
-      buildVersionIsDirty() {
-        return this.version.version?.split(".").length === 5 &&
-          this.version.version.indexOf("dirty") !== -1
-      },
-      /** Parse the text errors, calculating the text, the timestamp and the level */
-      fancyLogs() {
-        if (!this.logs) return [];
-        let regex = /(\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}]):\s/g;
-        let rawLogLines = (this.logs.split(regex)).splice(1);
-        let logLines = []
-        for (let i = 0; i < rawLogLines.length; i += 2) {
-          logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
-        }
-        return logLines;
-      }
-    }
-  });
-
-  initApp(app);
-</script>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sunshine</title>
+    <link rel="icon" type="image/x-icon" href="./images/sunshine.ico" />
+    <script type="module" src="/src/main.js"></script>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
deleted file mode 100644
index d16a5de156e..00000000000
--- a/src_assets/common/assets/web/pin.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div id="content" class="container">
-    <h1 class="my-4 text-center">{{ $t('pin.pin_pairing') }}</h1>
-    <form class="form d-flex flex-column align-items-center" id="form" @submit.prevent="registerDevice">
-      <div class="card flex-column d-flex p-4 mb-4">
-        <input type="text" pattern="\d*" :placeholder="`${$t('navbar.pin')}`" autofocus id="pin-input" class="form-control mt-2" required />
-        <input type="text" :placeholder="`${$t('pin.device_name')}`" id="name-input" class="form-control my-4" required />
-        <button class="btn btn-primary">{{ $t('pin.send') }}</button>
-      </div>
-      <div class="alert alert-warning">
-        <b>{{ $t('_common.warning') }}</b> {{ $t('pin.warning_msg') }}
-      </div>
-      <div id="status"></div>
-    </form>
-  </div>
-</body>
-
-<script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-
-  let app = createApp({
-    components: {
-      Navbar
-    },
-    inject: ['i18n'],
-    methods: {
-      registerDevice(e) {
-        let pin = document.querySelector("#pin-input").value;
-        let name = document.querySelector("#name-input").value;
-        document.querySelector("#status").innerHTML = "";
-        let b = JSON.stringify({pin: pin, name: name});
-        fetch("./api/pin", {
-          method: "POST", 
-          headers: {
-            'Content-Type': 'application/json'
-          }, 
-          body: b
-        })
-          .then((response) => response.json())
-          .then((response) => {
-            if (response.status === true) {
-              document.querySelector(
-                "#status"
-              ).innerHTML = `<div class="alert alert-success" role="alert">${this.i18n.t('pin.pair_success')}</div>`;
-              document.querySelector("#pin-input").value = "";
-              document.querySelector("#name-input").value = "";
-            } else {
-              document.querySelector(
-                "#status"
-              ).innerHTML = `<div class="alert alert-danger" role="alert">${this.i18n.t('pin.pair_failure')}</div>`;
-            }
-          });
-      }
-    }
-  });
-
-  initApp(app);
-</script>
diff --git a/src_assets/common/assets/web/public/assets/css/sunshine.css b/src_assets/common/assets/web/public/assets/css/sunshine.css
deleted file mode 100644
index 843600feebd..00000000000
--- a/src_assets/common/assets/web/public/assets/css/sunshine.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/* Hide pages while localization is loading */
-[v-cloak] {
-    display: none;
-}
-
-[data-bs-theme=dark] .element {
-    color: var(--bs-primary-text-emphasis);
-    background-color: var(--bs-primary-bg-subtle);
-}
-
-@media (prefers-color-scheme: dark) {
-    .element {
-        color: var(--bs-primary-text-emphasis);
-        background-color: var(--bs-primary-bg-subtle);
-    }
-}
diff --git a/src_assets/common/assets/web/src/App.vue b/src_assets/common/assets/web/src/App.vue
new file mode 100644
index 00000000000..0a463ef9346
--- /dev/null
+++ b/src_assets/common/assets/web/src/App.vue
@@ -0,0 +1,9 @@
+<script setup>
+import Navbar from "./components/Navbar.vue";
+</script>
+<template>
+  <div>
+    <Navbar v-if="!$route.meta.hideNavbar"></Navbar>
+    <RouterView :key="$route.fullPath" />
+  </div>
+</template>
diff --git a/src_assets/common/assets/web/src/assets/css/sunshine.css b/src_assets/common/assets/web/src/assets/css/sunshine.css
new file mode 100644
index 00000000000..1cebeda4bf2
--- /dev/null
+++ b/src_assets/common/assets/web/src/assets/css/sunshine.css
@@ -0,0 +1,107 @@
+/* Hide pages while localization is loading */
+[v-cloak] {
+    display: none;
+}
+
+[data-bs-theme=dark] .element {
+    color: var(--bs-primary-text-emphasis);
+    background-color: var(--bs-primary-bg-subtle);
+}
+
+@media (prefers-color-scheme: dark) {
+    .element {
+        color: var(--bs-primary-text-emphasis);
+        background-color: var(--bs-primary-bg-subtle);
+    }
+}
+
+.navbar-background {
+    background-color: #ffc400
+}
+
+.header .nav-link {
+    color: rgba(0, 0, 0, .65) !important;
+}
+
+.header .nav-link.active {
+    color: rgb(0, 0, 0) !important;
+}
+
+.header .nav-link:hover {
+    color: rgb(0, 0, 0) !important;
+}
+
+.header .navbar-toggler {
+    color: rgba(var(--bs-dark-rgb), .65) !important;
+    border: var(--bs-border-width) solid rgba(var(--bs-dark-rgb), 0.15) !important;
+}
+
+.header .navbar-toggler-icon {
+    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
+}
+
+.form-control::placeholder {
+    opacity: 0.5;
+}
+
+.precmd-head {
+    width: 200px;
+}
+
+.monospace {
+    font-family: monospace;
+}
+
+.cover-finder .cover-results {
+    max-height: 400px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.cover-finder .cover-results.busy * {
+    cursor: wait !important;
+    pointer-events: none;
+}
+
+.cover-container {
+    padding-top: 133.33%;
+    position: relative;
+}
+
+.cover-container.result {
+    cursor: pointer;
+}
+
+.spinner-border {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+.cover-container img {
+    display: block;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.config-page {
+    padding: 1em;
+    border: 1px solid #dee2e6;
+    border-top: none;
+}
+
+td {
+    padding: 0 0.5em;
+}
+
+.env-table td {
+    padding: 0.25em;
+    border-bottom: rgba(0, 0, 0, 0.25) 1px solid;
+    vertical-align: top;
+}
\ No newline at end of file
diff --git a/src_assets/common/assets/web/Checkbox.vue b/src_assets/common/assets/web/src/components/Checkbox.vue
similarity index 100%
rename from src_assets/common/assets/web/Checkbox.vue
rename to src_assets/common/assets/web/src/components/Checkbox.vue
diff --git a/src_assets/common/assets/web/src/components/Navbar.vue b/src_assets/common/assets/web/src/components/Navbar.vue
new file mode 100644
index 00000000000..0b4fd7e69a7
--- /dev/null
+++ b/src_assets/common/assets/web/src/components/Navbar.vue
@@ -0,0 +1,53 @@
+<template>
+  <nav class="navbar navbar-light navbar-expand-lg navbar-background header">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="./" title="Sunshine">
+        <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
+      </a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <router-link activeClass="active" class="nav-link" to="/"><i class="fas fa-fw fa-home"></i> {{ $t('navbar.home') }}</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link activeClass="active" class="nav-link" to="/pin"><i class="fas fa-fw fa-unlock"></i> {{ $t('navbar.pin') }}</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link activeClass="active" class="nav-link" to="/apps"><i class="fas fa-fw fa-stream"></i> {{ $t('navbar.applications') }}</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link activeClass="active" class="nav-link" to="/config"><i class="fas fa-fw fa-cog"></i> {{ $t('navbar.configuration') }}</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link activeClass="active" class="nav-link" to="/password"><i class="fas fa-fw fa-user-shield"></i> {{ $t('navbar.password') }}</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link activeClass="active" class="nav-link" to="/troubleshooting"><i class="fas fa-fw fa-info"></i> {{ $t('navbar.troubleshoot') }}</router-link>
+          </li>
+          <li class="nav-item">
+            <ThemeToggle/>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import ThemeToggle from './ThemeToggle.vue'
+import { initDiscord } from '@lizardbyte/shared-web/src/js/discord.js'
+
+export default {
+  components: { ThemeToggle },
+  created() {
+    console.log("Header mounted!")
+  },
+  mounted() {
+    initDiscord();
+  }
+}
+</script>
diff --git a/src_assets/common/assets/web/PlatformLayout.vue b/src_assets/common/assets/web/src/components/PlatformLayout.vue
similarity index 100%
rename from src_assets/common/assets/web/PlatformLayout.vue
rename to src_assets/common/assets/web/src/components/PlatformLayout.vue
diff --git a/src_assets/common/assets/web/ResourceCard.vue b/src_assets/common/assets/web/src/components/ResourceCard.vue
similarity index 100%
rename from src_assets/common/assets/web/ResourceCard.vue
rename to src_assets/common/assets/web/src/components/ResourceCard.vue
diff --git a/src_assets/common/assets/web/ThemeToggle.vue b/src_assets/common/assets/web/src/components/ThemeToggle.vue
similarity index 95%
rename from src_assets/common/assets/web/ThemeToggle.vue
rename to src_assets/common/assets/web/src/components/ThemeToggle.vue
index 7c34916adc9..13d71b5fe44 100644
--- a/src_assets/common/assets/web/ThemeToggle.vue
+++ b/src_assets/common/assets/web/src/components/ThemeToggle.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { loadAutoTheme, setupThemeToggleListener } from './theme'
+import { loadAutoTheme, setupThemeToggleListener } from '@/utils/theme.js'
 import { onMounted } from 'vue'
 
 onMounted(() => {
diff --git a/src_assets/common/assets/web/configs/tabs/Advanced.vue b/src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/Advanced.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/Advanced.vue
diff --git a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue b/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
similarity index 98%
rename from src_assets/common/assets/web/configs/tabs/AudioVideo.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
index 27f58365d70..9935a04c71a 100644
--- a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/AudioVideo.vue
@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from 'vue'
-import {$tp} from '../../platform-i18n'
+import {$tp} from '@/utils/platform-i18n.js'
 import PlatformLayout from '../../PlatformLayout.vue'
 import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
 import DisplayOutputSelector from './audiovideo/DisplayOutputSelector.vue'
diff --git a/src_assets/common/assets/web/configs/tabs/ContainerEncoders.vue b/src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/ContainerEncoders.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/ContainerEncoders.vue
diff --git a/src_assets/common/assets/web/configs/tabs/Files.vue b/src_assets/common/assets/web/src/components/configs/tabs/Files.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/Files.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/Files.vue
diff --git a/src_assets/common/assets/web/configs/tabs/General.vue b/src_assets/common/assets/web/src/components/configs/tabs/General.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/General.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/General.vue
diff --git a/src_assets/common/assets/web/configs/tabs/Inputs.vue b/src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/Inputs.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/Inputs.vue
diff --git a/src_assets/common/assets/web/configs/tabs/Network.vue b/src_assets/common/assets/web/src/components/configs/tabs/Network.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/Network.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/Network.vue
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
similarity index 96%
rename from src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
index 59b2a12a911..eb8e9b2201d 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/AdapterNameSelector.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { $tp } from '../../../platform-i18n'
+import { $tp } from '@/utils/platform-i18n.js'
 import PlatformLayout from '../../../PlatformLayout.vue'
 
 const props = defineProps([
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
similarity index 99%
rename from src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
index 4820aa04b8b..d03a838114a 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayDeviceOptions.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import PlatformLayout from '../../../PlatformLayout.vue'
-import Checkbox from "../../../Checkbox.vue";
+import Checkbox from '../../../Checkbox.vue'
 
 const props = defineProps({
   platform: String,
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue
similarity index 90%
rename from src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue
index 51b5b8c227c..17711458e03 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayModesSettings.vue
@@ -1,7 +1,5 @@
 <script setup>
 import { ref } from 'vue'
-import { $tp } from '../../../platform-i18n'
-import PlatformLayout from '../../../PlatformLayout.vue'
 
 const props = defineProps([
   'platform',
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayOutputSelector.vue b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
similarity index 97%
rename from src_assets/common/assets/web/configs/tabs/audiovideo/DisplayOutputSelector.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
index 3313266a307..5b98883b02b 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayOutputSelector.vue
+++ b/src_assets/common/assets/web/src/components/configs/tabs/audiovideo/DisplayOutputSelector.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { $tp } from '../../../platform-i18n'
+import { $tp } from '@/utils/platform-i18n.js'
 import PlatformLayout from '../../../PlatformLayout.vue'
 
 const props = defineProps([
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/AmdAmfEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/IntelQuickSyncEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/NvidiaNvencEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/SoftwareEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/SoftwareEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/SoftwareEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/VAAPIEncoder.vue
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue b/src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
similarity index 100%
rename from src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
rename to src_assets/common/assets/web/src/components/configs/tabs/encoders/VideotoolboxEncoder.vue
diff --git a/src_assets/common/assets/web/src/main.js b/src_assets/common/assets/web/src/main.js
new file mode 100644
index 00000000000..3019fa99619
--- /dev/null
+++ b/src_assets/common/assets/web/src/main.js
@@ -0,0 +1,11 @@
+import 'bootstrap/dist/css/bootstrap.min.css'
+import '@/assets/css/sunshine.css';
+import '@fortawesome/fontawesome-free/css/all.min.css'
+import { createApp } from "vue";
+import { initApp } from "./utils/init.js";
+import App from './App.vue'
+
+console.log("Hello, Sunshine!");
+let app = createApp(App);
+
+initApp(app);
diff --git a/src_assets/common/assets/web/init.js b/src_assets/common/assets/web/src/utils/init.js
similarity index 69%
rename from src_assets/common/assets/web/init.js
rename to src_assets/common/assets/web/src/utils/init.js
index 22b84df293e..d7c65d657d7 100644
--- a/src_assets/common/assets/web/init.js
+++ b/src_assets/common/assets/web/src/utils/init.js
@@ -1,5 +1,5 @@
 import i18n from './locale'
-
+import router from './router'
 // must import even if not implicitly using here
 // https://github.com/aurelia/skeleton-navigation/issues/894
 // https://discourse.aurelia.io/t/bootstrap-import-bootstrap-breaks-dropdown-menu-in-navbar/641/9
@@ -9,7 +9,13 @@ export function initApp(app, config) {
     //Wait for locale initialization, then render
     i18n().then(i18n => {
         app.use(i18n);
+        app.use(router);
         app.provide('i18n', i18n.global)
+        app.directive('dropdown-show', {
+            mounted: function (el, binding) {
+                el.addEventListener('show.bs.dropdown', binding.value);
+            }
+        });
         app.mount('#app');
         if (config) {
             config(app)
diff --git a/src_assets/common/assets/web/locale.js b/src_assets/common/assets/web/src/utils/locale.js
similarity index 83%
rename from src_assets/common/assets/web/locale.js
rename to src_assets/common/assets/web/src/utils/locale.js
index 25f9795c8f1..bef1fd0c94b 100644
--- a/src_assets/common/assets/web/locale.js
+++ b/src_assets/common/assets/web/src/utils/locale.js
@@ -1,7 +1,7 @@
 import {createI18n} from "vue-i18n";
 
 // Import only the fallback language files
-import en from './public/assets/locale/en.json'
+import en from '../../public/assets/locale/en.json'
 
 export default async function() {
     let r = await (await fetch("./api/configLocale")).json();
@@ -12,7 +12,7 @@ export default async function() {
     };
     try {
         if (locale !== 'en') {
-            let r = await (await fetch(`./assets/locale/${locale}.json`)).json();
+            let r = await (await fetch(`/assets/locale/${locale}.json`)).json();
             messages[locale] = r;
         }
     } catch (e) {
diff --git a/src_assets/common/assets/web/platform-i18n.js b/src_assets/common/assets/web/src/utils/platform-i18n.js
similarity index 100%
rename from src_assets/common/assets/web/platform-i18n.js
rename to src_assets/common/assets/web/src/utils/platform-i18n.js
diff --git a/src_assets/common/assets/web/src/utils/router.js b/src_assets/common/assets/web/src/utils/router.js
new file mode 100644
index 00000000000..557d92b1072
--- /dev/null
+++ b/src_assets/common/assets/web/src/utils/router.js
@@ -0,0 +1,28 @@
+import { createWebHistory, createRouter } from 'vue-router'
+
+import IndexView from '../views/IndexView.vue'
+import PinView from '../views/PinView.vue'
+import AppsView from '../views/AppsView.vue'
+import ConfigView from '../views/ConfigView.vue'
+import PasswordView from '../views/PasswordView.vue'
+import TroubleshootingView from '../views/TroubleshootingView.vue'
+import WelcomeView from '../views/WelcomeView.vue'
+
+const routes = [
+  { path: '/', component: IndexView },
+  { path: '/pin', component: PinView },
+  { path: '/apps', component: AppsView },
+  { path: '/config', component: ConfigView },
+  { path: '/password', component: PasswordView},
+  { path: '/troubleshooting', component: TroubleshootingView},
+  { path: '/welcome', component: WelcomeView, meta: {
+    hideNavbar: true
+  }},
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router
\ No newline at end of file
diff --git a/src_assets/common/assets/web/sunshine_version.js b/src_assets/common/assets/web/src/utils/sunshine_version.js
similarity index 100%
rename from src_assets/common/assets/web/sunshine_version.js
rename to src_assets/common/assets/web/src/utils/sunshine_version.js
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/src/utils/theme.js
similarity index 100%
rename from src_assets/common/assets/web/theme.js
rename to src_assets/common/assets/web/src/utils/theme.js
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/src/views/AppsView.vue
similarity index 91%
rename from src_assets/common/assets/web/apps.html
rename to src_assets/common/assets/web/src/views/AppsView.vue
index 8b0cb517c57..8556372c5fb 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/src/views/AppsView.vue
@@ -1,77 +1,4 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-      <%- header %>
-      <style>
-        .precmd-head {
-          width: 200px;
-        }
-
-        .monospace {
-          font-family: monospace;
-        }
-
-        .cover-finder {}
-
-        .cover-finder .cover-results {
-          max-height: 400px;
-          overflow-x: hidden;
-          overflow-y: auto;
-        }
-
-        .cover-finder .cover-results.busy * {
-          cursor: wait !important;
-          pointer-events: none;
-        }
-
-        .cover-container {
-          padding-top: 133.33%;
-          position: relative;
-        }
-
-        .cover-container.result {
-          cursor: pointer;
-        }
-
-        .spinner-border {
-          position: absolute;
-          left: 0;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          margin: auto;
-        }
-
-        .cover-container img {
-          display: block;
-          position: absolute;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-
-        .config-page {
-          padding: 1em;
-          border: 1px solid #dee2e6;
-          border-top: none;
-        }
-
-        td {
-          padding: 0 0.5em;
-        }
-
-        .env-table td {
-          padding: 0.25em;
-          border-bottom: rgba(0, 0, 0, 0.25) 1px solid;
-          vertical-align: top;
-        }
-      </style>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
+<template>
   <div class="container">
     <div class="my-4">
       <h1>{{ $t('apps.applications_title') }}</h1>
@@ -356,17 +283,14 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
       </button>
     </div>
   </div>
-</body>
+</template>
+
 <script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import Checkbox from './Checkbox.vue'
+  import Checkbox from '../components/Checkbox.vue'
   import { Dropdown } from 'bootstrap/dist/js/bootstrap'
 
-  const app = createApp({
+  export default {
     components: {
-      Navbar,
       Checkbox
     },
     data() {
@@ -572,13 +496,5 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
         });
       },
     },
-  });
-
-  app.directive('dropdown-show', {
-    mounted: function (el, binding) {
-      el.addEventListener('show.bs.dropdown', binding.value);
-    }
-  });
-
-  initApp(app);
-</script>
+  }
+</script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/src/views/ConfigView.vue
similarity index 94%
rename from src_assets/common/assets/web/config.html
rename to src_assets/common/assets/web/src/views/ConfigView.vue
index 62a37906ed6..df01d42e128 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/src/views/ConfigView.vue
@@ -1,23 +1,4 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-    <style>
-      .config-page {
-        padding: 1em;
-        border: 1px solid #dee2e6;
-        border-top: none;
-      }
-
-      .buttons {
-        padding: 1em 0;
-      }
-    </style>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
+<template>
   <div class="container">
     <h1 class="my-4">{{ $t('config.configuration') }}</h1>
     <div class="form" v-if="config">
@@ -91,25 +72,20 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
       <button class="btn btn-success" @click="apply" v-if="saved && !restarted">{{ $t('_common.apply') }}</button>
     </div>
   </div>
-</body>
+</template>
 
 
 <script type="module">
-  import { computed, createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
-  import General from './configs/tabs/General.vue'
-  import Inputs from './configs/tabs/Inputs.vue'
-  import Network from './configs/tabs/Network.vue'
-  import Files from './configs/tabs/Files.vue'
-  import Advanced from './configs/tabs/Advanced.vue'
-  import AudioVideo from './configs/tabs/AudioVideo.vue'
-  import ContainerEncoders from './configs/tabs/ContainerEncoders.vue'
-  import {$tp, usePlatformI18n} from './platform-i18n'
-
-  const app = createApp({
+  import General from '../components/configs/tabs/General.vue'
+  import Inputs from '../components/configs/tabs/Inputs.vue'
+  import Network from '../components/configs/tabs/Network.vue'
+  import Files from '../components/configs/tabs/Files.vue'
+  import Advanced from '../components/configs/tabs/Advanced.vue'
+  import AudioVideo from '../components/configs/tabs/AudioVideo.vue'
+  import ContainerEncoders from '../components/configs/tabs/ContainerEncoders.vue'
+  import {computed} from 'vue';
+  export default {
     components: {
-      Navbar,
       General,
       Inputs,
       Network,
@@ -446,7 +422,17 @@ <h1 class="my-4">{{ $t('config.configuration') }}</h1>
       // Add hashchange event listener
       window.addEventListener("hashchange", handleHash);
     },
-  });
-
-  initApp(app);
+  }
 </script>
+
+<style>
+      .config-page {
+        padding: 1em;
+        border: 1px solid #dee2e6;
+        border-top: none;
+      }
+
+      .buttons {
+        padding: 1em 0;
+      }
+    </style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/src/views/IndexView.vue b/src_assets/common/assets/web/src/views/IndexView.vue
new file mode 100644
index 00000000000..45042b15018
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/IndexView.vue
@@ -0,0 +1,166 @@
+  <template>
+    <div id="content" class="container">
+      <h1 class="my-4">{{ $t('index.welcome') }}</h1>
+      <p>{{ $t('index.description') }}</p>
+      <div class="alert alert-danger" v-if="fancyLogs.find(x => x.level === 'Fatal')">
+        <div style="line-height: 32px">
+          <i class="fas fa-circle-exclamation" style="font-size: 32px; margin-right: 0.25em"></i>
+          <p v-html="$t('index.startup_errors')"></p>
+          <br />
+        </div>
+        <ul>
+          <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">
+            {{ v.value }}
+          </li>
+        </ul>
+        <a class="btn btn-danger" href="./troubleshooting#logs">View Logs</a>
+      </div>
+      <!-- Version -->
+      <div class="card p-2 my-4">
+        <div class="card-body" v-if="version">
+          <h2>Version {{ version.version }}</h2>
+          <br />
+          <div v-if="loading">{{ $t('index.loading_latest') }}</div>
+          <div class="alert alert-success" v-if="buildVersionIsDirty">
+            {{ $t('index.version_dirty') }} 🌇
+          </div>
+          <div class="alert alert-info" v-if="installedVersionNotStable">
+            {{ $t('index.installed_version_not_stable') }}
+          </div>
+          <div
+            v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
+            <div class="alert alert-success">
+              {{ $t('index.version_latest') }}
+            </div>
+          </div>
+          <div v-if="notifyPreReleases && preReleaseBuildAvailable">
+            <div class="alert alert-warning">
+              <div class="d-flex justify-content-between">
+                <div class="my-2">
+                  <p>{{ $t('index.new_pre_release') }}</p>
+                </div>
+                <a class="btn btn-success m-1" :href="preReleaseVersion.release.html_url" target="_blank">{{
+                  $t('index.download') }}</a>
+              </div>
+              <pre><b>{{ preReleaseVersion.release.name }}</b></pre>
+              <pre>{{ preReleaseVersion.release.body }}</pre>
+            </div>
+          </div>
+          <div v-if="stableBuildAvailable">
+            <div class="alert alert-warning">
+              <div class="d-flex justify-content-between">
+                <div class="my-2">
+                  <p>{{ $t('index.new_stable') }}</p>
+                </div>
+                <a class="btn btn-success m-1" :href="githubVersion.release.html_url" target="_blank">{{
+                  $t('index.download') }}</a>
+              </div>
+              <h3>{{ githubVersion.release.name }}</h3>
+              <pre>{{ githubVersion.release.body }}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Resources -->
+      <div class="my-4">
+        <Resource-Card></Resource-Card>
+      </div>
+    </div>
+  </template>
+
+<script type="module">
+import ResourceCard from "../components/ResourceCard.vue";
+import SunshineVersion from "../utils/sunshine_version.js";
+
+export default {
+  components: {
+    ResourceCard
+  },
+  data() {
+    return {
+      version: null,
+      githubVersion: null,
+      notifyPreReleases: false,
+      preReleaseVersion: null,
+      loading: true,
+      logs: null,
+    };
+  },
+  async created() {
+    try {
+      let config = await fetch("./api/config").then((r) => r.json());
+      this.notifyPreReleases = config.notify_pre_releases;
+      this.version = new SunshineVersion(null, config.version);
+      console.log("Version: ", this.version.version);
+      this.githubVersion = new SunshineVersion(
+        await fetch(
+          "https://api.github.com/repos/LizardByte/Sunshine/releases/latest"
+        ).then((r) => r.json()),
+        null
+      );
+      console.log("GitHub Version: ", this.githubVersion.version);
+      this.preReleaseVersion = new SunshineVersion(
+        (
+          await fetch(
+            "https://api.github.com/repos/LizardByte/Sunshine/releases"
+          ).then((r) => r.json())
+        ).find((release) => release.prerelease),
+        null
+      );
+      console.log("Pre-Release Version: ", this.preReleaseVersion.version);
+    } catch (e) {
+      console.error(e);
+    }
+    try {
+      this.logs = await fetch("./api/logs").then((r) => r.text());
+    } catch (e) {
+      console.error(e);
+    }
+    this.loading = false;
+  },
+  computed: {
+    installedVersionNotStable() {
+      if (!this.githubVersion || !this.version) {
+        return false;
+      }
+      return this.version.isGreater(this.githubVersion);
+    },
+    stableBuildAvailable() {
+      if (!this.githubVersion || !this.version) {
+        return false;
+      }
+      return this.githubVersion.isGreater(this.version);
+    },
+    preReleaseBuildAvailable() {
+      if (!this.preReleaseVersion || !this.githubVersion || !this.version) {
+        return false;
+      }
+      return (
+        this.preReleaseVersion.isGreater(this.version) &&
+        this.preReleaseVersion.isGreater(this.githubVersion)
+      );
+    },
+    buildVersionIsDirty() {
+      return (
+        this.version.version?.split(".").length === 5 &&
+        this.version.version.indexOf("dirty") !== -1
+      );
+    },
+    /** Parse the text errors, calculating the text, the timestamp and the level */
+    fancyLogs() {
+      if (!this.logs) return [];
+      let regex = /(\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}]):\s/g;
+      let rawLogLines = this.logs.split(regex).splice(1);
+      let logLines = [];
+      for (let i = 0; i < rawLogLines.length; i += 2) {
+        logLines.push({
+          timestamp: rawLogLines[i],
+          level: rawLogLines[i + 1].split(":")[0],
+          value: rawLogLines[i + 1],
+        });
+      }
+      return logLines;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/src/views/PasswordView.vue
similarity index 87%
rename from src_assets/common/assets/web/password.html
rename to src_assets/common/assets/web/src/views/PasswordView.vue
index 9f1e7194a79..8d9444037ab 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/src/views/PasswordView.vue
@@ -1,23 +1,4 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-  <style>
-    .config-page {
-      padding: 1em;
-      border: 1px solid #dee2e6;
-      border-top: none;
-    }
-
-    .buttons {
-      padding: 1em 0;
-    }
-  </style>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
+<template>
   <div class="container">
     <h1 class="my-4">{{ $t('password.password_change') }}</h1>
     <form @submit.prevent="save">
@@ -64,16 +45,10 @@ <h4>{{ $t('password.new_creds') }}</h4>
       </div>
     </form>
   </div>
-</body>
-<script type="module">
-  import { createApp } from 'vue'
-  import { initApp } from './init'
-  import Navbar from './Navbar.vue'
+</template>
 
-  const app = createApp({
-    components: {
-      Navbar
-    },
+<script type="module">
+  export default {
     data() {
       return {
         error: null,
@@ -114,7 +89,17 @@ <h4>{{ $t('password.new_creds') }}</h4>
         });
       },
     },
-  });
-
-  initApp(app);
+  }
 </script>
+
+<style>
+.config-page {
+  padding: 1em;
+  border: 1px solid #dee2e6;
+  border-top: none;
+}
+
+.buttons {
+  padding: 1em 0;
+}
+</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/src/views/PinView.vue b/src_assets/common/assets/web/src/views/PinView.vue
new file mode 100644
index 00000000000..f65025d3f2e
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/PinView.vue
@@ -0,0 +1,54 @@
+<template>
+  <div id="content" class="container">
+    <h1 class="my-4 text-center">{{ $t('pin.pin_pairing') }}</h1>
+    <form class="form d-flex flex-column align-items-center" id="form" @submit.prevent="registerDevice">
+      <div class="card flex-column d-flex p-4 mb-4">
+        <input type="text" pattern="\d*" :placeholder="`${$t('navbar.pin')}`" autofocus id="pin-input"
+          class="form-control mt-2" required />
+        <input type="text" :placeholder="`${$t('pin.device_name')}`" id="name-input" class="form-control my-4"
+          required />
+        <button class="btn btn-primary">{{ $t('pin.send') }}</button>
+      </div>
+      <div class="alert alert-warning">
+        <b>{{ $t('_common.warning') }}</b> {{ $t('pin.warning_msg') }}
+      </div>
+      <div id="status"></div>
+    </form>
+  </div>
+</template>
+<script type="module">
+export default {
+  inject: ["i18n"],
+  methods: {
+    registerDevice(e) {
+      let pin = document.querySelector("#pin-input").value;
+      let name = document.querySelector("#name-input").value;
+      document.querySelector("#status").innerHTML = "";
+      let b = JSON.stringify({ pin: pin, name: name });
+      fetch("./api/pin", {
+        method: "POST", headers: {
+          'Content-Type': 'application/json'
+        }, body: b
+      })
+        .then((response) => response.json())
+        .then((response) => {
+          if (response.status === true) {
+            document.querySelector(
+              "#status"
+            ).innerHTML = `<div class="alert alert-success" role="alert">${this.i18n.t(
+              "pin.pair_success"
+            )}</div>`;
+            document.querySelector("#pin-input").value = "";
+            document.querySelector("#name-input").value = "";
+          } else {
+            document.querySelector(
+              "#status"
+            ).innerHTML = `<div class="alert alert-danger" role="alert">${this.i18n.t(
+              "pin.pair_failure"
+            )}</div>`;
+          }
+        });
+    },
+  },
+}
+</script>
diff --git a/src_assets/common/assets/web/src/views/TroubleshootingView.vue b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
new file mode 100644
index 00000000000..2df32d3f722
--- /dev/null
+++ b/src_assets/common/assets/web/src/views/TroubleshootingView.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="container">
+    <h1 class="my-4">{{ $t('troubleshooting.troubleshooting') }}</h1>
+    <!-- Force Close App -->
+    <div class="card p-2 my-4">
+      <div class="card-body">
+        <h2 id="close_apps">{{ $t('troubleshooting.force_close') }}</h2>
+        <br>
+        <p>{{ $t('troubleshooting.force_close_desc') }}</p>
+        <div class="alert alert-success" v-if="closeAppStatus === true">
+          {{ $t('troubleshooting.force_close_success') }}
+        </div>
+        <div class="alert alert-danger" v-if="closeAppStatus === false">
+          {{ $t('troubleshooting.force_close_error') }}
+        </div>
+        <div>
+          <button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
+            {{ $t('troubleshooting.force_close') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Restart Sunshine -->
+    <div class="card p-2 my-4">
+      <div class="card-body">
+        <h2 id="restart">{{ $t('troubleshooting.restart_sunshine') }}</h2>
+        <br>
+        <p>{{ $t('troubleshooting.restart_sunshine_desc') }}</p>
+        <div class="alert alert-success" v-if="restartPressed === true">
+          {{ $t('troubleshooting.restart_sunshine_success') }}
+        </div>
+        <div>
+          <button class="btn btn-warning" :disabled="restartPressed" @click="restart">
+            {{ $t('troubleshooting.restart_sunshine') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Reset persistent display device settings -->
+    <div class="card p-2 my-4" v-if="platform === 'windows'">
+      <div class="card-body">
+        <h2 id="dd_reset">{{ $t('troubleshooting.dd_reset') }}</h2>
+        <br>
+        <p style="white-space: pre-line">{{ $t('troubleshooting.dd_reset_desc') }}</p>
+        <div class="alert alert-success" v-if="ddResetStatus === true">
+          {{ $t('troubleshooting.dd_reset_success') }}
+        </div>
+        <div class="alert alert-danger" v-if="ddResetStatus === false">
+          {{ $t('troubleshooting.dd_reset_error') }}
+        </div>
+        <div>
+          <button class="btn btn-warning" :disabled="ddResetPressed" @click="ddResetPersistence">
+            {{ $t('troubleshooting.dd_reset') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- Unpair Clients -->
+    <div class="card my-4">
+      <div class="card-body">
+        <div class="p-2">
+          <div class="d-flex justify-content-end align-items-center">
+            <h2 id="unpair" class="text-center me-auto">{{ $t('troubleshooting.unpair_title') }}</h2>
+            <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
+              {{ $t('troubleshooting.unpair_all') }}
+            </button>
+          </div>
+          <br />
+          <p class="mb-0">{{ $t('troubleshooting.unpair_desc') }}</p>
+          <div id="apply-alert" class="alert alert-success d-flex align-items-center mt-3"
+            :style="{ 'display': (showApplyMessage ? 'flex !important' : 'none !important') }">
+            <div class="me-2"><b>{{ $t('_common.success') }}</b> {{ $t('troubleshooting.unpair_single_success') }}</div>
+            <button class="btn btn-success ms-auto apply" @click="clickedApplyBanner">{{ $t('_common.dismiss')
+              }}</button>
+          </div>
+          <div class="alert alert-success mt-3" v-if="unpairAllStatus === true">
+            {{ $t('troubleshooting.unpair_all_success') }}
+          </div>
+          <div class="alert alert-danger mt-3" v-if="unpairAllStatus === false">
+            {{ $t('troubleshooting.unpair_all_error') }}
+          </div>
+        </div>
+      </div>
+      <ul id="client-list" class="list-group list-group-flush list-group-item-light"
+        v-if="clients && clients.length > 0">
+        <div v-for="client in clients" class="list-group-item d-flex">
+          <div class="p-2 flex-grow-1">{{ client.name !== "" ? client.name : $t('troubleshooting.unpair_single_unknown')
+            }}</div>
+          <div class="me-2 ms-auto btn btn-danger" @click="unpairSingle(client.uuid)"><i class="fas fa-trash"></i></div>
+        </div>
+      </ul>
+      <ul v-else class="list-group list-group-flush list-group-item-light">
+        <div class="list-group-item p-3 text-center"><em>{{ $t('troubleshooting.unpair_single_no_devices') }}</em></div>
+      </ul>
+
+    </div>
+    <!-- Logs -->
+    <div class="card p-2 my-4">
+      <div class="card-body">
+        <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
+        <br>
+        <div class="d-flex justify-content-between align-items-baseline py-2">
+          <p>{{ $t('troubleshooting.logs_desc') }}</p>
+          <input type="text" class="form-control" v-model="logFilter" :placeholder="$t('troubleshooting.logs_find')"
+            style="width: 300px">
+        </div>
+        <div>
+          <div class="troubleshooting-logs">
+            <button class="copy-icon"><i class="fas fa-copy " @click="copyLogs"></i></button>{{ actualLogs }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      clients: [],
+      closeAppPressed: false,
+      closeAppStatus: null,
+      ddResetPressed: false,
+      ddResetStatus: null,
+      logs: 'Loading...',
+      logFilter: null,
+      logInterval: null,
+      restartPressed: false,
+      showApplyMessage: false,
+      platform: "",
+      unpairAllPressed: false,
+      unpairAllStatus: null,
+    };
+  },
+  computed: {
+    actualLogs() {
+      if (!this.logFilter) return this.logs;
+      let lines = this.logs.split("\n");
+      lines = lines.filter(x => x.indexOf(this.logFilter) !== -1);
+      return lines.join("\n");
+    }
+  },
+  created() {
+    fetch("/api/config")
+      .then((r) => r.json())
+      .then((r) => {
+        this.platform = r.platform;
+      });
+
+    this.logInterval = setInterval(() => {
+      this.refreshLogs();
+    }, 5000);
+    this.refreshLogs();
+    this.refreshClients();
+  },
+  beforeDestroy() {
+    clearInterval(this.logInterval);
+  },
+  methods: {
+    refreshLogs() {
+      fetch("./api/logs",)
+        .then((r) => r.text())
+        .then((r) => {
+          this.logs = r;
+        });
+    },
+    closeApp() {
+      this.closeAppPressed = true;
+      fetch("./api/apps/close", { method: "POST" })
+        .then((r) => r.json())
+        .then((r) => {
+          this.closeAppPressed = false;
+          this.closeAppStatus = r.status;
+          setTimeout(() => {
+            this.closeAppStatus = null;
+          }, 5000);
+        });
+    },
+    unpairAll() {
+      this.unpairAllPressed = true;
+      fetch("./api/clients/unpair-all", { method: "POST" })
+        .then((r) => r.json())
+        .then((r) => {
+          this.unpairAllPressed = false;
+          this.unpairAllStatus = r.status;
+          setTimeout(() => {
+            this.unpairAllStatus = null;
+          }, 5000);
+          this.refreshClients();
+        });
+    },
+    unpairSingle(uuid) {
+      fetch("./api/clients/unpair", { method: "POST", body: JSON.stringify({ uuid }) }).then(() => {
+        this.showApplyMessage = true;
+        this.refreshClients();
+      });
+    },
+    refreshClients() {
+      fetch("./api/clients/list")
+        .then((response) => response.json())
+        .then((response) => {
+          const clientList = document.querySelector("#client-list");
+          if (response.status === true && response.named_certs && response.named_certs.length) {
+            this.clients = response.named_certs.sort((a, b) => {
+              return (a.name.toLowerCase() > b.name.toLowerCase() || a.name === "" ? 1 : -1)
+            });
+          } else {
+            this.clients = [];
+          }
+        });
+    },
+    clickedApplyBanner() {
+      this.showApplyMessage = false;
+    },
+    copyLogs() {
+      navigator.clipboard.writeText(this.actualLogs);
+    },
+    restart() {
+      this.restartPressed = true;
+      setTimeout(() => {
+        this.restartPressed = false;
+      }, 5000);
+      fetch("./api/restart", {
+        method: "POST",
+      });
+    },
+    ddResetPersistence() {
+      this.ddResetPressed = true;
+      fetch("/api/reset-display-device-persistence", { method: "POST" })
+        .then((r) => r.json())
+        .then((r) => {
+          this.ddResetPressed = false;
+          this.ddResetStatus = r.status;
+          setTimeout(() => {
+            this.ddResetStatus = null;
+          }, 5000);
+        });
+    },
+  }
+};
+</script>
+
+<style>
+.troubleshooting-logs {
+  white-space: pre;
+  font-family: monospace;
+  overflow: auto;
+  max-height: 500px;
+  min-height: 500px;
+  font-size: 16px;
+  position: relative;
+}
+
+.copy-icon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 8px;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 1);
+  appearance: none;
+  border: none;
+  background: none;
+}
+
+.copy-icon:hover {
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.copy-icon:active {
+  color: rgba(0, 0, 0, 1);
+}
+</style>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/welcome.html b/src_assets/common/assets/web/src/views/WelcomeView.vue
similarity index 56%
rename from src_assets/common/assets/web/welcome.html
rename to src_assets/common/assets/web/src/views/WelcomeView.vue
index bdacf941cac..b963af1db3f 100644
--- a/src_assets/common/assets/web/welcome.html
+++ b/src_assets/common/assets/web/src/views/WelcomeView.vue
@@ -1,17 +1,10 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-  <%- header %>
-</head>
-
-<body id="app" v-cloak>
+<template>
   <main role="main" style="max-width: 1200px; margin: 1em auto">
     <div class="d-flex gap-4">
       <div class="card p-2">
         <header>
           <h1 class="mb-0">
-            <img src="./images/logo-sunshine-45.png" height="45" alt="">
+            <img src="/images/logo-sunshine-45.png" height="45" alt="">
             {{ $t('welcome.greeting') }}
           </h1>
         </header>
@@ -38,7 +31,7 @@ <h1 class="mb-0">
           <button type="submit" class="btn btn-primary w-100 mb-2" v-bind:disabled="loading">
             {{ $t('welcome.login') }}
           </button>
-          <div class="alert alert-danger" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div>
+          <div class="alert alert-danger" v-if="error"><b>{{ $t('_common.error') }}</b> {{ error }}</div>
           <div class="alert alert-success" v-if="success">
             <b>{{ $t('_common.success') }}</b> {{ $t('welcome.welcome_success') }}
           </div>
@@ -49,59 +42,51 @@ <h1 class="mb-0">
       </div>
     </div>
   </main>
-</body>
+</template>
 
 <script type="module">
-  import { createApp } from "vue"
-  import ResourceCard from './ResourceCard.vue'
-  import { initApp } from './init'
-
-  let app = createApp({
-    components: {
-      ResourceCard
-    },
-    data() {
-      return {
-        error: null,
-        success: false,
-        loading: false,
-        passwordData: {
-          newUsername: "sunshine",
-          newPassword: "",
-          confirmNewPassword: "",
-        },
-      };
-    },
-    methods: {
-      save() {
-        this.error = null;
-        this.loading = true;
-        fetch("./api/password", {
-          method: "POST",
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(this.passwordData),
-        }).then((r) => {
-          this.loading = false;
-          if (r.status === 200) {
-            r.json().then((rj) => {
-              this.success = rj.status;
-              if (this.success === true) {
-                setTimeout(() => {
-                  document.location.reload();
-                }, 5000);
-              } else {
-                this.error = rj.error;
-              }
-            });
-          } else {
-            this.error = "Internal Server Error";
-          }
-        });
+import ResourceCard from '@/components/ResourceCard.vue'
+export default {
+  components: {
+    ResourceCard
+  },
+  data() {
+    return {
+      error: null,
+      success: false,
+      loading: false,
+      passwordData: {
+        newUsername: "sunshine",
+        newPassword: "",
+        confirmNewPassword: "",
       },
+    };
+  },
+  methods: {
+    save() {
+      this.error = null;
+      this.loading = true;
+      fetch("./api/password", {
+        method: "POST",
+        body: JSON.stringify(this.passwordData),
+      }).then((r) => {
+        this.loading = false;
+        if (r.status === 200) {
+          r.json().then((rj) => {
+            this.success = rj.status;
+            if (this.success === true) {
+              setTimeout(() => {
+                document.location.reload();
+              }, 5000);
+            } else {
+              this.error = rj.error;
+            }
+          });
+        } else {
+          this.error = "Internal Server Error";
+        }
+      });
     },
-  });
-
-  initApp(app);
+  },
+}
 </script>
diff --git a/src_assets/common/assets/web/template_header.html b/src_assets/common/assets/web/template_header.html
deleted file mode 100644
index 1a27f925404..00000000000
--- a/src_assets/common/assets/web/template_header.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!-- TEMPLATE_HEADER - Used by Every UI Page -->
-<meta charset="UTF-8" />
-<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Sunshine</title>
-<link rel="icon" type="image/x-icon" href="./images/sunshine.ico">
-<link href="@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
-<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-<link href="./assets/css/sunshine.css" rel="stylesheet" />
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
deleted file mode 100644
index d742867fbf2..00000000000
--- a/src_assets/common/assets/web/troubleshooting.html
+++ /dev/null
@@ -1,309 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-<head>
-      <%- header %>
-      <style>
-        .troubleshooting-logs {
-          white-space: pre;
-          font-family: monospace;
-          overflow: auto;
-          max-height: 500px;
-          min-height: 500px;
-          font-size: 16px;
-          position: relative;
-        }
-
-        .copy-icon {
-          position: absolute;
-          top: 8px;
-          right: 8px;
-          padding: 8px;
-          cursor: pointer;
-          color: rgba(0, 0, 0, 1);
-          appearance: none;
-          border: none;
-          background: none;
-        }
-
-        .copy-icon:hover {
-          color: rgba(0, 0, 0, 0.75);
-        }
-
-        .copy-icon:active {
-          color: rgba(0, 0, 0, 1);
-        }
-      </style>
-</head>
-
-<body id="app" v-cloak>
-  <Navbar></Navbar>
-  <div class="container">
-    <h1 class="my-4">{{ $t('troubleshooting.troubleshooting') }}</h1>
-    <!-- Force Close App -->
-    <div class="card p-2 my-4">
-      <div class="card-body">
-        <h2 id="close_apps">{{ $t('troubleshooting.force_close') }}</h2>
-        <br>
-        <p>{{ $t('troubleshooting.force_close_desc') }}</p>
-        <div class="alert alert-success" v-if="closeAppStatus === true">
-          {{ $t('troubleshooting.force_close_success') }}
-        </div>
-        <div class="alert alert-danger" v-if="closeAppStatus === false">
-          {{ $t('troubleshooting.force_close_error') }}
-        </div>
-        <div>
-          <button class="btn btn-warning" :disabled="closeAppPressed" @click="closeApp">
-            {{ $t('troubleshooting.force_close') }}
-          </button>
-        </div>
-      </div>
-    </div>
-    <!-- Restart Sunshine -->
-    <div class="card p-2 my-4">
-      <div class="card-body">
-        <h2 id="restart">{{ $t('troubleshooting.restart_sunshine') }}</h2>
-        <br>
-        <p>{{ $t('troubleshooting.restart_sunshine_desc') }}</p>
-        <div class="alert alert-success" v-if="restartPressed === true">
-          {{ $t('troubleshooting.restart_sunshine_success') }}
-        </div>
-        <div>
-          <button class="btn btn-warning" :disabled="restartPressed" @click="restart">
-            {{ $t('troubleshooting.restart_sunshine') }}
-          </button>
-        </div>
-      </div>
-    </div>
-    <!-- Reset persistent display device settings -->
-    <div class="card p-2 my-4" v-if="platform === 'windows'">
-      <div class="card-body">
-        <h2 id="dd_reset">{{ $t('troubleshooting.dd_reset') }}</h2>
-        <br>
-        <p style="white-space: pre-line">{{ $t('troubleshooting.dd_reset_desc') }}</p>
-        <div class="alert alert-success" v-if="ddResetStatus === true">
-          {{ $t('troubleshooting.dd_reset_success') }}
-        </div>
-        <div class="alert alert-danger" v-if="ddResetStatus === false">
-          {{ $t('troubleshooting.dd_reset_error') }}
-        </div>
-        <div>
-          <button class="btn btn-warning" :disabled="ddResetPressed" @click="ddResetPersistence">
-            {{ $t('troubleshooting.dd_reset') }}
-          </button>
-        </div>
-      </div>
-    </div>
-    <!-- Unpair Clients -->
-    <div class="card my-4">
-      <div class="card-body">
-        <div class="p-2">
-          <div class="d-flex justify-content-end align-items-center">
-            <h2 id="unpair" class="text-center me-auto">{{ $t('troubleshooting.unpair_title') }}</h2>
-            <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
-              {{ $t('troubleshooting.unpair_all') }}
-            </button>
-          </div>
-          <br />
-          <p class="mb-0">{{ $t('troubleshooting.unpair_desc') }}</p>
-          <div id="apply-alert" class="alert alert-success d-flex align-items-center mt-3" :style="{ 'display': (showApplyMessage ? 'flex !important': 'none !important') }">
-            <div class="me-2"><b>{{ $t('_common.success') }}</b> {{ $t('troubleshooting.unpair_single_success') }}</div>
-            <button class="btn btn-success ms-auto apply" @click="clickedApplyBanner">{{ $t('_common.dismiss') }}</button>
-          </div>
-          <div class="alert alert-success mt-3" v-if="unpairAllStatus === true">
-            {{ $t('troubleshooting.unpair_all_success') }}
-          </div>
-          <div class="alert alert-danger mt-3" v-if="unpairAllStatus === false">
-            {{ $t('troubleshooting.unpair_all_error') }}
-          </div>
-        </div>
-      </div>
-      <ul id="client-list" class="list-group list-group-flush list-group-item-light" v-if="clients && clients.length > 0">
-        <div v-for="client in clients" class="list-group-item d-flex">
-          <div class="p-2 flex-grow-1">{{ client.name !== "" ? client.name : $t('troubleshooting.unpair_single_unknown') }}</div>
-          <div class="me-2 ms-auto btn btn-danger" @click="unpairSingle(client.uuid)"><i class="fas fa-trash"></i></div>
-        </div>
-      </ul>
-      <ul v-else class="list-group list-group-flush list-group-item-light">
-        <div class="list-group-item p-3 text-center"><em>{{ $t('troubleshooting.unpair_single_no_devices') }}</em></div>
-      </ul>
-
-    </div>
-    <!-- Logs -->
-    <div class="card p-2 my-4">
-      <div class="card-body">
-        <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
-        <br>
-        <div class="d-flex justify-content-between align-items-baseline py-2">
-          <p>{{ $t('troubleshooting.logs_desc') }}</p>
-          <input type="text" class="form-control" v-model="logFilter" :placeholder="$t('troubleshooting.logs_find')" style="width: 300px">
-        </div>
-        <div>
-          <div class="troubleshooting-logs">
-            <button class="copy-icon"><i class="fas fa-copy " @click="copyLogs"></i></button>{{actualLogs}}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script type="module">
-    import { createApp } from 'vue'
-    import { initApp } from './init'
-    import Navbar from './Navbar.vue'
-
-    const app = createApp({
-      components: {
-        Navbar
-      },
-      data() {
-        return {
-          clients: [],
-          closeAppPressed: false,
-          closeAppStatus: null,
-          ddResetPressed: false,
-          ddResetStatus: null,
-          logs: 'Loading...',
-          logFilter: null,
-          logInterval: null,
-          restartPressed: false,
-          showApplyMessage: false,
-          platform: "",
-          unpairAllPressed: false,
-          unpairAllStatus: null,
-        };
-      },
-      computed: {
-        actualLogs() {
-          if (!this.logFilter) return this.logs;
-          let lines = this.logs.split("\n");
-          lines = lines.filter(x => x.indexOf(this.logFilter) !== -1);
-          return lines.join("\n");
-        }
-      },
-      created() {
-        fetch("/api/config")
-          .then((r) => r.json())
-          .then((r) => {
-            this.platform = r.platform;
-          });
-
-        this.logInterval = setInterval(() => {
-          this.refreshLogs();
-        }, 5000);
-        this.refreshLogs();
-        this.refreshClients();
-      },
-      beforeDestroy() {
-        clearInterval(this.logInterval);
-      },
-      methods: {
-        refreshLogs() {
-          fetch("./api/logs",)
-            .then((r) => r.text())
-            .then((r) => {
-              this.logs = r;
-            });
-        },
-        closeApp() {
-          this.closeAppPressed = true;
-          fetch("./api/apps/close", { 
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            } })
-            .then((r) => r.json())
-            .then((r) => {
-              this.closeAppPressed = false;
-              this.closeAppStatus = r.status;
-              setTimeout(() => {
-                this.closeAppStatus = null;
-              }, 5000);
-            });
-        },
-        unpairAll() {
-          this.unpairAllPressed = true;
-          fetch("./api/clients/unpair-all", { 
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            }
-           })
-            .then((r) => r.json())
-            .then((r) => {
-              this.unpairAllPressed = false;
-              this.unpairAllStatus = r.status;
-              setTimeout(() => {
-                this.unpairAllStatus = null;
-              }, 5000);
-              this.refreshClients();
-            });
-        },
-        unpairSingle(uuid) {
-          fetch("./api/clients/unpair", { 
-            method: "POST", 
-            headers: {
-              'Content-Type': 'application/json'
-            }, 
-            body: JSON.stringify({ uuid }) 
-          }).then(() => {
-            this.showApplyMessage = true;
-            this.refreshClients();
-          });
-        },
-        refreshClients() {
-          fetch("./api/clients/list")
-            .then((response) => response.json())
-            .then((response) => {
-              const clientList = document.querySelector("#client-list");
-              if (response.status === true && response.named_certs && response.named_certs.length) {
-                this.clients = response.named_certs.sort((a, b) => {
-                  return (a.name.toLowerCase() > b.name.toLowerCase() || a.name === "" ? 1 : -1)
-                });
-              } else {
-                this.clients = [];
-              }
-            });
-        },
-        clickedApplyBanner() {
-          this.showApplyMessage = false;
-        },
-        copyLogs() {
-          navigator.clipboard.writeText(this.actualLogs);
-        },
-        restart() {
-          this.restartPressed = true;
-          setTimeout(() => {
-            this.restartPressed = false;
-          }, 5000);
-          fetch("./api/restart", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            }
-          });
-        },
-        ddResetPersistence() {
-          this.ddResetPressed = true;
-          fetch("/api/reset-display-device-persistence", { 
-            method: "POST",
-            headers: { 
-              "Content-Type": "application/json" 
-            } 
-          })
-            .then((r) => r.json())
-            .then((r) => {
-              this.ddResetPressed = false;
-              this.ddResetStatus = r.status;
-              setTimeout(() => {
-                this.ddResetStatus = null;
-              }, 5000);
-            });
-        },
-      },
-    });
-
-    initApp(app);
-  </script>
-
-</body>
diff --git a/vite.config.js b/vite.config.js
index 60bdc2a2c83..52b67c86af1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,18 +2,11 @@ import { fileURLToPath, URL } from 'node:url'
 import fs from 'fs';
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
-import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { codecovVitePlugin } from "@codecov/vite-plugin";
 import vue from '@vitejs/plugin-vue'
 import process from 'process'
+import path from 'path';
 
-/**
- * Before actually building the pages with Vite, we do an intermediate build step using ejs
- * Importing this separately and joining them using ejs
- * allows us to split some repeating HTML that cannot be added
- * by Vue itself (e.g. style/script loading, common meta head tags, Widgetbot)
- * The vite-plugin-ejs handles this automatically
- */
 let assetsSrcPath = 'src_assets/common/assets/web';
 let assetsDstPath = 'build/assets/web';
 
@@ -40,19 +33,17 @@ else {
     }
 }
 
-let header = fs.readFileSync(resolve(assetsSrcPath, "template_header.html"))
-
 // https://vitejs.dev/config/
 export default defineConfig({
     resolve: {
         alias: {
-            vue: 'vue/dist/vue.esm-bundler.js'
+            vue: 'vue/dist/vue.esm-bundler.js',
+            '@': path.resolve(assetsSrcPath, 'src')
         }
     },
     base: './',
     plugins: [
         vue(),
-        ViteEjsPlugin({ header }),
         // The Codecov vite plugin should be after all other plugins
         codecovVitePlugin({
             enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
@@ -61,17 +52,19 @@ export default defineConfig({
         }),
     ],
     root: resolve(assetsSrcPath),
+    server: {
+        proxy: {
+            '/api': {
+                target: 'https://127.0.0.1:47990',
+                secure: false
+            }
+        }
+    },
     build: {
         outDir: resolve(assetsDstPath),
         rollupOptions: {
             input: {
-                apps: resolve(assetsSrcPath, 'apps.html'),
-                config: resolve(assetsSrcPath, 'config.html'),
                 index: resolve(assetsSrcPath, 'index.html'),
-                password: resolve(assetsSrcPath, 'password.html'),
-                pin: resolve(assetsSrcPath, 'pin.html'),
-                troubleshooting: resolve(assetsSrcPath, 'troubleshooting.html'),
-                welcome: resolve(assetsSrcPath, 'welcome.html'),
             },
         },
     },