diff --git a/.prettierrc b/.prettierrc
index 7ca2d9c..1bc1ed2 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -9,7 +9,13 @@
   "trailingComma": "all",
   "singleQuote": true,
   "semi": true,
-  "importOrder": ["^@core/(.*)$", "^@ui/(.*)$", "@assets/(.*)$", "^[./]"],
+  "importOrder": [
+    "^@core/(.*)$",
+    "^@assets/(.*)$",
+    "^@components/(.*)$",
+    "^@views/(.*)$",
+    "^[./]"
+  ],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true
 }
diff --git a/index.html b/index.html
index 9ff106c..844c35a 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
-      html {
-        background-color: black;
+      button#decorum-tb-minimize,
+      button#decorum-tb-maximize,
+      button#decorum-tb-close {
+        color: white;
+      }
+
+      html,
+      body {
+        overscroll-behavior: none;
       }
     </style>
-    <link href="/src/main.css" rel="stylesheet" />
     <title>Codename Launcher</title>
   </head>
 
diff --git a/src-tauri/src/engines.rs b/src-tauri/src/engines.rs
index 3437bcf..a385e58 100644
--- a/src-tauri/src/engines.rs
+++ b/src-tauri/src/engines.rs
@@ -33,6 +33,7 @@ use tauri::State;
 /// ```
 ///
 #[derive(Serialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
 pub struct EngineContext {
     pub folder_path: String,
     pub exe_path: String,
@@ -461,6 +462,7 @@ impl EngineImageInfo for FPSPlusDetector {
 }
 
 #[derive(serde::Serialize)]
+#[serde(rename_all = "camelCase")]
 /// This is what we send to the frontend, it flattens the EngineContext fields and adds display info for the ui
 pub struct EngineCanonInfo {
     #[serde(flatten)]
diff --git a/src-tauri/src/instances.rs b/src-tauri/src/instances.rs
index 582c2c1..7151fac 100644
--- a/src-tauri/src/instances.rs
+++ b/src-tauri/src/instances.rs
@@ -48,6 +48,7 @@ use crate::{
 /// });
 /// ```
 #[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
 pub struct Instance {
     pub folder_path: String,
     pub edited_info: Option<EditableInstanceInfo>,
@@ -56,6 +57,7 @@ pub struct Instance {
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone, Default)]
+#[serde(rename_all = "camelCase")]
 /// The editable info for an instance
 pub struct EditableInstanceInfo {
     pub display_name: Option<String>,
@@ -70,6 +72,7 @@ pub struct EditableInstanceInfo {
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone, Default)]
+#[serde(rename_all = "camelCase")]
 /// HashMap for ease of use, use order for displaying
 pub struct InstanceList {
     pub instances: HashMap<String, Instance>,
diff --git a/src-tauri/src/mods.rs b/src-tauri/src/mods.rs
index 9390312..a9e3537 100644
--- a/src-tauri/src/mods.rs
+++ b/src-tauri/src/mods.rs
@@ -7,6 +7,7 @@ use std::{cell::RefCell, collections::HashMap, path::Path, sync::Mutex};
 use tauri::State;
 
 #[derive(Serialize, Deserialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
 pub struct ModContext {
     pub folder_path: String,
     pub mod_kind: ModKind,
@@ -417,6 +418,7 @@ impl ModImageInfo for VSliceModDetector {
 }
 
 #[derive(serde::Serialize)]
+#[serde(rename_all = "camelCase")]
 pub struct ModCanonInfo {
     #[serde(flatten)]
     pub context: ModContext,
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 127df39..d03d445 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -16,21 +16,18 @@
         "minWidth": 1000,
         "minHeight": 600,
         "visible": false,
-        "backgroundColor": "#2d1e32",
+        "backgroundColor": "#2c242e",
         "titleBarStyle": "Overlay",
         "hiddenTitle": true,
         "trafficLightPosition": {
           "x": 22,
           "y": 24
-        }
+        },
+        "devtools": true
       }
     ],
     "security": {
-      "csp": {
-        "default-src": [
-          "'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost"
-        ]
-      },
+      "csp": null,
       "assetProtocol": {
         "enable": true,
         "scope": ["**"]
diff --git a/src/Root.vue b/src/Root.vue
index a0f72c5..7951d18 100644
--- a/src/Root.vue
+++ b/src/Root.vue
@@ -1,23 +1,24 @@
 <script setup lang="ts">
+// This takes a while to load because expensive operations are running in component setup.
+// Next goal is to make Root and the first view draw as soon as possible.
+// Data loading should always be asynchronous if possible.
+// TODO: make Root draw as soon as possible.
+import { platform } from '@tauri-apps/plugin-os';
+import { computed, ref } from 'vue';
+
 import Background from '@components/Background.vue';
 import Categories from '@components/Categories.vue';
 import Titlebar from '@components/Titlebar.vue';
-import { invoke } from '@tauri-apps/api/core';
-import { platform } from '@tauri-apps/plugin-os';
+
 import Browse from '@views/Browse.vue';
 import Library from '@views/Library.vue';
 import Queue from '@views/Queue.vue';
 import Settings from '@views/Settings.vue';
-import { computed, onMounted, ref } from 'vue';
 
 import { Category } from './core/ui.ts';
 
 const curCategory = ref<Category>(Category.Library);
 
-onMounted(() => {
-  invoke('show_main_window');
-});
-
 const categoryComponents = {
   [Category.Library]: Library,
   [Category.Browse]: Browse,
@@ -31,7 +32,7 @@ const curCategoryComponent = computed(() => {
 </script>
 
 <template>
-  <div :data-tauri-drag-region="platform() === 'macos'" id="main">
+  <div id="main" :data-tauri-drag-region="platform() === 'macos'">
     <Background />
 
     <!-- Linux title bar removal is temporary until decorum plugin is fixed -->
@@ -47,17 +48,17 @@ const curCategoryComponent = computed(() => {
 </template>
 
 <style lang="css">
-@reference "./main.css";
+@reference "@main.css";
 
 #main {
-  @apply relative isolate pl-2 py-4 flex flex-col space-y-2 bg-modfriend-900 overflow-hidden;
+  @apply relative isolate flex flex-col gap-2.5 bg-modfriend-900 overflow-hidden;
 
   > :not(.background-layers) {
     @apply relative z-10;
   }
 
   > .content {
-    @apply grow;
+    @apply grow px-2;
   }
 }
 </style>
diff --git a/src/assets/images/bg/bg-codename.png b/src/assets/images/bg/bg-codename.png
deleted file mode 100644
index a55f780..0000000
Binary files a/src/assets/images/bg/bg-codename.png and /dev/null differ
diff --git a/src/components/Background.vue b/src/components/Background.vue
index 5c76a54..98dc007 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -60,7 +60,7 @@ watch(
 </template>
 
 <style lang="css">
-@reference "../main.css";
+@reference "@main.css";
 
 .background-layers {
   @apply absolute inset-0 z-0 pointer-events-none;
diff --git a/src/components/Categories.vue b/src/components/Categories.vue
index 288cad4..ae0dbae 100644
--- a/src/components/Categories.vue
+++ b/src/components/Categories.vue
@@ -16,8 +16,8 @@ const emit = defineEmits<{
   <div id="categories">
     <div
       :data-tauri-drag-region="platform() === 'macos'"
-      class="header flex gap-4 pb-2"
-      :class="platform() === 'macos' ? 'pl-22' : 'pl-4'"
+      class="flex gap-4 pr-4"
+      :class="platform() === 'macos' ? 'pl-22 pt-4' : 'pl-4'"
     >
       <button
         class="library-btn underline-selected uppercase font-display font-extrabold"
@@ -33,7 +33,7 @@ const emit = defineEmits<{
 </template>
 
 <style scoped lang="css">
-@reference maincss;
+@reference "@main.css";
 
 .library-btn {
   @apply flex items-center justify-center cursor-pointer;
diff --git a/src/components/Titlebar.vue b/src/components/Titlebar.vue
index 24cef64..5263f97 100644
--- a/src/components/Titlebar.vue
+++ b/src/components/Titlebar.vue
@@ -1,14 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const height = computed(() => {
+  const decorumEl = document.querySelectorAll<HTMLElement>(
+    '[data-tauri-decorum-tb]',
+  );
+
+  if (decorumEl.length > 0 && decorumEl[0] != undefined) {
+    return `${decorumEl[0].offsetHeight}px`;
+  }
+
+  return 32;
+});
+</script>
+
 <template>
-  <div id="titlebar">
-    <div class="system-text pl-2 -mt-2">Modfriend</div>
+  <div id="titlebar" :style="{ height: height }">
+    <div class="system-text">Modfriend</div>
   </div>
 </template>
 
 <style scoped lang="css">
+@reference "@main.css";
+
+#titlebar {
+  @apply px-3 py-2 box-border;
+}
+
 .system-text {
   @apply select-none;
-  font-size: 12px;
+
+  font-size: 14px;
   font-family: system-ui;
 }
 </style>
-
diff --git a/src/components/library/InstanceSettingsPopover.vue b/src/components/library/InstanceSettingsPopover.vue
index 8ac6b35..8931a9b 100644
--- a/src/components/library/InstanceSettingsPopover.vue
+++ b/src/components/library/InstanceSettingsPopover.vue
@@ -35,7 +35,7 @@ async function handleBannerSelect() {
   });
   if (selected) {
     console.log('Selected banner:', selected);
-    editDraft.value.banner_path = selected;
+    editDraft.value.bannerPath = selected;
   }
 }
 
@@ -52,24 +52,33 @@ defineProps<{
     >
       <img src="@assets/images/icon/wrench.png?url" />
     </PopoverTrigger>
+
     <PopoverPortal>
-      <PopoverContent align="end" :side-offset="8" class="instance-settings">
+      <PopoverContent
+        class="instance-settings"
+        prioritize-position
+        align="end"
+        :side-flip="false"
+        :side-offset="8"
+      >
         <legend>Instance Settings</legend>
+
         <div class="instance-setttings-content">
           <fieldset>
-            <label for="display-name"> Display Name </label>
+            <label for="display-name">Display Name</label>
+
             <input
               id="display-name"
               type="text"
-              v-model="editDraft.display_name"
+              v-model="editDraft.displayName"
             />
           </fieldset>
           <fieldset>
-            <label for="author"> Author </label>
+            <label for="author">Author</label>
             <input id="author" type="text" v-model="editDraft.author" />
           </fieldset>
           <fieldset>
-            <label for="version"> Version </label>
+            <label for="version">Version</label>
             <input
               id="version"
               type="text"
@@ -78,17 +87,17 @@ defineProps<{
             />
           </fieldset>
           <fieldset>
-            <label for="color"> Color </label>
-            <input id="color" type="color" v-model="editDraft.color_hex" />
+            <label for="color">Color</label>
+            <input id="color" type="color" v-model="editDraft.colorHex" />
           </fieldset>
           <fieldset class="col-span-2">
-            <label for="banner"> Banner Path </label>
+            <label for="banner">Banner Path</label>
             <div class="flex gap-1">
               <input
                 id="banner"
-                class="flex-grow"
+                class="grow"
                 type="text"
-                v-model="editDraft.banner_path"
+                v-model="editDraft.bannerPath"
               />
               <button
                 class="btn-simple w-8 rounded-full shrink-0 p-1"
@@ -99,7 +108,7 @@ defineProps<{
             </div>
           </fieldset>
           <fieldset class="col-span-2">
-            <label for="description"> Description </label>
+            <label for="description">Description</label>
             <textarea
               id="description"
               class="h-24"
@@ -121,19 +130,19 @@ defineProps<{
             </CollapsibleTrigger>
             <CollapsibleContent class="py-2 gap-2 flex flex-col">
               <fieldset>
-                <label for="launch-command"> Launch Command </label>
+                <label for="launch-command">Launch Command</label>
                 <input
                   id="launch-command"
                   type="text"
-                  v-model="editDraft.launch_command"
+                  v-model="editDraft.launchCommand"
                 />
               </fieldset>
               <fieldset>
-                <label for="launch-args"> Launch Arguments </label>
+                <label for="launch-args">Launch Arguments</label>
                 <input
                   id="launch-args"
                   type="text"
-                  v-model="editDraft.launch_args"
+                  v-model="editDraft.launchArgs"
                 />
               </fieldset>
             </CollapsibleContent>
@@ -151,7 +160,7 @@ defineProps<{
 </template>
 
 <style scoped lang="css">
-@reference "maincss";
+@reference "@main.css";
 
 :deep(.instance-settings) {
   @apply bg-modfriend-800 p-2 rounded-xl border border-modfriend-700 flex flex-col gap-4 mb-2 shadow-lg shadow-black/25;
diff --git a/src/components/library/widgets/WidgetAdvancedInfo.vue b/src/components/library/widgets/WidgetAdvancedInfo.vue
index 9d52840..5659a1b 100644
--- a/src/components/library/widgets/WidgetAdvancedInfo.vue
+++ b/src/components/library/widgets/WidgetAdvancedInfo.vue
@@ -29,7 +29,7 @@ const modsFileSize = computed(() => {
 
 const modsCount = computed(() => {
   if (props.instanceData.canonInfo.kind === 'engine') {
-    return props.instanceData.canonInfo.softcode_list.length;
+    return props.instanceData.canonInfo.softcodeList.length;
   }
   return null;
 });
@@ -41,7 +41,7 @@ async function computeSize() {
 
   try {
     totalBytes.value = await invoke<number>('get_dir_size', {
-      folderPath: props.instanceData.canonInfo.folder_path,
+      folderPath: props.instanceData.canonInfo.folderPath,
     });
 
     // If it's an engine that has mods, check the size of the mods folder as well
@@ -51,10 +51,7 @@ async function computeSize() {
       modsCount.value > 0
     ) {
       modsTotalBytes.value = await invoke<number>('get_dir_size', {
-        folderPath: await join(
-          props.instanceData.canonInfo.folder_path,
-          'mods',
-        ), // FIXME: mods folder could possibly be named differently (looking at you, Nightmarevision). Should account for that
+        folderPath: await join(props.instanceData.canonInfo.folderPath, 'mods'), // FIXME: mods folder could possibly be named differently (looking at you, Nightmarevision). Should account for that
       });
     }
   } catch (e) {
@@ -100,7 +97,7 @@ onMounted(computeSize);
       <div class="infobar-item">
         <span class="key">Version</span>
         <span class="value">{{
-          instanceData.canonInfo.canonical_version || 'N/A'
+          instanceData.canonInfo.canonicalVersion || 'N/A'
         }}</span>
       </div>
       <div class="infobar-item">
@@ -112,7 +109,7 @@ onMounted(computeSize);
 </template>
 
 <style scoped lang="css">
-@reference "maincss";
+@reference "@main.css";
 
 table {
   width: 100%;
diff --git a/src/components/library/widgets/WidgetRawData.vue b/src/components/library/widgets/WidgetRawData.vue
index ab65676..5818018 100644
--- a/src/components/library/widgets/WidgetRawData.vue
+++ b/src/components/library/widgets/WidgetRawData.vue
@@ -13,5 +13,5 @@ const props = defineProps<{
 </template>
 
 <style scoped lang="css">
-@reference "maincss";
+@reference "@main.css";
 </style>
diff --git a/src/core/engines.ts b/src/core/engines.ts
index df16aa9..7d2b40e 100644
--- a/src/core/engines.ts
+++ b/src/core/engines.ts
@@ -1,12 +1,12 @@
 import type { BasicCanonInfo } from '@core/instances';
 
 interface EngineContext {
-  folder_path: string;
-  exe_path: string;
-  engine_kind: number;
+  folderPath: string;
+  exePath: string;
+  engineKind: number;
 }
 
 export interface EngineCanonInfo extends EngineContext, BasicCanonInfo {
-  supports_softcode: boolean;
-  softcode_list: string[];
+  supportsSoftcode: boolean;
+  softcodeList: string[];
 }
diff --git a/src/core/instances.ts b/src/core/instances.ts
index 932f33f..5bc4c51 100644
--- a/src/core/instances.ts
+++ b/src/core/instances.ts
@@ -2,13 +2,13 @@ import type { EngineCanonInfo } from '@core/engines';
 import type { ModCanonInfo } from '@core/mods';
 
 export interface BasicCanonInfo {
-  canonical_display_name: string;
-  canonical_author: string;
-  canonical_color_hex: string;
-  canonical_icon_path: string | null;
-  canonical_banner_path: string | null;
-  canonical_launch_args: string | null;
-  canonical_command: string | null;
+  canonicalDisplayName: string;
+  canonicalAuthor: string;
+  canonicalColorHex: string;
+  canonicalIconPath: string | null;
+  canonicalBannerPath: string | null;
+  canonicalLaunchArgs: string | null;
+  canonicalCommand: string | null;
 }
 
 export type CanonInfo =
@@ -16,20 +16,20 @@ export type CanonInfo =
   | ({ kind: 'engine' } & EngineCanonInfo);
 
 export interface InstanceInfo {
-  display_name?: string;
+  displayName?: string;
   version?: string;
   author?: string;
   description?: string;
-  color_hex?: string;
-  icon_path?: string;
-  banner_path?: string;
-  launch_args?: string;
-  launch_command?: string;
+  colorHex?: string;
+  iconPath?: string;
+  bannerPath?: string;
+  launchArgs?: string;
+  launchCommand?: string;
 }
 
 export interface Instance {
-  folder_path: string;
-  edited_info?: InstanceInfo;
+  folderPath: string;
+  editedInfo?: InstanceInfo;
   children?: string[];
 }
 
diff --git a/src/core/mods.ts b/src/core/mods.ts
index fefa2fa..7dbf4d7 100644
--- a/src/core/mods.ts
+++ b/src/core/mods.ts
@@ -1,16 +1,16 @@
 import type { BasicCanonInfo } from '@core/instances';
 
 interface ModContext {
-  folder_path: string;
+  folderPath: string;
   mod_kind: number;
   mod_name: string;
   // data: any; // Not needed for the library view, can be very large
 }
 
 export interface ModCanonInfo extends ModContext, BasicCanonInfo {
-  canonical_description: string;
-  canonical_version: string;
-  canonical_color: string; // In hex format
-  canonical_icon?: string;
-  canonical_banner?: string;
+  canonicalDescription: string;
+  canonicalVersion: string;
+  canonicalColor: string; // In hex format
+  canonicalIcon?: string;
+  canonicalBanner?: string;
 }
diff --git a/src/main.css b/src/main.css
index 01b6228..6579335 100644
--- a/src/main.css
+++ b/src/main.css
@@ -139,20 +139,9 @@
   .btn-simple {
     @apply shrink-0 flex items-center justify-center hover:bg-modfriend-500/30 active:bg-modfriend-500/50 transition-colors aspect-square;
   }
+
   #widget {
     /* TODO: stylize this properly */
     border: 1px solid black;
   }
 }
-
-button#decorum-tb-minimize,
-button#decorum-tb-maximize,
-button#decorum-tb-close {
-  color: white;
-}
-
-/* Fix MacOS allowing you to scroll past the body */
-html,
-body {
-  overscroll-behavior: none;
-}
diff --git a/src/main.ts b/src/main.ts
index ec44175..68e0a8c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,21 @@
+import { invoke } from '@tauri-apps/api/core';
 import { createApp } from 'vue';
 
 import Root from './Root.vue';
 
-document.addEventListener('DOMContentLoaded', () => {
+async function onDOMContentLoadedAsync() {
+  // We want to show the window as early as possible with as little artifacts as possible.
+
+  // FIXME: Find better ways to trigger decorum.
+  document.body.appendChild(document.createElement('div'));
+  invoke('show_main_window');
+
+  // css might get big. Defer here instead of directly linking in index.html
+  await import('./main.css');
+
   createApp(Root).mount('#root');
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  onDOMContentLoadedAsync();
 });
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index 0d1dded..b7e3db5 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -10,5 +10,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>browse</div>
+  <div class="content flex flex-col items-center justify-center">
+    <h2 class="text-4xl font-medium">This section is Under Development!</h2>
+    <p class="text-lg">
+      You will be able to <u>browse for mods</u> in this section. Stay tuned!
+    </p>
+  </div>
 </template>
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 42d4bb7..cb7df03 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import InstanceSettingsPopover from '@components/library/InstanceSettingsPopover.vue';
-import WidgetAdvancedInfo from '@components/library/widgets/WidgetAdvancedInfo.vue';
-import WidgetRawData from '@components/library/widgets/WidgetRawData.vue';
 import { convertFileSrc, invoke } from '@tauri-apps/api/core';
 import { UnlistenFn, listen } from '@tauri-apps/api/event';
 import { open } from '@tauri-apps/plugin-dialog';
@@ -19,7 +16,11 @@ import { Instance, InstanceInfo, ListDisplayInfo } from '@core/instances';
 import { ModCanonInfo } from '@core/mods';
 import { globalStore } from '@core/store';
 
-import DEFAULT_BACKGROUND from '@assets/images/bg/codename.png?url';
+import DEFAULT_BACKGROUND from '@assets/images/bg/codename.png';
+
+import InstanceSettingsPopover from '@components/library/InstanceSettingsPopover.vue';
+import WidgetAdvancedInfo from '@components/library/widgets/WidgetAdvancedInfo.vue';
+import WidgetRawData from '@components/library/widgets/WidgetRawData.vue';
 
 const LAST_SELECTED_INSTANCE_KEY = 'lastSelectedInstance';
 const listItems = ref<ListDisplayInfo[]>([]);
@@ -71,25 +72,24 @@ async function handleAddClick() {
 async function handleLaunchClick() {
   if (curItem.value && curItem.value.canonInfo.kind === 'engine') {
     const workingDir =
-      curItem.value.instance?.folder_path ??
-      curItem.value.canonInfo.folder_path;
+      curItem.value.instance?.folderPath ?? curItem.value.canonInfo.folderPath;
     const launcherCommand =
-      curItem.value.instance?.edited_info?.launch_command ??
-      curItem.value.canonInfo.canonical_command ??
+      curItem.value.instance?.editedInfo?.launchCommand ??
+      curItem.value.canonInfo.canonicalCommand ??
       undefined;
     const launchArgs =
-      curItem.value.instance?.edited_info?.launch_args ??
-      curItem.value.canonInfo.canonical_launch_args ??
+      curItem.value.instance?.editedInfo?.launchArgs ??
+      curItem.value.canonInfo.canonicalLaunchArgs ??
       undefined;
 
     try {
       await invoke('launch_executable', {
         workingDir,
-        executablePath: curItem.value.canonInfo.exe_path,
+        executablePath: curItem.value.canonInfo.exePath,
         launcherCommand,
         launchArgs,
       });
-      console.log('Launching', curItem.value.canonInfo.exe_path);
+      console.log('Launching', curItem.value.canonInfo.exePath);
     } catch (error) {
       console.error('Failed to launch executable:', error);
     }
@@ -106,17 +106,16 @@ async function handleSave() {
   console.log('Saving', newInfo);
 
   await invoke('edit_instance', {
-    folderPath: curItem.value?.instance?.folder_path ?? '',
+    folderPath: curItem.value?.instance?.folderPath ?? '',
     newInfo,
   });
 
   // Keep in-memory state in sync
   const updatedItem = listItems.value.find(
-    (item) =>
-      item.instance?.folder_path === curItem.value?.instance?.folder_path,
+    (item) => item.instance?.folderPath === curItem.value?.instance?.folderPath,
   );
   if (updatedItem?.instance) {
-    updatedItem.instance.edited_info = newInfo;
+    updatedItem.instance.editedInfo = newInfo;
   }
 
   updateLibraryBackground(curItem.value);
@@ -125,9 +124,9 @@ async function handleSave() {
 async function handleDelete() {
   if (!curItem.value) return;
 
-  const deletedPath = curItem.value.instance?.folder_path;
+  const deletedPath = curItem.value.instance?.folderPath;
   const deletedIndex = listItems.value.findIndex(
-    (item) => item.instance?.folder_path === deletedPath,
+    (item) => item.instance?.folderPath === deletedPath,
   );
 
   await invoke('remove_engine_context', {
@@ -167,7 +166,7 @@ async function refreshEngineContexts() {
   var displayList: ListDisplayInfo[] = [];
   for (const instance of engineInstances) {
     const canonInfo = engineContexts.find(
-      (context) => context.folder_path === instance.folder_path,
+      (context) => context.folderPath === instance.folderPath,
     );
 
     if (canonInfo) {
@@ -182,7 +181,7 @@ async function refreshEngineContexts() {
       displayList.push(displayItem);
     } else {
       console.warn(
-        `TODO: Show if instance is missing (has no canon info) ${instance.folder_path}`,
+        `TODO: Show if instance is missing (has no canon info) ${instance.folderPath}`,
       );
     }
   }
@@ -196,7 +195,7 @@ async function getModDisplayItems(
 ) {
   const modContexts = await invoke<ModCanonInfo[]>(
     'get_mod_contexts_in_folder',
-    { folderPath: displayItem.canonInfo.folder_path },
+    { folderPath: displayItem.canonInfo.folderPath },
   );
   const modInstanceOrder = displayItem.instance?.children || [];
 
@@ -205,10 +204,10 @@ async function getModDisplayItems(
 
   for (const childfolderPath of modInstanceOrder) {
     const canonInfo = modContexts.find(
-      (context) => context.folder_path === childfolderPath,
+      (context) => context.folderPath === childfolderPath,
     );
     const instance = modInstances.find(
-      (instance) => instance.folder_path === childfolderPath,
+      (instance) => instance.folderPath === childfolderPath,
     );
 
     if (canonInfo && instance) {
@@ -231,7 +230,7 @@ function selectItem(item: ListDisplayInfo): void {
   // Remember the last selected instance
   localStorage.setItem(
     LAST_SELECTED_INSTANCE_KEY,
-    item.instance?.folder_path || '',
+    item.instance?.folderPath || '',
   );
 }
 function updateLibraryBackground(item: ListDisplayInfo | undefined): void {
@@ -241,15 +240,15 @@ function updateLibraryBackground(item: ListDisplayInfo | undefined): void {
   }
 
   const bannerPath =
-    item.instance?.edited_info?.banner_path ??
-    item.canonInfo.canonical_banner_path;
+    item.instance?.editedInfo?.bannerPath ?? item.canonInfo.canonicalBannerPath;
   if (bannerPath) {
     globalStore.background = convertFileSrc(bannerPath.trim());
+    console.log('test');
     return;
   }
 
   const colorHex =
-    item.instance?.edited_info?.color_hex ?? item.canonInfo.canonical_color_hex;
+    item.instance?.editedInfo?.colorHex ?? item.canonInfo.canonicalColorHex;
   globalStore.background = colorHex.trim();
   return;
 }
@@ -258,7 +257,7 @@ function getLastSelectedInstance(): ListDisplayInfo | undefined {
   const lastSelected = localStorage.getItem(LAST_SELECTED_INSTANCE_KEY);
   if (lastSelected) {
     return listItems.value.find(
-      (item) => item.instance?.folder_path === lastSelected,
+      (item) => item.instance?.folderPath === lastSelected,
     );
   }
   return undefined;
@@ -273,29 +272,29 @@ watch(curItem, () => {
 watch(instanceSettingsOpen, async (isOpen, wasOpen) => {
   if (isOpen && curItem.value) {
     editDraft.value = {
-      display_name:
-        curItem.value.instance?.edited_info?.display_name ??
-        curItem.value.canonInfo.canonical_display_name,
+      displayName:
+        curItem.value.instance?.editedInfo?.displayName ??
+        curItem.value.canonInfo.canonicalDisplayName,
       author:
-        curItem.value.instance?.edited_info?.author ??
-        curItem.value.canonInfo.canonical_author,
-      version: curItem.value.instance?.edited_info?.version ?? '',
-      description: curItem.value.instance?.edited_info?.description ?? '',
-      color_hex:
-        curItem.value.instance?.edited_info?.color_hex ??
-        curItem.value.canonInfo.canonical_color_hex ??
+        curItem.value.instance?.editedInfo?.author ??
+        curItem.value.canonInfo.canonicalAuthor,
+      version: curItem.value.instance?.editedInfo?.version ?? '',
+      description: curItem.value.instance?.editedInfo?.description ?? '',
+      colorHex:
+        curItem.value.instance?.editedInfo?.colorHex ??
+        curItem.value.canonInfo.canonicalColorHex ??
         '#000000',
-      launch_command:
-        curItem.value.instance?.edited_info?.launch_command ??
-        curItem.value.canonInfo.canonical_command ??
+      launchCommand:
+        curItem.value.instance?.editedInfo?.launchCommand ??
+        curItem.value.canonInfo.canonicalCommand ??
         '',
-      launch_args:
-        curItem.value.instance?.edited_info?.launch_args ??
-        curItem.value.canonInfo.canonical_launch_args ??
+      launchArgs:
+        curItem.value.instance?.editedInfo?.launchArgs ??
+        curItem.value.canonInfo.canonicalLaunchArgs ??
         '',
-      banner_path:
-        curItem.value.instance?.edited_info?.banner_path ??
-        curItem.value.canonInfo.canonical_banner_path ??
+      bannerPath:
+        curItem.value.instance?.editedInfo?.bannerPath ??
+        curItem.value.canonInfo.canonicalBannerPath ??
         '',
     };
     return;
@@ -388,7 +387,7 @@ onMounted(async () => {
             // Select one of the engines
             var newItem: ListDisplayInfo | undefined = listItems.value.find(
               (item) =>
-                item.instance?.folder_path === hoverState.value.paths?.[0],
+                item.instance?.folderPath === hoverState.value.paths?.[0],
             );
             if (newItem) {
               selectItem(newItem);
@@ -420,12 +419,15 @@ onBeforeUnmount(() => {
           <div class="flex items-center">
             <img src="@assets/images/icon/search.png?url" />
           </div>
+
           <input type="text" placeholder="Search..." class="search-bar" />
         </div>
+
         <button class="simple-button">
           <img src="@assets/images/icon/sort.png?url" />
         </button>
       </div>
+
       <ScrollAreaRoot class="instance-list scroll-area">
         <div
           class="dragdrop-overlay"
@@ -446,17 +448,19 @@ onBeforeUnmount(() => {
             >Drag and drop engine folders here to add them to your
             library.</span
           >
+
           <span v-else-if="hoverState.state === 'hoveringSidebar'"
             >Erm... doesn't look like a valid engine folder to me.</span
           >
         </div>
+
         <div class="scroll-area-content h-full min-h-0 overflow-hidden">
           <ScrollAreaViewport class="w-full h-full">
             <div
               class="engine-item"
               v-if="listItems.length !== 0"
               v-for="item in listItems"
-              :key="item.canonInfo.folder_path"
+              :key="item.canonInfo.folderPath"
               :class="{ current: item === curItem }"
               @click="selectItem(item)"
             >
@@ -464,34 +468,39 @@ onBeforeUnmount(() => {
                 src="@assets/images/engine/codename.png?url"
                 class="size-12 shrink-0"
               />
+
               <div class="info flex flex-col overflow-hidden">
                 <div class="text-sm truncate font-phantommuff">
                   {{
-                    item.instance?.edited_info?.display_name ||
-                    item.canonInfo.canonical_display_name
+                    item.instance?.editedInfo?.displayName ||
+                    item.canonInfo.canonicalDisplayName
                   }}
                 </div>
+
                 <div class="text-xs text-modfriend-300 truncate">
                   <span class="font-bold">
                     {{
-                      item.instance?.edited_info?.author ||
-                      item.canonInfo.canonical_author
+                      item.instance?.editedInfo?.author ||
+                      item.canonInfo.canonicalAuthor
                     }}
                   </span>
-                  <span v-if="item.instance?.edited_info?.version">
-                    {{ ' - v' + item.instance.edited_info.version }}
+
+                  <span v-if="item.instance?.editedInfo?.version">
+                    {{ ' - v' + item.instance.editedInfo.version }}
                   </span>
                 </div>
+
                 <div
                   class="text-xs text-modfriend-600 truncate"
                   v-if="item.canonInfo.kind === 'engine'"
                 >
                   {{
-                    `${item.canonInfo.softcode_list.length} ${item.canonInfo.softcode_list.length === 1 ? 'mod' : 'mods'} installed`
+                    `${item.canonInfo.softcodeList.length} ${item.canonInfo.softcodeList.length === 1 ? 'mod' : 'mods'} installed`
                   }}
                 </div>
               </div>
             </div>
+
             <div v-else class="p-4 text-modfriend-500 text-md">
               <b>No instances added yet!</b><br />
               Add an engine by clicking the
@@ -504,10 +513,12 @@ onBeforeUnmount(() => {
             </div>
           </ScrollAreaViewport>
         </div>
+
         <ScrollAreaScrollbar orientation="vertical" class="scrollbar">
           <ScrollAreaThumb class="thumb" />
         </ScrollAreaScrollbar>
       </ScrollAreaRoot>
+
       <button class="fab btn" @click="handleAddClick">
         <img src="@assets/images/icon/add.png?url" />
       </button>
@@ -519,14 +530,16 @@ onBeforeUnmount(() => {
       <div class="scroll-area-content h-full min-h-0 overflow-hidden">
         <ScrollAreaViewport class="w-full h-full viewport" v-if="curItem">
           <div class="banner-spacer" />
+
           <h1
             class="text-3xl mb-4 text-shadow-modfriend-900 text-shadow-md font-phantommuff"
           >
             {{
-              curItem?.instance?.edited_info?.display_name ||
-              curItem?.canonInfo.canonical_display_name
+              curItem?.instance?.editedInfo?.displayName ||
+              curItem?.canonInfo.canonicalDisplayName
             }}
           </h1>
+
           <div class="infobar">
             <div class="infobar-content">
               <button
@@ -534,36 +547,40 @@ onBeforeUnmount(() => {
                 @click="handleLaunchClick"
               >
                 <img src="@assets/images/icon/play.png?url" class="size-4" />
+
                 <span class="text-lg">launch</span>
               </button>
               <div
                 class="infobar-item"
                 v-if="
                   curItem.canonInfo.kind === 'engine' &&
-                  curItem.canonInfo.engine_kind
+                  curItem.canonInfo.engineKind
                 "
               >
                 <span class="key"> Engine Type </span>
+
                 <span class="value">
-                  {{ curItem.canonInfo.engine_kind }}
+                  {{ curItem.canonInfo.engineKind }}
                 </span>
               </div>
               <div class="infobar-item">
                 <span class="key"> Author </span>
+
                 <span class="value">
                   {{
-                    curItem.instance?.edited_info?.author ||
-                    curItem.canonInfo.canonical_author
+                    curItem.instance?.editedInfo?.author ||
+                    curItem.canonInfo.canonicalAuthor
                   }}
                 </span>
               </div>
               <div
                 class="infobar-item"
-                v-if="curItem.instance?.edited_info?.version"
+                v-if="curItem.instance?.editedInfo?.version"
               >
                 <span class="key"> Version </span>
+
                 <span class="value">
-                  {{ curItem.instance.edited_info.version }}
+                  {{ curItem.instance.editedInfo.version }}
                 </span>
               </div>
             </div>
@@ -574,6 +591,7 @@ onBeforeUnmount(() => {
               >
                 <img src="@assets/images/icon/delete.png?url" />
               </button>
+
               <InstanceSettingsPopover
                 v-model:open="instanceSettingsOpen"
                 v-model:editDraft="editDraft"
@@ -581,16 +599,20 @@ onBeforeUnmount(() => {
               />
             </div>
           </div>
+
           <div
-            v-if="curItem.instance?.edited_info?.description"
+            v-if="curItem.instance?.editedInfo?.description"
             class="text-modfriend-100 whitespace-pre-wrap"
           >
-            {{ curItem.instance.edited_info.description }}
+            {{ curItem.instance.editedInfo.description }}
           </div>
+
           <WidgetAdvancedInfo :instanceData="curItem" />
+
           <WidgetRawData :instanceData="curItem" />
         </ScrollAreaViewport>
       </div>
+
       <ScrollAreaScrollbar orientation="vertical" class="scrollbar">
         <ScrollAreaThumb class="thumb" />
       </ScrollAreaScrollbar>
@@ -598,8 +620,28 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
+<style lang="css">
+@reference "@main.css";
+
+/* This has to be unscoped because this uses wildcard selector */
+.main-content {
+  @apply flex-1 min-w-0 min-h-0;
+
+  /* This is terrible, but it's so that we can have full width components if we need to */
+  > .scroll-area-content {
+    > .viewport {
+      > div {
+        > * {
+          @apply pl-6 pr-4;
+        }
+      } /* Reka UI adds another div after the viewport */
+    }
+  }
+}
+</style>
+
 <style scoped lang="css">
-@reference "maincss";
+@reference "@main.css";
 
 .content {
   @apply flex flex-row min-h-0 min-w-0 w-full;
@@ -639,23 +681,10 @@ onBeforeUnmount(() => {
     }
   }
 }
-.main-content {
-  @apply flex-1 min-w-0 min-h-0;
-
-  /* This is terrible, but it's so that we can have full width components if we need to */
-  > .scroll-area-content {
-    > .viewport {
-      > div {
-        > * {
-          @apply pl-6 pr-4;
-        }
-      } /* Reka UI adds another div after the viewport */
-    }
-  }
-}
 
 .scroll-area {
   --scrollbar-size: 10px;
+
   .scroll-area-content {
     /* TODO: Figure out how to hide top/bottom depending on scroll position*/
     -webkit-mask-image: linear-gradient(
diff --git a/src/views/Queue.vue b/src/views/Queue.vue
index 606a835..e825158 100644
--- a/src/views/Queue.vue
+++ b/src/views/Queue.vue
@@ -10,5 +10,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>queue</div>
+  <div class="content flex flex-col items-center justify-center">
+    <h2 class="text-4xl font-medium">This section is Under Development!</h2>
+    <p class="text-lg">
+      You will be able to <u>manage pending mod downloads</u> in this section.
+      Stay tuned!
+    </p>
+  </div>
 </template>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 6a28d86..7547ac6 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -10,5 +10,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>settings</div>
+  <div class="content flex flex-col items-center justify-center">
+    <h2 class="text-4xl font-medium">This section is Under Development!</h2>
+    <p class="text-lg">
+      You will be able to <u>adjust app settings</u> in this section. Stay
+      tuned!
+    </p>
+  </div>
 </template>
diff --git a/tsconfig.json b/tsconfig.json
index 5ec9268..ac5259c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,6 @@
 
     "paths": {
       "@core/*": ["./src/core/*"],
-      "@ui/*": ["./src/ui/*"],
       "@assets/*": ["./src/assets/*"],
       "@components/*": ["./src/components/*"],
       "@views/*": ["./src/views/*"]
diff --git a/vite.config.ts b/vite.config.ts
index 3a04670..bdad6d5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -34,11 +34,11 @@ export default defineConfig(async () => ({
   resolve: {
     alias: {
       '@core': path.resolve(__dirname, 'src/core'),
-      '@ui': path.resolve(__dirname, 'src/ui'),
       '@assets': path.resolve(__dirname, 'src/assets'),
       '@components': path.resolve(__dirname, 'src/components'),
       '@views': path.resolve(__dirname, 'src/views'),
-      maincss: path.resolve(__dirname, 'src/main.css'),
+
+      '@main.css': path.resolve(__dirname, 'src/main.css'),
     },
   },
 }));