diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 3afc69ef..fa9e40a7 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,6 +4,8 @@
         "esbenp.prettier-vscode",
         "bradlc.vscode-tailwindcss",
         "vivaxy.vscode-conventional-commits",
-        "vue.volar"
+        "vue.volar",
+        "github.vscode-pull-request-github",
+        "github.vscode-github-actions"
     ]
 }
diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index 20baf034..1d4390d3 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -5,13 +5,24 @@
         scroll-height="400px"
         class="flex h-full flex-col"
         data-key="id"
+        :pt="{
+            header: {
+                class: 'p-1'
+            },
+            content: {
+                style: 'flex: 1;'
+            },
+            emptyMessage: {
+                style: 'height: 100%;'
+            }
+        }"
     >
         <template #header>
             <Toolbar class="border-none p-0">
                 <template #start>
                     <InputGroup class="mr-2">
                         <InputGroupAddon class="p-0">
-                            <PhMagnifyingGlass size="14" />
+                            <PhMagnifyingGlass />
                         </InputGroupAddon>
                         <InputText v-model="search" placeholder="Search"> </InputText>
                     </InputGroup>
@@ -25,8 +36,8 @@
                             @click="sortDescending = !sortDescending"
                         >
                             <template #icon>
-                                <PhSortAscending v-if="!sortDescending" size="14" />
-                                <PhSortDescending v-else size="14" />
+                                <PhSortAscending v-if="!sortDescending" />
+                                <PhSortDescending v-else />
                             </template>
                         </Button>
                         <Dropdown
@@ -40,7 +51,7 @@
                 <template #end>
                     <Button title="Load file" rounded @click="fileDialog.open()">
                         <template #icon>
-                            <PhUpload />
+                            <PhPlus />
                         </template>
                     </Button>
                 </template>
@@ -73,7 +84,9 @@
                 class="grid h-full select-none place-items-center opacity-60"
                 @dblclick="fileDialogOpenDblClick"
             >
-                <label v-if="media.length == 0"> No media imported </label>
+                <label v-if="CurrentProject.project.value?.media.length == 0">
+                    No media imported
+                </label>
                 <label v-else>No media found</label>
             </div>
         </template>
@@ -81,7 +94,6 @@
 </template>
 
 <script setup lang="ts">
-import { PhMagnifyingGlass, PhSortDescending, PhUpload } from '@phosphor-icons/vue';
 import Media from '@safelight/shared/Media/Media';
 import fuzzysearch from 'fuzzysearch';
 import MimeMatcher from 'mime-matcher';
@@ -90,7 +102,7 @@ import InputGroupAddon from 'primevue/inputgroupaddon';
 
 useDropZone(document.body, {
     onDrop(files) {
-        files?.forEach(project.loadFile);
+        files?.forEach(CurrentProject.loadFile);
     },
     dataTypes(types) {
         return !types.some((val) => {
@@ -109,29 +121,32 @@ fileDialog.onChange((fileList) => {
         const item = fileList.item(i);
 
         if (item) {
-            project.loadFile(item);
+            CurrentProject.loadFile(item);
         }
     }
 });
 
-const project = useProject();
-const media = project.project!.media;
-
 const search = ref('');
 const sortBy = ref<sortOptions>('Name');
 const sortDescending = ref(false);
 
 const sortedAndFiltered = shallowRef<Media[]>([]);
 
-watchDebounced([media, search, sortBy, sortDescending], sortAndFilter, {
-    deep: true,
-    debounce: 100,
-    maxWait: 1000,
-    immediate: true
-});
+watchDebounced(
+    [CurrentProject.project.value?.media, search, sortBy, sortDescending],
+    sortAndFilter,
+    {
+        deep: true,
+        debounce: 100,
+        maxWait: 1000,
+        immediate: true
+    }
+);
 
 function sortAndFilter() {
-    const filtered = media.filter((elem) => {
+    if (!CurrentProject.project.value) return;
+
+    const filtered = CurrentProject.project.value.media.filter((elem) => {
         if (search.value.length == 0) {
             return true;
         }
@@ -171,21 +186,3 @@ function fileDialogOpenDblClick(event: MouseEvent) {
 
 type sortOptions = 'Name' | 'Duration' | 'File type' | 'Media type';
 </script>
-
-<style lang="scss" scoped>
-.bg-checkerboard {
-    /* This is beautifully simple
-       https://stackoverflow.com/a/65129916 */
-    background: repeating-conic-gradient(#ffffff0a 0% 25%, transparent 0% 50%) 50% / 20px 20px;
-}
-
-:deep(.p-dataview-header) {
-    @apply p-1;
-}
-:deep(.p-dataview-content) {
-    @apply flex-1;
-}
-:deep(.p-dataview-emptymessage) {
-    @apply h-full;
-}
-</style>
diff --git a/packages/safelight/src/components/Editor/Library/LibraryItem.vue b/packages/safelight/src/components/Editor/Library/LibraryItem.vue
index da38049f..26767d8e 100644
--- a/packages/safelight/src/components/Editor/Library/LibraryItem.vue
+++ b/packages/safelight/src/components/Editor/Library/LibraryItem.vue
@@ -1,8 +1,10 @@
 <template>
-    <div class="bg-checkerboard flex aspect-video w-full items-center justify-center">
+    <div
+        class="bg-checkerboard flex aspect-video w-full items-center justify-center overflow-clip rounded-t-md"
+    >
         <img
             v-if="$props.item.previewImage.value"
-            class="max-h-full max-w-full rounded-t-md"
+            class="overflow-none max-h-full max-w-full"
             :aria-label="'Preview image for ' + $props.item.name.value"
             :src="$props.item.previewImage.value"
         />
@@ -34,8 +36,23 @@
             </template>
         </Button>
     </div>
-    <OverlayPanel id="library_item_menu" ref="overlay">
-        <Toolbar>
+    <OverlayPanel
+        id="library_item_menu"
+        ref="overlay"
+        :pt="{
+            content: {
+                style: 'padding: 0'
+            }
+        }"
+    >
+        <Toolbar
+            :pt="{
+                root: {
+                    class: 'p-1 rounded-b-none',
+                    style: 'border-width: 0 0 1px 0'
+                }
+            }"
+        >
             <template #center>
                 <Button
                     v-tooltip.bottom="{ value: 'Delete', showDelay: 500 }"
@@ -50,7 +67,14 @@
                 </Button>
             </template>
         </Toolbar>
-        <Menu :model="menuItems" />
+        <Menu
+            :model="menuItems"
+            :pt="{
+                root: {
+                    style: 'border: none;'
+                }
+            }"
+        />
     </OverlayPanel>
 </template>
 <script setup lang="ts">
@@ -64,8 +88,6 @@ const props = defineProps<{
     item: Media;
 }>();
 
-const project = useProject();
-
 const menuItems = ref<MenuItem[]>([
     {
         label: 'Temp'
@@ -74,9 +96,9 @@ const menuItems = ref<MenuItem[]>([
 
 const hasItemInTimeline = computed(
     () =>
-        project.project &&
-        project.project.isSimpleProject() &&
-        project.project.usesMedia(props.item)
+        CurrentProject.project.value &&
+        CurrentProject.project.value.isSimpleProject() &&
+        CurrentProject.project.value.usesMedia(props.item)
 );
 
 const alertt = (text: string) => window.alert(text);
@@ -85,18 +107,9 @@ const overlay = ref<OverlayPanel>();
 </script>
 
 <style lang="scss">
-#library_item_menu .p-overlaypanel-content {
-    padding: 0 !important;
-
-    > .p-menu {
-        border: none;
-    }
-    > .p-toolbar {
-        @apply border-surface-100/10 rounded-b-none p-1;
-
-        border-top-width: 0;
-        border-left-width: 0;
-        border-right-width: 0;
-    }
+.bg-checkerboard {
+    /* This is beautifully simple
+       https://stackoverflow.com/a/65129916 */
+    background: repeating-conic-gradient(#ffffff0a 0% 25%, transparent 0% 50%) 50% / 20px 20px;
 }
 </style>
diff --git a/packages/safelight/src/components/InplaceRename.vue b/packages/safelight/src/components/InplaceRename.vue
index 5becf148..da8edb4b 100644
--- a/packages/safelight/src/components/InplaceRename.vue
+++ b/packages/safelight/src/components/InplaceRename.vue
@@ -1,6 +1,6 @@
 <template>
     <slot v-if="!isOpen" name="default">
-        <label @dblclick="open()">{{ value }}</label>
+        <label class="cursor-pointer select-none" @dblclick="open()">{{ value }}</label>
     </slot>
     <slot v-else name="content" :cur-value="curValue" :close="close">
         <div v-focustrap>
diff --git a/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue b/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
index 5b82050b..e021591b 100644
--- a/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
+++ b/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
@@ -5,14 +5,14 @@
                 <h2 class="m-0 flex-1">Projects</h2>
                 <Button rounded title="Refresh list" @click="loadList()">
                     <template #icon>
-                        <PhArrowsClockwise size="18" />
+                        <PhArrowsClockwise />
                     </template>
                 </Button>
                 <SplitButton
                     label="New project"
                     rounded
                     :model="projectTypes"
-                    @click="project.new.newSimpleProject()"
+                    @click="CurrentProject.newSimpleProject()"
                 />
             </div>
         </template>
@@ -29,7 +29,7 @@
         </Column>
         <Column>
             <template #body="slotProps">
-                <Button @click="project.openProject(slotProps.data)">Open</Button>
+                <Button @click="CurrentProject.openProject(slotProps.data)">Open</Button>
             </template>
         </Column>
     </DataTable>
@@ -41,12 +41,10 @@ import { Storage, type StoredProject } from '@safelight/shared/base/Storage';
 import { DateTime } from 'luxon';
 import type { MenuItem } from 'primevue/menuitem';
 
-const project = useProject();
-
 const projectTypes: MenuItem[] = [
     {
         label: 'Simple',
-        command: project.new.newSimpleProject
+        command: () => CurrentProject.newSimpleProject()
     },
     { label: 'Test', command() {} }
 ] as const;
@@ -81,7 +79,7 @@ function formatDateTime(dt: string) {
 }
 
 async function setProjectName(newName: string, project: StoredProject) {
-    const storage = await getStorageControllerForProject(project);
+    const storage = await CurrentProject.getStorageControllerForProject(project);
     await storage?.UpdateStoredProject({ id: project.id, name: newName });
     loadList();
 }
diff --git a/packages/safelight/src/main.ts b/packages/safelight/src/main.ts
index 26e7748f..551cb9d7 100644
--- a/packages/safelight/src/main.ts
+++ b/packages/safelight/src/main.ts
@@ -28,6 +28,9 @@ app.use(PrimeVue, {
 } as PrimeVueConfiguration);
 app.use(ConfirmationService);
 
+// Phosphor icons
+app.provide('size', 18);
+
 // Directives
 app.directive('tooltip', Tooltip);
 app.directive('focustrap', FocusTrap);
diff --git a/packages/safelight/src/stores/currentProject.ts b/packages/safelight/src/stores/currentProject.ts
new file mode 100644
index 00000000..0858246e
--- /dev/null
+++ b/packages/safelight/src/stores/currentProject.ts
@@ -0,0 +1,138 @@
+/* eslint-disable no-dupe-class-members */
+import { router } from '@/main';
+import type BaseProject from '@safelight/shared/base/Project';
+import type { ProjectType } from '@safelight/shared/base/Project';
+import BaseStorageController, { Storage, type StoredProject } from '@safelight/shared/base/Storage';
+import MediaManager from '@safelight/shared/Storage/MediaManager';
+import { DateTime } from 'luxon';
+
+export class CurrentProject {
+    // see #14 for why
+    public static project = shallowRef<BaseProject>();
+    public static isLoaded = ref(false);
+
+    public static async openProject(
+        selectedProject: StoredProject | SessionProject,
+        goToEditor = true
+    ) {
+        this.isLoaded.value = false;
+        const storageType = await this.getStorageControllerForProject(selectedProject.type);
+        if (!storageType) {
+            throw new Error('Could not find storage controller for project type');
+        }
+
+        Storage.setStorage(storageType);
+
+        const project = await Storage.getStorage().LoadProject(selectedProject.id);
+
+        if (project) {
+            this.setProject(project);
+            this.setSessionProject(selectedProject);
+            if (goToEditor) await this.toEditor();
+            this.isLoaded.value = true;
+        } else {
+            console.error('Could not load project');
+        }
+    }
+
+    public static async toEditor() {
+        await router.push('/editor');
+    }
+
+    public static async newSimpleProject(goToEditor = true) {
+        const IndexedDbStorageController = (
+            await import('@safelight/shared/Storage/IndexedDbStorage')
+        ).default;
+        Storage.setStorage(new IndexedDbStorageController());
+        const SimpleProject = (await import('@safelight/shared/Project/SimpleProject')).default;
+        this.setProject(new SimpleProject());
+
+        if (goToEditor) await this.toEditor();
+    }
+
+    public static getStorageControllerForProject(
+        project: ProjectType
+    ): Promise<BaseStorageController | undefined>;
+    public static getStorageControllerForProject(
+        project: StoredProject
+    ): Promise<BaseStorageController | undefined>;
+    public static async getStorageControllerForProject(project: StoredProject | ProjectType) {
+        const type = typeof project === 'string' ? project : project.type;
+        if (type == 'Simple') {
+            return new (await import('@safelight/shared/Storage/IndexedDbStorage')).default();
+        } else {
+            console.error('Project type not supported');
+        }
+    }
+
+    public static setProject(newProject: BaseProject) {
+        this.project.value = newProject;
+        this.isLoaded.value = true;
+    }
+
+    public static setSessionProject(project: StoredProject | BaseProject | SessionProject) {
+        const sessionProject: SessionProject = {
+            id: project.id,
+            lastOpened: DateTime.now().toISO(),
+            type: project.type
+        };
+        sessionStorage.setItem('project', JSON.stringify(sessionProject));
+    }
+    public static getSessionProject() {
+        const item = window.sessionStorage.getItem('project');
+        if (!item) return;
+        return JSON.parse(item) as SessionProject;
+    }
+    public static clearSessionProject() {
+        sessionStorage.removeItem('project');
+    }
+
+    // Might want to move this to BaseProject or SimpleProject
+    public static loadFile(file: File) {
+        return new Promise<void>((resolve) => {
+            const storingProcessing = useObservable(MediaManager.StoreMedia(file));
+            watch(storingProcessing, (s) => {
+                console.log(s?.type, s?.hashProgress);
+            });
+
+            watch(storingProcessing, async () => {
+                if (storingProcessing.value && storingProcessing.value.type == 'done') {
+                    const existingMedia = this.project.value!.media.some(
+                        (m) => m.id == storingProcessing.value!.id
+                    );
+
+                    if (!existingMedia) {
+                        const media = await Storage.getStorage().LoadMedia(
+                            storingProcessing.value.id!
+                        );
+
+                        if (media) {
+                            this.project.value!.media.push(media);
+                            this.save();
+                        }
+                    }
+
+                    resolve();
+                }
+            });
+        });
+    }
+
+    public static async save() {
+        if (this.project.value) await Storage.getStorage().SaveProject(this.project.value);
+    }
+
+    public static async beforeExit(clearSession = true) {
+        if (this.project.value) {
+            if (clearSession) this.clearSessionProject();
+            await this.save();
+            this.project.value = undefined;
+        }
+    }
+}
+
+export interface SessionProject {
+    id: string;
+    type: ProjectType;
+    lastOpened: string;
+}
diff --git a/packages/safelight/src/stores/useProject.ts b/packages/safelight/src/stores/useProject.ts
index 8f6fa84f..42068512 100644
--- a/packages/safelight/src/stores/useProject.ts
+++ b/packages/safelight/src/stores/useProject.ts
@@ -1,113 +1,7 @@
-import { router } from '@/main';
-import type BaseProject from '@safelight/shared/base/Project';
-import BaseStorageController, { Storage, type StoredProject } from '@safelight/shared/base/Storage';
-import MediaManager from '@safelight/shared/Storage/MediaManager';
-
 export const useProject = defineStore('Project', () => {
     const cursor = ref(0);
-    const timelineViewStart = ref(0);
-    const timelineViewEnd = ref(0);
-
-    const project = shallowRef<BaseProject>();
-    const isLoaded = ref(false);
-
-    function setProject(newProject: BaseProject) {
-        project.value = newProject;
-        isLoaded.value = true;
-
-        useSessionStorage<string>('project', '').value = newProject.id;
-    }
-
-    function loadFile(file: File) {
-        return new Promise<void>((resolve) => {
-            const storingProcessing = useObservable(MediaManager.StoreMedia(file));
-            watch(storingProcessing, (s) => {
-                console.log(s?.type, s?.hashProgress);
-            });
-
-            watch(storingProcessing, async () => {
-                if (storingProcessing.value && storingProcessing.value.type == 'done') {
-                    const existingMedia = project.value!.media.some(
-                        (m) => m.id == storingProcessing.value!.id
-                    );
-
-                    if (!existingMedia) {
-                        const media = await Storage.getStorage().LoadMedia(
-                            storingProcessing.value.id!
-                        );
-
-                        if (media) {
-                            project.value!.media.push(media);
-                            save();
-                        }
-                    }
-
-                    resolve();
-                }
-            });
-        });
-    }
-
-    function save() {
-        if (project.value) Storage.getStorage().SaveProject(project.value);
-    }
 
     return {
-        project,
-        setProject,
-        loadFile,
-        isLoaded,
-        cursor,
-        timelineViewStart,
-        timelineViewEnd,
-        save,
-        openProject,
-        new: {
-            newSimpleProject
-        }
+        cursor
     };
 });
-
-async function newSimpleProject() {
-    const IndexedDbStorageController = (await import('@safelight/shared/Storage/IndexedDbStorage'))
-        .default;
-    Storage.setStorage(new IndexedDbStorageController());
-    const projectStore = useProject();
-    const SimpleProject = (await import('@safelight/shared/Project/SimpleProject')).default;
-    projectStore.setProject(new SimpleProject());
-
-    await toEditor();
-}
-
-export async function getStorageControllerForProject(
-    project: StoredProject
-): Promise<BaseStorageController | undefined> {
-    if (project.type == 'Simple') {
-        return new (await import('@safelight/shared/Storage/IndexedDbStorage')).default();
-    } else {
-        console.error('Project type not supported');
-    }
-}
-
-async function openProject(selectedProject: StoredProject) {
-    const storageType = await getStorageControllerForProject(selectedProject);
-    if (!storageType) {
-        throw new Error('Could not find storage controller for project type');
-    }
-
-    const projectStore = useProject();
-    Storage.setStorage(storageType);
-
-    const project = await Storage.getStorage().LoadProject(selectedProject.id);
-
-    if (project) {
-        projectStore.setProject(project);
-        await toEditor();
-    } else {
-        console.error('Could not load project');
-    }
-}
-
-async function toEditor() {
-    await router.push('/editor');
-}
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 7a9e4c23..0a09ecdc 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -1,68 +1,115 @@
 <template>
-    <Suspense v-if="project.isLoaded">
-        <template #default>
-            <Splitter layout="vertical" class="vertSlitter" @resize="clearSelection()">
-                <SplitterPanel>
-                    <Splitter @resize="clearSelection()">
-                        <SplitterPanel>
-                            <TabView class="flex h-full flex-col">
-                                <TabPanel>
-                                    <template #header>
-                                        <div class="flex items-center gap-2">
-                                            <PhFolders size="20" />
-                                            <span class="white-space-nowrap font-bold">
-                                                Library
-                                            </span>
-                                        </div>
-                                    </template>
-                                    <Library />
-                                </TabPanel>
-                            </TabView>
-                        </SplitterPanel>
-                        <SplitterPanel>
-                            <Monitor
-                                v-if="project.project?.timeline"
-                                :timeline="project.project?.timeline"
-                                class="min-h-100 w-full"
-                            />
-                        </SplitterPanel>
-                    </Splitter>
-                </SplitterPanel>
-                <SplitterPanel :size="40">
-                    <Timeline class="h-full w-full" />
-                </SplitterPanel>
-            </Splitter>
-        </template>
-    </Suspense>
+    <div v-if="CurrentProject.isLoaded.value" class="flex h-full w-full flex-col">
+        <Toolbar
+            :pt="{
+                root: {
+                    class: 'p-0'
+                }
+            }"
+        >
+            <template #start>
+                <Menubar :pt="{ root: { class: 'border-none' } }" :model="menuItems">
+                    <template #itemicon="{ item: { icon } }">
+                        <component :is="icon" v-if="icon" class="pr-1" />
+                    </template>
+                </Menubar>
+            </template>
+            <template #center>
+                <InplaceRename
+                    v-if="CurrentProject.project.value"
+                    :value="CurrentProject.project.value?.name.value"
+                    @change="
+                        (newName) => {
+                            CurrentProject.project.value!.name.value = newName;
+                            CurrentProject.save();
+                        }
+                    "
+                />
+            </template>
+        </Toolbar>
+        <Splitter layout="vertical" class="vertSlitter" @resize="clearSelection()">
+            <SplitterPanel>
+                <Splitter @resize="clearSelection()">
+                    <SplitterPanel>
+                        <TabView
+                            class="flex h-full flex-col"
+                            :pt="{
+                                panelContainer: {
+                                    class: 'flex-1'
+                                }
+                            }"
+                        >
+                            <TabPanel
+                                :pt="{
+                                    root: { class: 'h-full' }
+                                }"
+                            >
+                                <template #header>
+                                    <div class="flex items-center gap-2">
+                                        <PhFolders />
+                                        <span class="white-space-nowrap font-bold"> Library </span>
+                                    </div>
+                                </template>
+                                <Library />
+                            </TabPanel>
+                        </TabView>
+                    </SplitterPanel>
+                    <SplitterPanel>
+                        <Monitor
+                            v-if="CurrentProject.project.value?.timeline"
+                            :timeline="CurrentProject.project.value?.timeline"
+                            class="min-h-100 w-full"
+                        />
+                    </SplitterPanel>
+                </Splitter>
+            </SplitterPanel>
+            <SplitterPanel :size="40">
+                <Timeline class="h-full w-full" />
+            </SplitterPanel>
+        </Splitter>
+    </div>
     <ConfirmDialog group="noProjectDialog"> </ConfirmDialog>
 </template>
 
 <script setup lang="ts">
 import { router } from '@/main';
-import { Storage } from '@safelight/shared/base/Storage';
+import { PhFile } from '@phosphor-icons/vue';
+import type { MenuItem } from 'primevue/menuitem';
 import ConfirmDialog from 'primevue/confirmdialog';
-import SplitterPanel from 'primevue/splitterpanel';
 import { useConfirm } from 'primevue/useconfirm';
 
 const project = useProject();
 
 const projectErrorDialog = useConfirm();
 
+const menuItems: MenuItem[] = [
+    {
+        label: 'File',
+        icon: PhFile as any,
+        items: [
+            {
+                label: 'Exit',
+                disabled: false,
+                command: async () => {
+                    await CurrentProject.beforeExit();
+                    router.push('/projects');
+                }
+            }
+        ]
+    }
+];
+
 onMounted(async () => {
-    console.log('A');
     await router.isReady();
-    console.log('B');
-    if (!project.isLoaded) {
-        const lastId = useSessionStorage('project', undefined).value;
-        if (lastId) {
-            Storage.getProjects().then((projects) => {
-                const projectFromId = projects.find((p) => p.id == lastId);
-                if (projectFromId) {
-                    project.openProject(projectFromId);
-                } else {
-                    showNoProjectDialog();
-                }
-            });
+    if (!CurrentProject.isLoaded.value) {
+        const lastProject = CurrentProject.getSessionProject();
+        console.log(lastProject);
+        if (lastProject) {
+            if (lastProject) {
+                CurrentProject.openProject(lastProject, false /* Already here */);
+            } else {
+                showNoProjectDialog();
+            }
         } else {
             showNoProjectDialog();
         }
@@ -75,6 +122,8 @@ function showNoProjectDialog() {
         header: 'No project loaded',
         message: 'No project has been loaded, go to project list?',
         reject() {
+            // TODO: idk actually. What should happen when no projects are loaded and the user just says "No"
+            // Maybe use a regular Dialog, and add the "Yes" button to it
             router.push('/');
         },
         accept() {
@@ -87,9 +136,9 @@ function clearSelection() {
     document.getSelection()?.removeAllRanges();
 }
 
-onBeforeUnmount(() => {
-    if (project.isLoaded) {
-        project.save();
+onBeforeUnmount(async () => {
+    if (CurrentProject.isLoaded.value) {
+        await CurrentProject.beforeExit(false);
         project.$dispose();
     }
 });
@@ -97,14 +146,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .vertSlitter {
-    height: 100vh;
-}
-
-:deep(.p-tabview-panels) {
-    @apply flex-1;
-}
-:deep(.p-tabview-panel) {
-    @apply h-full;
+    height: 100%;
 }
 </style>
 
diff --git a/packages/safelight/src/views/dev/Packages.vue b/packages/safelight/src/views/dev/Packages.vue
index e1a1f17d..d73826b4 100644
--- a/packages/safelight/src/views/dev/Packages.vue
+++ b/packages/safelight/src/views/dev/Packages.vue
@@ -49,7 +49,7 @@
                                         style="text-decoration: none; text-decoration-line: none"
                                     >
                                         {{ item.from }}
-                                        <PhArrowSquareOut size="16" class="align-text-top" />
+                                        <PhArrowSquareOut class="align-text-top" />
                                     </a>
                                     <span
                                         v-if="item.author || item.license"
@@ -95,7 +95,7 @@
                                                 :title="'Open code repository for ' + item.from"
                                                 role="link"
                                                 @click="
-                                                    openUrl(item.repository.replace('git+', ''))
+                                                    openUrl(item.repository!.replace('git+', ''))
                                                 "
                                             >
                                                 <template #icon>
diff --git a/packages/shared/src/Project/SimpleProject.ts b/packages/shared/src/Project/SimpleProject.ts
index 18a7f6f2..7eeeb55c 100644
--- a/packages/shared/src/Project/SimpleProject.ts
+++ b/packages/shared/src/Project/SimpleProject.ts
@@ -6,7 +6,6 @@ import SimpleTimeline, { type SimpleTimelineConfig } from '../Timeline/SimpleTim
 
 export default class SimpleProject extends BaseProject {
     public id = uuidv4();
-    public name = 'Untitled';
     public type: ProjectType = 'Simple';
 
     public media = shallowReactive<Media[]>([]);
diff --git a/packages/shared/src/Storage/IndexedDbStorage.ts b/packages/shared/src/Storage/IndexedDbStorage.ts
index 2658424b..2e03d8aa 100644
--- a/packages/shared/src/Storage/IndexedDbStorage.ts
+++ b/packages/shared/src/Storage/IndexedDbStorage.ts
@@ -27,7 +27,7 @@ export default class IndexedDbStorageController extends BaseStorageController {
                 ? project
                 : {
                       id: project.id,
-                      name: project.name,
+                      name: project.name.value,
                       type: project.type,
                       media: project.media.map((m) => m.id).filter((id) => id !== undefined),
                       timelines: project.timelines.map((m) => m.id),
@@ -74,7 +74,7 @@ export default class IndexedDbStorageController extends BaseStorageController {
 
                     // Load all timelines and media
                     await Promise.allSettled([...timelineFetches, ...mediaFetches]);
-                    proj.name = project.name;
+                    proj.name.value = project.name;
                     return proj;
                 } else {
                     return;
diff --git a/packages/shared/src/base/Project.ts b/packages/shared/src/base/Project.ts
index 2b953103..f94f5e78 100644
--- a/packages/shared/src/base/Project.ts
+++ b/packages/shared/src/base/Project.ts
@@ -1,11 +1,11 @@
-import type { ComputedRef, Ref, ShallowReactive } from 'vue';
+import { ref, type ComputedRef, type Ref, type ShallowReactive } from 'vue';
 import type Media from '../Media/Media';
 import type SimpleProject from '../Project/SimpleProject';
 import type BaseTimeline from './Timeline';
 
 export default abstract class BaseProject {
     public abstract id: string;
-    public abstract name: string;
+    public name = ref('Untitled');
     public type: ProjectType = 'Base';
 
     public abstract media: ShallowReactive<Media[]>;
diff --git a/packages/shared/src/helpers/Video/GetVideoInfo.ts b/packages/shared/src/helpers/Video/GetVideoInfo.ts
index f0ffd6c6..719e95ae 100644
--- a/packages/shared/src/helpers/Video/GetVideoInfo.ts
+++ b/packages/shared/src/helpers/Video/GetVideoInfo.ts
@@ -21,14 +21,13 @@ export async function getVideoInfo(file: File) {
             });
 
         MediaInfoFactory({
-            locateFile(url, scriptDirectory) {
-                console.log(url, scriptDirectory);
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            locateFile(_url, _scriptDirectory) {
                 return MediaInfoWasmUrl;
             }
         }).then(async (mediaInfo) => {
             const data = await mediaInfo.analyzeData(() => file.size, readChunk);
 
-            console.log(data);
             resolve(data);
         });
     });