diff --git a/public/v1/js/ff/install/index.js b/public/v1/js/ff/install/index.js
index 29733b9cda..0caaf35b73 100644
--- a/public/v1/js/ff/install/index.js
+++ b/public/v1/js/ff/install/index.js
@@ -19,10 +19,7 @@
  */
 
 
-$(function () {
-    "use strict";
-    //var status = $('#status-box');
-    // set HTML to "migrating...":
+document.addEventListener("DOMContentLoaded", (event) => {
     console.log('Starting...');
     startRunningCommands(0);
 });
@@ -30,57 +27,81 @@ $(function () {
 function startRunningCommands(index) {
     console.log('Now in startRunningCommands with index' + index);
     if (0 === index) {
-        $('#status-box').html('<span class="fa fa-spin fa-spinner"></span> Running first command...');
+        document.querySelector('#status-box').innerHTML = '<span class="fa fa-spin fa-spinner"></span> Running first command...';
     }
     runCommand(index);
 }
 
 function runCommand(index) {
     console.log('Now in runCommand(' + index + '): ' + runCommandUrl);
-    $.post(runCommandUrl, {_token: token, index: parseInt(index)}).done(function (data) {
-        if (data.error === false) {
-            // increase index
-            index++;
 
-            if(data.hasNextCommand) {
-                // inform user
-                $('#status-box').html('<span class="fa fa-spin fa-spinner"></span> Just executed ' + data.previous + '...');
-                console.log('Will call next command.');
-                runCommand(index);
+    fetch(runCommandUrl, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({_token: token, index: parseInt(index)}),
+    })
+        .then(response => response.json())
+        .then(response => {
+            if (response.error === false) {
+                index++;
+                if (response.hasNextCommand) {
+                    // inform user
+                    document.querySelector('#status-box').innerHTML = '<span class="fa fa-spin fa-spinner"></span> Just executed ' + response.previous + '...';
+                    console.log('Will call next command.');
+                    runCommand(index);
+                } else {
+                    completeDone();
+                    console.log('Finished!');
+                }
             } else {
-                completeDone();
-                console.log('Finished!');
+                displaySoftFail(response.errorMessage);
+                console.error(response);
             }
-        } else {
-            displaySoftFail(data.errorMessage);
-            console.error(data);
-        }
-
-    }).fail(function () {
-        $('#status-box').html('<span class="fa fa-warning"></span> Command failed! See log files :(');
-    });
+        })
 }
 
 function startMigration() {
     console.log('Now in startMigration');
-    $.post(migrateUrl, {_token: token}).done(function (data) {
-        if (data.error === false) {
+
+    fetch(migrateUrl, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({_token: token}),
+    })
+        .then(response => response.json())
+        .then(response => {
+        if (response.error === false) {
             // move to decrypt routine.
             startDecryption();
         } else {
-            displaySoftFail(data.message);
+            displaySoftFail(response.message);
         }
 
     }).fail(function () {
-        $('#status-box').html('<span class="fa fa-warning"></span> Migration failed! See log files :(');
+        document.querySelector('#status-box').innerHTML = '<span class="fa fa-warning"></span> Migration failed! See log files :(';
     });
 }
 
 function startDecryption() {
     console.log('Now in startDecryption');
-    $('#status-box').html('<span class="fa fa-spin fa-spinner"></span> Setting up DB #2...');
-    $.post(decryptUrl, {_token: token}).done(function (data) {
-        if (data.error === false) {
+    document.querySelector('#status-box').innerHTML = '<span class="fa fa-spin fa-spinner"></span> Setting up DB #2...';
+    fetch(decryptUrl, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({_token: token}),
+    })
+        .then(response => response.json())
+        .then(response => {
+        if (response.error === false) {
             // move to decrypt routine.
             startPassport();
         } else {
@@ -88,7 +109,7 @@ function startDecryption() {
         }
 
     }).fail(function () {
-        $('#status-box').html('<span class="fa fa-warning"></span> Migration failed! See log files :(');
+        document.querySelector('#status-box').innerHTML = '<span class="fa fa-warning"></span> Migration failed! See log files :(';
     });
 }
 
@@ -96,16 +117,25 @@ function startDecryption() {
  *
  */
 function startPassport() {
-    $('#status-box').html('<span class="fa fa-spin fa-spinner"></span> Setting up OAuth2...');
-    $.post(keysUrl, {_token: token}).done(function (data) {
-        if (data.error === false) {
+    document.querySelector('#status-box').innerHTML = '<span class="fa fa-spin fa-spinner"></span> Setting up OAuth2...';
+    fetch(keysUrl, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({_token: token}),
+    })
+        .then(response => response.json())
+        .then(response => {
+        if (response.error === false) {
             startUpgrade();
         } else {
             displaySoftFail(data.message);
         }
 
     }).fail(function () {
-        $('#status-box').html('<span class="fa fa-warning"></span> OAuth2 failed! See log files :(');
+        document.querySelector('#status-box').innerHTML = '<span class="fa fa-warning"></span> OAuth2 failed! See log files :(';
     });
 }
 
@@ -113,15 +143,24 @@ function startPassport() {
  *
  */
 function startUpgrade() {
-    $('#status-box').html('<span class="fa fa-spin fa-spinner"></span> Upgrading database...');
-    $.post(upgradeUrl, {_token: token}).done(function (data) {
-        if (data.error === false) {
+    document.querySelector('#status-box').innerHTML = '<span class="fa fa-spin fa-spinner"></span> Upgrading database...';
+    fetch(upgradeUrl, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({_token: token}),
+    })
+        .then(response => response.json())
+        .then(response => {
+        if (response.error === false) {
             startVerify();
         } else {
             displaySoftFail(data.message);
         }
     }).fail(function () {
-        $('#status-box').html('<span class="fa fa-warning"></span> Upgrade failed! See log files :(');
+        document.querySelector('#status-box').innerHTML = '<span class="fa fa-warning"></span> Upgrade failed! See log files :(';
     });
 }
 
@@ -129,15 +168,24 @@ function startUpgrade() {
  *
  */
 function startVerify() {
-    $('#status-box').html('<span class="fa fa-spin fa-spinner"></span> Verify database integrity...');
-    $.post(verifyUrl, {_token: token}).done(function (data) {
-        if (data.error === false) {
+    document.querySelector('#status-box').innerHTML = '<span class="fa fa-spin fa-spinner"></span> Verify database integrity...';
+    fetch(veifyUrl, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({_token: token}),
+    })
+        .then(response => response.json())
+        .then(response => {
+        if (response.error === false) {
             completeDone();
         } else {
             displaySoftFail(data.message);
         }
     }).fail(function () {
-        $('#status-box').html('<span class="fa fa-warning"></span> Verification failed! See log files :(');
+        document.querySelector('#status-box').innerHTML = '<span class="fa fa-warning"></span> Verification failed! See log files :(';
     });
 }
 
@@ -145,14 +193,14 @@ function startVerify() {
  *
  */
 function completeDone() {
-    $('#status-box').html('<span class="fa fa-thumbs-up"></span> Installation + upgrade complete! Wait to be redirected...');
+    document.querySelector('#status-box').innerHTML = '<span class="fa fa-thumbs-up"></span> Installation + upgrade complete! Wait to be redirected...';
     setTimeout(function () {
         window.location = homeUrl;
     }, 3000);
 }
 
 function displaySoftFail(message) {
-    $('#status-box').html('<span class="fa fa-warning"></span> ' + message + '<br /><br />Please read the ' +
-                          '<a href="https://docs.firefly-iii.org/">' +
-                          'documentation</a> about this, and upgrade by hand.');
+    document.querySelector('#status-box').innerHTML = '<span class="fa fa-warning"></span> ' + message + '<br /><br />Please read the ' +
+        '<a href="https://docs.firefly-iii.org/">' +
+        'documentation</a> about this, and upgrade by hand.';
 }
diff --git a/resources/views/install/index.twig b/resources/views/install/index-old.twig
similarity index 89%
rename from resources/views/install/index.twig
rename to resources/views/install/index-old.twig
index 2635f4817a..e3c0a668b8 100644
--- a/resources/views/install/index.twig
+++ b/resources/views/install/index-old.twig
@@ -21,6 +21,6 @@
         var runCommandUrl = '{{ route('installer.runCommand') }}';
         var homeUrl = '{{ route('flush') }}';
     </script>
-    <script type="text/javascript" src="v1/js/ff/install/index.js" nonce="{{ JS_NONCE }}"></script>
+    <script type="text/javascript" src="v1/js/ff/install/Xindex.js" nonce="{{ JS_NONCE }}"></script>
 {% endblock %}
 
diff --git a/resources/views/install/index.blade.php b/resources/views/install/index.blade.php
new file mode 100644
index 0000000000..1ad8bb5049
--- /dev/null
+++ b/resources/views/install/index.blade.php
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <base href="{{ route('index') }}/"/>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Firefly III - Installation and update</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="title" content="Firefly III - Installation and update">
+
+    <!-- copy of head.blade.php -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="color-scheme" content="light dark">
+
+    <script type="text/javascript" nonce="{{ $JS_NONCE }}">
+        /*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+        (() => {
+            'use strict'
+            // todo store just happens to store in localStorage but if not, this would break.
+            const getStoredTheme = () => JSON.parse(localStorage.getItem('darkMode'))
+
+            const getPreferredTheme = () => {
+                const storedTheme = getStoredTheme()
+                if (storedTheme) {
+                    return storedTheme
+                }
+
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+            }
+
+            const setTheme = theme => {
+                if (theme === 'browser' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.documentElement.setAttribute('data-bs-theme', 'dark')
+                    window.theme = 'dark';
+                    return;
+                }
+                if (theme === 'browser' && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                    window.theme = 'light';
+                    document.documentElement.setAttribute('data-bs-theme', 'light')
+                    return;
+                }
+                document.documentElement.setAttribute('data-bs-theme', theme)
+                window.theme = theme;
+            }
+
+            setTheme(getPreferredTheme())
+
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+                const storedTheme = getStoredTheme()
+                if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                    setTheme(getPreferredTheme())
+                }
+            })
+        })()
+    </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    @vite(['resources/assets/v2/sass/app.scss'])
+
+</head>
+<body class="container bg-body-secondary">
+<div class="row">
+    <div class="col mt-3">
+        <img src="images/logo-session.png" width="68" height="100" alt="Firefly III Logo" title="Firefly III"/><br>
+    </div>
+</div>
+<div class="row">
+    <div class="col">
+        <h1><strong>Firefly</strong> III - <code>Installation and update</code></h1>
+    </div>
+</div>
+<div class="row">
+    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+        <div class="card">
+            <div class="card-body">
+                <p>The upgrade and installation is ongoing. Please track its progress through the box below.</p>
+                <div class="row">
+                    <div class="col-lg-12">
+                        <div id="status-box" style="border:1px #ddd solid;padding:5px;">
+                            <span class="fa fa-spin fa-spinner"></span> Waiting to start...
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@yield('scripts')
+<script type="text/javascript" nonce="{{ $JS_NONCE }}">
+    var token = '{{ csrf_token() }}';
+    var index = 0;
+    var runCommandUrl = '{{ route('installer.runCommand') }}';
+    var homeUrl = '{{ route('flush') }}';
+</script>
+<script type="text/javascript" src="v1/js/ff/install/index.js" nonce="{{ $JS_NONCE }}"></script>
+</body>
+</html>