diff --git a/package.json b/package.json
index b861bce..d0a988b 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@parcel/transformer-inline-string": "2.11.0",
     "@parcel/transformer-sass": "^2.11.0",
     "@parcel/transformer-vue": "2.11.0",
+    "@types/node": "^20.11.17",
     "@types/three": "^0.160.0",
     "buffer": "^5.5.0||^6.0.0",
     "parcel": "^2.11.0"
diff --git a/src/App.vue b/src/App.vue
index 1fb00f2..0abcbe1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,35 +1,62 @@
 <script setup lang="ts">
-import ModelViewer from './ModelViewer.vue'
-
-import {ref} from "vue";
+import {defineAsyncComponent, ref} from "vue";
+import Sidebar from "./Sidebar.vue";
 import Loading from "./Loading.vue";
+import ModelViewerOverlay from "./ModelViewerOverlay.vue";
+
+// NOTE: The ModelViewer library is big, so we split it and import it asynchronously
+const ModelViewerWrapper = defineAsyncComponent({
+  loader: () => import('./ModelViewerWrapper.vue'),
+  loadingComponent: Loading,
+  delay: 0,
+});
 
 // Open models by default on wide screens
-let modelsOpened = ref(window.innerWidth > 600);
+let openSidebars = ref(window.innerWidth > 1200);
 </script>
 
 <template>
   <v-layout full-height>
-    <v-btn icon="$menu" @click="modelsOpened = !modelsOpened" style="position: absolute; z-index: 1"/>
-    <v-navigation-drawer v-model="modelsOpened" permanent>
-      <v-toolbar>
-        <v-toolbar-title>Models</v-toolbar-title>
-        <v-toolbar-items>
-          <v-btn icon="$close" @click="modelsOpened = !modelsOpened"/>
-        </v-toolbar-items>
-      </v-toolbar>
-      <v-list density="compact" nav> <!-- TODO: Accordion -->
-        <v-list-item><Loading/></v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-main >
-      <ModelViewer/>
+    <!-- The main content of the app is the model-viewer with the SVG "2D" overlay -->
+    <v-main id="main">
+      <model-viewer-wrapper/>
+      <model-viewer-overlay/>
     </v-main>
+    <!-- The left collapsible sidebar has the list of models -->
+    <sidebar :opened-init="openSidebars" side="left">
+      <template #toolbar>
+        <v-toolbar-title>Models</v-toolbar-title>
+      </template>
+      <v-expansion-panels>
+        <v-expansion-panel key="model-id">
+          <v-expansion-panel-title>? F ? E ? V | Model Name</v-expansion-panel-title>
+          <v-expansion-panel-text>
+            Content
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </sidebar>
+    <!-- The right collapsible sidebar has the list of tools -->
+    <sidebar :opened-init="openSidebars" side="right" width="150">
+      <template #toolbar>
+        <v-toolbar-title>Tools</v-toolbar-title>
+      </template>
+      <v-btn>Camera</v-btn>
+    </sidebar>
   </v-layout>
 </template>
 
+<!--suppress CssUnusedSymbol -->
 <style>
-html, body {
+html, body, #app, #main {
   height: 100%;
 }
+</style>
+
+<!--suppress CssUnusedSymbol -->
+<style scoped>
+/* Fix bug in hidden expansion panel text next to active expansion panel */
+.v-expansion-panel-title--active + .v-expansion-panel-text {
+  display: flex !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/Loading.vue b/src/Loading.vue
index e929dd8..e56db74 100644
--- a/src/Loading.vue
+++ b/src/Loading.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container style="height: 100%">
+  <v-container>
     <v-row justify="center" style="height: 100%">
       <v-col align-self="center">
         <v-progress-circular indeterminate style="display: block; margin: 0 auto;"/>
diff --git a/src/ModelViewer.vue b/src/ModelViewer.vue
index 136a346..4c2390d 100644
--- a/src/ModelViewer.vue
+++ b/src/ModelViewer.vue
@@ -12,8 +12,6 @@ const ModelViewerWrapper = defineAsyncComponent({
 </script>
 
 <template>
-  <model-viewer-wrapper/>
-  <model-viewer-overlay/>
 </template>
 
 <style scoped>
diff --git a/src/Sidebar.vue b/src/Sidebar.vue
new file mode 100644
index 0000000..52a6026
--- /dev/null
+++ b/src/Sidebar.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {ref} from "vue";
+
+const props = defineProps({
+  openedInit: Boolean,
+  side: String,
+  width: Number
+});
+
+let opened = ref(props.openedInit);
+const openIcon = props.side === 'left' ? '$next' : '$prev';
+
+</script>
+
+<template>
+  <v-btn :icon="openIcon" @click="opened = !opened" class="open-button" :class="side"/>
+  <v-navigation-drawer v-model="opened" permanent :location="side" :width="props.width">
+    <v-toolbar density="compact">
+      <slot name="toolbar"></slot>
+      <v-toolbar-items>
+        <slot name="toolbar-items"></slot>
+        <v-btn icon="$close" @click="opened = !opened"/>
+      </v-toolbar-items>
+    </v-toolbar>
+    <slot/>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+.open-button {
+  position: absolute;
+  bottom: 0;
+  /*z-index: 1;*/
+  border-radius: 0;
+}
+
+.open-button.right {
+  right: 0;
+}
+</style>
diff --git a/src/index.ts b/src/index.ts
index 8f9aae4..589edd4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,14 +1,10 @@
-// @ts-ignore
 globalThis.__VUE_OPTIONS_API__ = process.env.NODE_ENV === "development"
-// @ts-ignore
 globalThis.__VUE_PROD_DEVTOOLS__ = process.env.NODE_ENV === "development"
-// @ts-ignore
 globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = process.env.NODE_ENV === "development"
 
 // import {createApp} from 'vue/dist/vue.esm-browser.prod.js'
 // import {createApp} from 'vue/dist/vue.esm-browser.js'
 import {createApp} from 'vue'
-// @ts-ignore
 import App from './App.vue'
 
 
diff --git a/src/settings.ts b/src/settings.ts
index fc51a1e..35a5e96 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,6 +1,3 @@
-// @ts-ignore
-// import logo from "url:../assets/fox.glb";
-
 // These are the default values for the settings, which are overridden below
 export const settings = {
     // @ts-ignore
@@ -26,7 +23,7 @@ function parseSetting(name: string, value: string): any {
         } else {
             toExtend = prevValue;
         }
-        toExtend.push(parseSetting(name+".0", value));
+        toExtend.push(parseSetting(name + ".0", value));
         return toExtend;
     }
     switch (typeof prevValue) {
diff --git a/src/shims.d.ts b/src/shims.d.ts
new file mode 100644
index 0000000..7153250
--- /dev/null
+++ b/src/shims.d.ts
@@ -0,0 +1,6 @@
+// Avoids typescript error when importing files
+declare module '*.vue'
+declare module 'import.meta' {
+    const url: string
+    export default url
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e7144d2..3b4ceee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -949,6 +949,13 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@types/node@^20.11.17":
+  version "20.11.17"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.17.tgz#cdd642d0e62ef3a861f88ddbc2b61e32578a9292"
+  integrity sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/stats.js@*":
   version "0.17.3"
   resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.3.tgz#705446e12ce0fad618557dd88236f51148b7a935"
@@ -2025,6 +2032,11 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 update-browserslist-db@^1.0.13:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"