diff --git a/.eslintrc.json b/.eslintrc.json
index 2869d819..c4428a8b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -36,6 +36,7 @@
         "@typescript-eslint/no-explicit-any": "off",
         "vue/no-v-for-template-key": "off",
         "vue/no-v-model-argument": "off",
+        "no-async-promise-executor": "off",
         "no-undef": "off"
     }
 }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c1f7d8fa..d871410f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -56,5 +56,11 @@ jobs:
             - name: Build safelight
               run: pnpm build:safelight
 
-            - name: Test
-              run: pnpm test
+            - name: Test darkroom
+              run: pnpm test:darkroom
+
+            - name: Test shared
+              run: pnpm test:shared
+
+            - name: Test timeline
+              run: pnpm test:timeline
diff --git a/package.json b/package.json
index 1b42fa9b..f887e52c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
         "build:timeline": "cd packages/timeline && pnpm build",
         "build:safelight": "cd packages/safelight && pnpm build",
         "test": "pnpm run -r test:run",
+        "test:darkroom": "cd packages/darkroom && pnpm test:run",
+        "test:shared": "cd packages/shared && pnpm test:run",
+        "test:timeline": "cd packages/timeline && pnpm test:run",
         "dev": "pnpm build:packages && cd packages/safelight && pnpm dev",
         "dev:darkroom": "pnpm build:packages && cd packages/darkroom && pnpm dev:web"
     },
diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index 0919b65c..0680745c 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -1,5 +1,12 @@
 <template>
-    <DataView :value="sortedAndFiltered" scrollable scroll-height="400px" data-key="id">
+    <DataView
+        :value="sortedAndFiltered"
+        scrollable
+        scroll-height="400px"
+        class="flex h-full flex-col"
+        data-key="id"
+        @dblclick="fileDialog.open()"
+    >
         <template #header>
             <Toolbar class="border-none p-0">
                 <template #start>
@@ -64,10 +71,10 @@
                         />
                     </div>
                     <p
-                        v-tooltip.bottom="{ value: item.name, showDelay: 1000 }"
+                        v-tooltip.bottom="{ value: item.name.value, showDelay: 1000 }"
                         class="m-0 mt-1 max-w-full overflow-x-hidden overflow-ellipsis text-base"
                     >
-                        {{ item.name }}
+                        {{ item.name.value }}
                     </p>
                     <p v-if="item.duration > 0">
                         {{ item.duration }}
@@ -75,27 +82,26 @@
                 </div>
             </div>
         </template>
+        <template #empty>
+            <div class="grid h-full place-items-center" @dblclick="fileDialog.open()">
+                <label class="select-none opacity-60">No media imported</label>
+            </div>
+        </template>
     </DataView>
 </template>
 
 <script setup lang="ts">
 import { PhMagnifyingGlass, PhSortDescending } from '@phosphor-icons/vue';
-import type BaseProject from '@safelight/shared/base/Project';
-import type Media from '@safelight/shared/Media/Media';
-import MediaManager from '@safelight/shared/Storage/MediaManager';
+import Media from '@safelight/shared/Media/Media';
 import fuzzysearch from 'fuzzysearch';
 import MimeMatcher from 'mime-matcher';
 import InputGroup from 'primevue/inputgroup';
 import InputGroupAddon from 'primevue/inputgroupaddon';
 import type { UnwrapRef } from 'vue';
 
-const emit = defineEmits<{
-    'update:modelValue': any[];
-}>();
-
-const dropZone = useDropZone(document.body, {
+useDropZone(document.body, {
     onDrop(files) {
-        files?.forEach(project);
+        files?.forEach(project.loadFile);
     },
     dataTypes(types) {
         return !types.some((val) => {
@@ -103,43 +109,32 @@ const dropZone = useDropZone(document.body, {
         });
     }
 });
+const fileDialog = useFileDialog({
+    accept: 'image/*,video/*'
+});
 
-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, () => {
-            if (storingProcessing.value && storingProcessing.value.type == 'done') {
-                const existingMedia = project.media.some(
-                    (m) => m.id.value == storingProcessing.value!.id
-                );
-
-                if (!existingMedia) {
-                    const media = new Media(storingProcessing.value.id!);
+fileDialog.onChange((fileList) => {
+    if (!fileList) return;
 
-                    project.media.push(media);
-                    project.activeTimeline.createTimelineItem(media);
-                }
+    for (let i = 0; i < fileList.length; i++) {
+        const item = fileList.item(i);
 
-                resolve();
-            }
-        });
-    });
-}
+        if (item) {
+            project.loadFile(item);
+        }
+    }
+});
 
-const project = inject<BaseProject>('currentProject');
-const media = useVModel(props, 'media', emit);
+const project = useProject();
+const media = project.project!.media;
 
 const search = ref('');
 const sortBy = ref<sortOptions>('Name');
 const sortDescending = ref(false);
 
-const sortedAndFiltered = ref<Media[]>([]);
+const sortedAndFiltered = shallowRef<Media[]>([]);
 
-watchDebounced([props.media, search, sortBy, sortDescending], sortAndFilter, {
+watchDebounced([media, search, sortBy, sortDescending], sortAndFilter, {
     deep: true,
     debounce: 100,
     maxWait: 1000,
@@ -147,12 +142,12 @@ watchDebounced([props.media, search, sortBy, sortDescending], sortAndFilter, {
 });
 
 function sortAndFilter() {
-    const filtered = media.value.filter((elem) => {
+    const filtered = media.filter((elem) => {
         if (search.value.length == 0) {
             return true;
         }
 
-        return fuzzysearch(search.value.toLowerCase(), elem.name.toLowerCase());
+        return fuzzysearch(search.value.toLowerCase(), elem.name.value.toLowerCase());
     });
 
     const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
@@ -161,16 +156,16 @@ function sortAndFilter() {
         const item1 = sortDescending.value ? b : a;
         const item2 = sortDescending.value ? a : b;
 
-        const ext1 = item1.name.split('.').at(-1) ?? 'ZZZ';
-        const ext2 = item2.name.split('.').at(-1) ?? 'ZZZ';
+        const ext1 = item1.name.value.split('.').at(-1) ?? 'ZZZ';
+        const ext2 = item2.name.value.split('.').at(-1) ?? 'ZZZ';
 
         switch (sortBy.value) {
             case 'Duration':
-                return item1.duration - item2.duration;
+                return item1.duration.value - item2.duration.value;
             case 'File type':
                 return collator.compare(ext1, ext2);
             default:
-                return collator.compare(item1.name, item2.name);
+                return collator.compare(item1.name.value, item2.name.value);
         }
     });
 
@@ -190,4 +185,10 @@ type sortOptions = 'Name' | 'Duration' | 'File type';
 :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/main.ts b/packages/safelight/src/main.ts
index ab259c0c..2a37149a 100644
--- a/packages/safelight/src/main.ts
+++ b/packages/safelight/src/main.ts
@@ -13,7 +13,7 @@ import Tooltip from 'primevue/tooltip';
 
 import './style.scss';
 
-const router = createRouter({
+export const router = createRouter({
     history: createWebHistory()
 });
 
diff --git a/packages/safelight/src/stores/useProject.ts b/packages/safelight/src/stores/useProject.ts
index 51730e1c..8b4e2e68 100644
--- a/packages/safelight/src/stores/useProject.ts
+++ b/packages/safelight/src/stores/useProject.ts
@@ -1,16 +1,61 @@
-import SimpleProject from '@safelight/shared/Project/SimpleProject';
+import type BaseProject from '@safelight/shared/base/Project';
+import { Storage } from '@safelight/shared/base/Storage';
+import MediaManager from '@safelight/shared/Storage/MediaManager';
 
 export const useProject = defineStore('Project', () => {
-    const activeTimelineIndex = ref(0);
     const cursor = ref(0);
     const timelineViewStart = ref(0);
     const timelineViewEnd = ref(0);
 
-    const project = new SimpleProject();
+    const project = shallowRef<BaseProject>();
+
+    function setProject(newProject: BaseProject) {
+        project.value = newProject;
+    }
+
+    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
+                    );
+
+                    console.log(existingMedia);
+                    if (!existingMedia) {
+                        const media = await Storage.getStorage().LoadMedia(
+                            storingProcessing.value.id!
+                        );
+
+                        if (media) {
+                            project.value!.media.push(media);
+                            save();
+                        }
+                        // project.activeTimeline.createTimelineItem(media);
+                    }
+
+                    resolve();
+                }
+            });
+        });
+    }
+
+    function save() {
+        if (project.value) Storage.getStorage().SaveProject(project.value);
+    }
 
     return {
+        project,
+        setProject,
+        loadFile,
         cursor,
         timelineViewStart,
-        timelineViewEnd
+        timelineViewEnd,
+        save
     };
 });
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 2dcebf14..9b959113 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -3,7 +3,7 @@
         <SplitterPanel>
             <Splitter>
                 <SplitterPanel>
-                    <TabView>
+                    <TabView class="flex h-full flex-col">
                         <TabPanel>
                             <template #header>
                                 <div class="flex items-center gap-2">
@@ -14,14 +14,14 @@
                             <!-- Dont break highlighting -->
                             <!-- eslint-disable-next-line prettier/prettier -->
                             <!-- prettier-ignore -->
-                            <Library :media="(project.media as any)" />
+                            <Library />
                         </TabPanel>
                     </TabView>
                 </SplitterPanel>
                 <SplitterPanel>
                     <Monitor
-                        v-if="project.activeTimeline"
-                        :timeline="project.activeTimeline"
+                        v-if="project.project?.timeline"
+                        :timeline="project.project?.timeline"
                         class="min-h-100 w-full"
                     />
                 </SplitterPanel>
@@ -35,18 +35,16 @@
 
 <script setup lang="ts">
 import { Storage } from '@safelight/shared/base/Storage';
-import MediaManager from '@safelight/shared/Storage/MediaManager';
-import { useObservable } from '@vueuse/rxjs';
 import SplitterPanel from 'primevue/splitterpanel';
 
-const fileDialog = useFileDialog({
-    accept: 'image/*,video/*'
-});
+// const fileDialog = useFileDialog({
+//     accept: 'image/*,video/*'
+// });
 
-const project = new SimpleProject();
-const loading = ref(false);
+const project = useProject();
+// const loading = ref(false);
 
-fileDialog.onChange((fileList) => {
+/* fileDialog.onChange((fileList) => {
     if (!fileList) return;
 
     loading.value = true;
@@ -59,33 +57,12 @@ fileDialog.onChange((fileList) => {
     Promise.all(promises).finally(() => {
         loading.value = false;
     });
-});
-
-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 media = await Storage.getStorage().LoadMedia(storingProcessing.value.id!);
-
-                if (media) {
-                    project.media.push(media);
-                    project.activeTimeline.createTimelineItem(media);
-                }
-
-                resolve();
-            }
-        });
-    });
-}
+}); */
 
 onBeforeUnmount(() => {
     // reset store, which currently tries to call 'this', trying to reference the store
     // project.$dispose();
+    if (project.project) Storage.getStorage().SaveProject(project.project);
 });
 </script>
 
@@ -93,6 +70,13 @@ onBeforeUnmount(() => {
 .vertSlitter {
     height: 100vh;
 }
+
+:deep(.p-tabview-panels) {
+    @apply flex-1;
+}
+:deep(.p-tabview-panel) {
+    @apply h-full;
+}
 </style>
 
 <route lang="json">
diff --git a/packages/safelight/src/views/projects.vue b/packages/safelight/src/views/projects.vue
index 482036e0..3cbcd63b 100644
--- a/packages/safelight/src/views/projects.vue
+++ b/packages/safelight/src/views/projects.vue
@@ -1,7 +1,23 @@
 <template>
     <Card>
         <template #content>
-            <DataTable :value="projects">
+            <DataTable :value="projects" :loading>
+                <template #header>
+                    <div class="align-items-center justify-content-between flex flex-wrap gap-2">
+                        <h2 class="m-0 flex-1">Projects</h2>
+                        <Button rounded title="Refresh list" @click="loadList()">
+                            <template #icon>
+                                <PhArrowsClockwise size="18" />
+                            </template>
+                        </Button>
+                        <SplitButton
+                            label="New project"
+                            rounded
+                            :model="projectTypes"
+                            @click="newSimpleProject()"
+                        />
+                    </div>
+                </template>
                 <Column field="name" header="Project" />
                 <Column field="type" header="Type" />
                 <Column header="Modified">
@@ -9,6 +25,11 @@
                         {{ formatDateTime((slotProps.data as StoredProject).updated) }}
                     </template>
                 </Column>
+                <Column>
+                    <template #body="slotProps">
+                        <Button @click="OpenProject(slotProps.data)">Open</Button>
+                    </template>
+                </Column>
             </DataTable>
         </template>
     </Card>
@@ -17,26 +38,76 @@
 <script setup lang="ts">
 import { Storage, type StoredProject } from '@safelight/shared/base/Storage';
 import { DateTime } from 'luxon';
+import { router } from '@/main';
+import type { MenuItem } from 'primevue/menuitem';
+
+const projectTypes: MenuItem[] = [
+    {
+        label: 'Simple',
+        command: newSimpleProject
+    },
+    { label: 'Test', command() {} }
+] as const;
 
 const projects = ref<StoredProject[]>([]);
 
+const loading = ref(true);
+
 onMounted(() => {
-    Storage.getStorage()
-        .getProjects()
+    loadList();
+});
+function loadList() {
+    loading.value = true;
+    Storage.getProjects()
         .then((p) => {
             projects.value = p;
         })
-        .catch(() => {
-            
+        .catch((err) => {
+            console.error(err);
+        })
+        .finally(() => {
+            loading.value = false;
         });
-});
+}
 
 function formatDateTime(dt: string) {
     const date = DateTime.fromISO(dt).toLocal();
-    const thisYear = DateTime.now().year;
-    if (date.year !== thisYear) {
-        return date.toFormat('dd LLL yyyy HH:mm');
+    return date.toLocaleString({ dateStyle: 'long', timeStyle: 'short' });
+}
+
+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());
+    toEditor();
+}
+
+async function OpenProject(selectedProject: StoredProject) {
+    if (selectedProject.type == 'Simple') {
+        const IndexedDbStorageController = (
+            await import('@safelight/shared/Storage/IndexedDbStorage')
+        ).default;
+
+        const projectStore = useProject();
+        Storage.setStorage(new IndexedDbStorageController());
+
+        const project = await Storage.getStorage().LoadProject(selectedProject.id);
+
+        if (project) {
+            projectStore.setProject(project);
+            toEditor();
+        } else {
+            console.error('Could not load project');
+        }
+    } else {
+        console.error('Project type not supported');
     }
-    return date.toFormat('dd LLL HH:mm');
+}
+
+function toEditor() {
+    router.push('/editor');
 }
 </script>
diff --git a/packages/shared/src/Project/SimpleProject.ts b/packages/shared/src/Project/SimpleProject.ts
index 9b57cef9..b09ecb04 100644
--- a/packages/shared/src/Project/SimpleProject.ts
+++ b/packages/shared/src/Project/SimpleProject.ts
@@ -11,7 +11,7 @@ export default class SimpleProject extends BaseProject {
 
     public media = shallowReactive<Media[]>([]);
 
-    protected selectedTimelineIndex = ref(0);
+    public selectedTimelineIndex = ref(0);
     public timelines = shallowReactive<SimpleTimeline[]>([]);
     public timeline = computed(() => this.timelines.at(this.selectedTimelineIndex.value)!);
 }
diff --git a/packages/shared/src/Storage/IndexedDbStorage.ts b/packages/shared/src/Storage/IndexedDbStorage.ts
index 8246df4a..2ad0653e 100644
--- a/packages/shared/src/Storage/IndexedDbStorage.ts
+++ b/packages/shared/src/Storage/IndexedDbStorage.ts
@@ -65,8 +65,13 @@ export default class IndexedDbStorageController extends BaseStorageController {
                 }
             });
     }
-    getProjects(): Promise<StoredProject[]> {
-        return this.db.project.toArray();
+    static getProjects(): Promise<StoredProject[]> {
+        return new Promise(async (resolve) => {
+            const db = new SafelightIndexedDB();
+            await db.open();
+            resolve(db.project.toArray());
+            db.close();
+        });
     }
 
     async SaveMedia(media: Media | StoredMedia): Promise<SaveResults> {
diff --git a/packages/shared/src/Storage/db.ts b/packages/shared/src/Storage/db.ts
index e33fe434..54c737c1 100644
--- a/packages/shared/src/Storage/db.ts
+++ b/packages/shared/src/Storage/db.ts
@@ -7,8 +7,10 @@ export class SafelightIndexedDB extends Dexie {
 
     constructor() {
         // Only during tests
-        if (global?.vitest) {
-            super('SafelightIdb', { indexedDB: global.indexedDB, IDBKeyRange: global.IDBKeyRange });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-ignore
+        if (window?.vitest) {
+            super('SafelightIdb', { indexedDB: window.indexedDB, IDBKeyRange: window.IDBKeyRange });
         } else {
             super('SafelightIdb');
         }
diff --git a/packages/shared/src/base/Project.ts b/packages/shared/src/base/Project.ts
index ac2620fc..2b953103 100644
--- a/packages/shared/src/base/Project.ts
+++ b/packages/shared/src/base/Project.ts
@@ -10,7 +10,7 @@ export default abstract class BaseProject {
 
     public abstract media: ShallowReactive<Media[]>;
 
-    protected abstract selectedTimelineIndex: Ref<number>;
+    public abstract selectedTimelineIndex: Ref<number>;
     public abstract timelines: ShallowReactive<BaseTimeline[]>;
     public abstract timeline: ComputedRef<BaseTimeline>;
 
diff --git a/packages/shared/src/base/Storage.ts b/packages/shared/src/base/Storage.ts
index f77f7147..a2cae9fc 100644
--- a/packages/shared/src/base/Storage.ts
+++ b/packages/shared/src/base/Storage.ts
@@ -18,7 +18,7 @@ export default abstract class BaseStorageController {
 
     abstract SaveProject(project: BaseProject): Promise<SaveResults>;
     abstract LoadProject(projectId: string): Promise<BaseProject | undefined>;
-    abstract getProjects(): Promise<StoredProject[]>;
+    static getProjects: () => Promise<StoredProject[]>;
 
     abstract SaveMedia(media: StoredMedia): Promise<SaveResults>;
     abstract SaveMedia(media: Media): Promise<SaveResults>;
@@ -34,16 +34,22 @@ export default abstract class BaseStorageController {
     // isWebFileSystem = (): this is IndexedDbStorageController => this.type == 'WebFileSystem';
 }
 
-// Singleton pattern
 export class Storage {
+    public static async getProjects(): Promise<StoredProject[]> {
+        const storageControllers = [(await import('../Storage/IndexedDbStorage')).default];
+
+        const getPromises = storageControllers.map((controller) => controller.getProjects());
+
+        const results = await Promise.all(getPromises);
+
+        return results.flat(1);
+    }
+
+    // Singleton pattern
     private static currentStorageController: BaseStorageController;
 
     static setStorage(storageController: BaseStorageController) {
-        if (!this.currentStorageController) {
-            this.currentStorageController = storageController;
-        } else {
-            throw new Error('Storage controller already defined');
-        }
+        this.currentStorageController = storageController;
     }
     static getStorage() {
         if (this.currentStorageController) {
diff --git a/packages/shared/src/helpers/Video/GetVideoInfo.ts b/packages/shared/src/helpers/Video/GetVideoInfo.ts
index aafdff43..f0ffd6c6 100644
--- a/packages/shared/src/helpers/Video/GetVideoInfo.ts
+++ b/packages/shared/src/helpers/Video/GetVideoInfo.ts
@@ -1,4 +1,5 @@
 import MediaInfoFactory, { type MediaInfoType, type ReadChunkFunc } from 'mediainfo.js';
+import MediaInfoWasmUrl from 'mediainfo.js/MediaInfoModule.wasm?url';
 import MimeMatcher from 'mime-matcher';
 
 export async function getVideoInfo(file: File) {
@@ -22,7 +23,7 @@ export async function getVideoInfo(file: File) {
         MediaInfoFactory({
             locateFile(url, scriptDirectory) {
                 console.log(url, scriptDirectory);
-                return '';
+                return MediaInfoWasmUrl;
             }
         }).then(async (mediaInfo) => {
             const data = await mediaInfo.analyzeData(() => file.size, readChunk);
diff --git a/packages/shared/test/Storage/indexedDB/Project.spec.ts b/packages/shared/test/Storage/indexedDB/Project.spec.ts
index 8df311d0..5b9ae38f 100644
--- a/packages/shared/test/Storage/indexedDB/Project.spec.ts
+++ b/packages/shared/test/Storage/indexedDB/Project.spec.ts
@@ -2,25 +2,23 @@ import { IDBKeyRange, indexedDB } from 'fake-indexeddb';
 import { expect, test } from 'vitest';
 import SimpleProject from '../../../src/Project/SimpleProject';
 import IndexedDbStorageController from '../../../src/Storage/IndexedDbStorage';
+import { Storage } from '../../../src/base/Storage';
 
-test('List projects', async () => {
-    global.indexedDB = indexedDB;
-    global.IDBKeyRange = IDBKeyRange;
+window.indexedDB = indexedDB;
+window.IDBKeyRange = IDBKeyRange;
 
+test('List project', async () => {
     const storage = new IndexedDbStorageController();
 
     const project = new SimpleProject();
     await storage.SaveProject(project);
 
-    const projects = await storage.getProjects();
+    const projects = await Storage.getProjects();
 
-    expect(projects[0].id).toBe(project.id);
+    expect(projects.some((p) => p.id == project.id)).toBeTruthy();
 });
 
 test('Retrieve project', async () => {
-    global.indexedDB = indexedDB;
-    global.IDBKeyRange = IDBKeyRange;
-
     const storage = new IndexedDbStorageController();
 
     const project = new SimpleProject();