A lot of changes.

src/App.vue

@@ -10,15 +10,19 @@
         >
             <div class="uk-navbar-left">
                 <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
-                    >Piped</router-link
-                >
-            </div>
-            <div class="uk-navbar-center">
-                <input
-                    class="uk-input uk-form-width-large"
-                    type="text"
-                    placeholder="Search"
-                    v-model="searchText"
+                    ><img
+                        src="../public/img/icons/logo.svg"
+                        height="32"
+                        width="32"
+                    />iped</router-link
+                >
+            </div>
+            <div class="uk-navbar-center uk-flex">
+                <input
+                    class="uk-input"
+                    type="text"
+                    placeholder="Search"
+                    v-model="searchText"
                     @keypress="onChange($event)"
                 />
             </div>

src/components/WatchVideo.vue

@@ -66,12 +66,14 @@
 </template>
 
 <script>
-import "video.js/dist/video-js.css";
-import "@silvermine/videojs-quality-selector/dist/css/quality-selector.css";
+import("video.js/dist/video-js.css");
+import("@silvermine/videojs-quality-selector/dist/css/quality-selector.css");
 import videojs from "video.js";
-require("videojs-hotkeys");
+import("videojs-hotkeys");
 import Constants from "@/Constants.js";
-require("@silvermine/videojs-quality-selector")(videojs);
+import("@silvermine/videojs-quality-selector").then(module => {
+    module.default(videojs);
+});
 
 export default {
     name: "App",

src/main.js

@@ -4,8 +4,8 @@ import { faThumbsUp, faThumbsDown, faEye } from '@fortawesome/free-solid-svg-ico
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 library.add(faThumbsUp, faThumbsDown, faEye)
 
-require("uikit/src/less/uikit.less")
-require("uikit/dist/js/uikit.min.js")
+import("uikit/src/less/uikit.less")
+import("uikit/dist/js/uikit.min.js")
 
 import router from '@/router/router'
 import App from './App.vue'

src/router/router.js

@@ -1,30 +1,25 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Watch from '../components/WatchVideo.vue'
-import Trending from '../components/TrendingPage.vue'
-import Channel from '../components/Channel.vue'
-import Preferences from '../components/Preferences.vue'
-import SearchResults from '../components/SearchResults.vue'
 
 const routes = [{
     path: '/watch',
     name: 'Watch',
-    component: Watch
+    component: () => import('../components/WatchVideo.vue')
 }, {
     path: '/',
     name: 'Trending',
-    component: Trending
+    component: () => import('../components/TrendingPage.vue')
 }, {
     path: '/channel/:channelId',
     name: 'Channel',
-    component: Channel
+    component: () => import('../components/Channel.vue')
 }, {
     path: '/preferences',
     name: 'Preferences',
-    component: Preferences
+    component: () => import('../components/Preferences.vue')
 }, {
     path: '/results',
     name: 'SearchResults',
-    component: SearchResults
+    component: () => import('../components/SearchResults.vue')
 }]
 
 const router = createRouter({