diff --git a/.gitignore b/.gitignore
index 4a08d58..05cb567 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,7 @@
 /node_modules
 /public/hot
 /public/storage
-public/css/*
-public/js/*
+public/build/*
 public/fonts/vendor/*
 /storage/*.key
 /vendor
diff --git a/README.md b/README.md
index f3261b8..e012b44 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ In the instructions where we use `docker exec`, we assume your container is name
 If you don't want to use Docker, you need:
 - An environment that can host PHP websites, such as Apache, Ngnix or similar.
 - MySQL database to store data.
-- Comply with [Laravel 10 Requirements](https://laravel.com/docs/10.x/deployment)
+- Comply with [Laravel 11 Requirements](https://laravel.com/docs/11.x/deployment)
 - Manually build the composer, npm and setting up cron jobs and clearing all caches on updates.
 
 ## Setup and install
diff --git a/public/js/app.js.LICENSE.txt b/public/js/app.js.LICENSE.txt
deleted file mode 100644
index aa595f5..0000000
--- a/public/js/app.js.LICENSE.txt
+++ /dev/null
@@ -1,27 +0,0 @@
-/*!
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <http://feross.org>
- * @license  MIT
- */
-
-/*!
- * Vue.js v2.7.16
- * (c) 2014-2023 Evan You
- * Released under the MIT License.
- */
-
-/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-//! moment.js
-
-//! moment.js locale configuration
diff --git a/resources/js/app.js b/resources/js/app.js
index 515f4a7..bed07b3 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,30 +1,21 @@
-require('./bootstrap');
-
-import Vue from 'vue';
+import * as bootstrap from 'bootstrap'
 import moment from 'moment';
-import VueMoment from 'vue-moment';
-
+import { createApp } from 'vue';
+import AuthorizedClients from './components/passport/AuthorizedClients.vue';
+import Clients from './components/passport/Clients.vue';
+import PersonalAccessTokens from './components/passport/PersonalAccessTokens.vue';
+import axios from 'axios';
+
+window.axios = axios;
+window.bootstrap = bootstrap;
 window.moment = moment;
-window.Vue = Vue;
-
-
-Vue.use(VueMoment, {moment});
+window.createApp = createApp;
 
-Vue.component(
-    'passport-clients',
-    require('./components/passport/Clients.vue').default
-);
 
-Vue.component(
-    'passport-authorized-clients',
-    require('./components/passport/AuthorizedClients.vue').default
-);
+const app = createApp({});
 
-Vue.component(
-    'passport-personal-access-tokens',
-    require('./components/passport/PersonalAccessTokens.vue').default
-);
+app.component('passport-authorized-clients', AuthorizedClients);
+app.component('passport-clients', Clients);
+app.component('passport-personal-access-tokens', PersonalAccessTokens);
 
-const app = new Vue({
-    el: '#app'
-});
\ No newline at end of file
+app.mount('#app');
\ No newline at end of file
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
deleted file mode 100644
index 6922577..0000000
--- a/resources/js/bootstrap.js
+++ /dev/null
@@ -1,28 +0,0 @@
-window._ = require('lodash');
-
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
-window.axios = require('axios');
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo';
-
-// window.Pusher = require('pusher-js');
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     forceTLS: true
-// });
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index ffc8fd1..1ea4f0c 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -13,19 +13,25 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 
 html,body {
     height: 100%;
-    color: #011328;
 }
 
 h1{
 	font-size: 2.5rem;
+	color: #011328;
 }
 
 h2{
 	font-size: 1.5rem;
+	color: #011328;
+}
+
+i{
+	margin-left: 0.25rem;
 }
 
 p, .pp-bullet {
 	font-size: 0.9rem;
+	color: #011328;
 
 	a {
 		color: $primary !important;
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index bb123fa..637b612 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -9,12 +9,9 @@
 
     <title>{{ config('app.name', 'Handover') }}</title>
 
-    <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
-
     <!-- Styles -->
     <link rel="icon" href="{{ URL::asset('/favicon.ico') }}" type="image/x-icon"/>
-    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
 
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
diff --git a/vite.config.js b/vite.config.js
index 95c2085..432a60a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -42,5 +42,8 @@ export default ({ mode }) => {
                 '@': '/resources/js',
             },
         },
+        server: {
+            host: '127.0.0.1',
+        }
     });
 }
\ No newline at end of file
diff --git a/webpack.mix.js b/webpack.mix.js
deleted file mode 100644
index aee1708..0000000
--- a/webpack.mix.js
+++ /dev/null
@@ -1,18 +0,0 @@
-require('dotenv').config();
-const mix = require('laravel-mix');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
- */
-
-mix.js('resources/js/app.js', 'public/js').vue()
-    .sass('resources/sass/app.scss', 'public/css', {
-        additionalData: '$envColorPrimary: ' + (process.env.BOOTSTRAP_COLOR_PRIMARY || '#1a475f') + '; $envColorSecondary: ' + (process.env.BOOTSTRAP_COLOR_SECONDARY || '#484b4c') + '; $envColorTertiary: ' + (process.env.BOOTSTRAP_COLOR_TERTIARY || '#011328') + '; $envColorInfo: ' + (process.env.BOOTSTRAP_COLOR_INFO || '#17a2b8') + '; $envColorSuccess: ' + (process.env.BOOTSTRAP_COLOR_SUCCESS || '#41826e') + '; $envColorWarning: ' + (process.env.BOOTSTRAP_COLOR_WARNING || '#ff9800') + '; $envColorDanger: ' + (process.env.BOOTSTRAP_COLOR_DANGER || '#b63f3f') + '; $envBorderRadius: ' + (process.env.BOOTSTRAP_BORDER_RADIUS || '2px') + ';',
-    });
\ No newline at end of file