diff --git a/frontend/index.html b/frontend/index.html
index 3cde71a..4a8deca 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -14,6 +14,6 @@
       <strong>We're sorry but Chorister doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
index 7954ce9..d5695fa 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "@vuelidate/validators": "^2.0.0",
     "axios": "^0.21.1",
     "depcheck": "^1.4.3",
+    "effect": "^2.0.3",
     "moment": "^2.29.4",
     "oidc-client": "^1.11.5",
     "pinia": "^2.0.23",
@@ -40,6 +41,7 @@
     "@typescript-eslint/parser": "^6.17.0",
     "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.11.0",
+    "prettier": "^3.1.1",
     "typescript": "^5.3.3",
     "vue-tsc": "^1.8.27"
   },
@@ -51,10 +53,21 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "eslint:recommended"
+      "eslint:recommended",
+      "@vue/typescript/recommended",
+      "prettier"
+    ],
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+      "parser": "@typescript-eslint/parser"
+    },
+    "plugins": [
+      "@typescript-eslint",
+      "prettier"
     ],
     "rules": {
       "no-unused-vars": "off",
+      "prettier/prettier": "error",
       "vue/multi-word-component-names": "off"
     }
   },
diff --git a/frontend/shims-vue.d.ts b/frontend/shims-vue.d.ts
deleted file mode 100644
index 314e3aa..0000000
--- a/frontend/shims-vue.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.vue' {
-    import Vue from 'vue'
-    export default Vue
-}
\ No newline at end of file
diff --git a/frontend/src/api.js b/frontend/src/api.js
deleted file mode 100644
index 90ed338..0000000
--- a/frontend/src/api.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import axios from 'axios'
-import { useAuth } from "@/stores/authStore";
-
-const SERVER_URL = import.meta.env.VITE_APP_BASE_URL + '/api';
-const auth = useAuth();
-const instance = axios.create({
-    baseURL: SERVER_URL,
-    timeout: 5000
-});
-instance.interceptors.request.use(
-    async config => {
-        // console.log('Starting Request', JSON.stringify(config, null, 2))
-        let accessToken = await auth.getAccessToken()
-        if(accessToken) {
-            config.headers.common.Authorization = 'Bearer ' + accessToken
-        }
-        return config
-    }
-)
-
-const functions = {
-
-    getGetConfig: (embeddedAttributeName) => {
-        return {
-            transformResponse: [
-                function(data) {
-                    return data ? JSON.parse(data)._embedded[embeddedAttributeName] : data;
-                }
-            ]
-        }
-    },
-
-    // Generic
-
-    delete: (resourceUri) => instance.delete(resourceUri),
-
-    // Register
-
-    register: (request) => instance.post('registration', request),
-
-    // Invites
-
-    getInvites: () => instance.get('invites', functions.getGetConfig('invites')),
-
-    updateInviteForId: (id, invite) => instance.put('invites/' + id, invite),
-
-    getInviteByToken: (token) => instance.get('invite?token=' + token),
-
-    acceptInvite: (request) => instance.post('invite/accept', request),
-
-    getToken: () => instance.get('choir/invitelink'),
-
-    deleteToken: () => instance.delete('choir/invitelink'),
-
-    // Songs
-
-    getSongById: (id) => instance.get('songs/' + id),
-
-    getAllSongs: () => instance.get('songs', functions.getGetConfig('songs')),
-
-    getSongsByCategoryId: (categoryId) => instance.get('songs/search/bycategory?id=' + categoryId, functions.getGetConfig('songs')),
-
-    createNewSong: (song) => instance.post('songs', song),
-
-    updateSongForId: (id, song) => instance.put('songs/' + id, song),
-
-    deleteSongForId: (id) => instance.delete('songs/' + id),
-
-    // Scores
-
-    getScoresBySongId: (songId) => instance.get('songs/' + songId + '/scores', functions.getGetConfig('scores')),
-
-    createNewScore: (score) => instance.post('scores', score),
-
-    updateScoreForId: (id, score) => instance.put('scores/' + id, score),
-
-    deleteScoreForId: (id) => instance.delete('scores/' + id),
-
-    // Categories
-
-    getCategoryById: (id) => instance.get('categories/' + id),
-
-    getAllCategories: () => instance.get('categories', functions.getGetConfig('categories')),
-
-    // Song categories
-
-    getSongCategories: (songId) => instance.get('songs/' + songId + '/categories', functions.getGetConfig('categories')),
-
-    postSongCategories: (songId, categoryUris) => instance.post('songs/' + songId + '/categories', categoryUris.join('\r\n'), {
-        headers: {
-            'content-type': 'text/uri-list'
-        }
-    }),
-
-    deleteSongCategory: (songId, categoryId) => instance.delete('songs/' + songId + '/categories/' + categoryId),
-
-    // Setlists
-
-    getSetlistById: (id) => instance.get('setlists/' + id),
-
-    getAllSetlists: () => instance.get('setlists', functions.getGetConfig('setlists')),
-
-    createNewSetlist: (setlist) => instance.post('setlists', setlist),
-
-    updateSetlistForId: (id, setlist) => instance.put('setlists/' + id, setlist),
-
-    deleteSetlistForId: (id) => instance.delete('setlists/' + id),
-
-    // Setlist songs
-
-    getSetlistEntries: (setlistId) => instance.get('setlists/' + setlistId + '/entries', functions.getGetConfig('setlistEntries')),
-
-    postSetlistEntry: (entry) => instance.post("setlistEntries", entry, {
-        headers: {
-            'content-type': 'application/json'
-        }
-    }),
-
-    deleteSetlistEntry: (setlistEntryId) => instance.delete("setlistEntries/" + setlistEntryId),
-    // My Choir
-
-    getChoirs: () => instance.get('choirs', functions.getGetConfig('choirs')),
-
-    updateChoirForId: (id, choir) => instance.post('choirs/' + id, choir),
-
-    // Users
-
-    getUsers: () => instance.get('users',  functions.getGetConfig('users')),
-
-    getUserById: (userId) => instance.get('users/' + userId),
-
-    getUser: () => instance.get('user'),
-
-    updateUserForId: (id, user) => instance.patch('users/' + id, user),
-
-}
-
-export default functions;
\ No newline at end of file
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
new file mode 100644
index 0000000..adc7e08
--- /dev/null
+++ b/frontend/src/api.ts
@@ -0,0 +1,141 @@
+import axios from 'axios'
+import { useAuth } from "@/stores/authStore";
+import { Invite, Song, Score, Category, Setlist, SetlistEntry, Choir, User, WithEmbedded, AcceptInvite, NewChoirRegistration } from "@/types";
+
+const SERVER_URL = import.meta.env.VITE_APP_BASE_URL + '/api';
+const auth = useAuth();
+const instance = axios.create({
+    baseURL: SERVER_URL,
+    timeout: 5000
+});
+instance.interceptors.request.use(
+    async config => {
+        let accessToken = await auth.getAccessToken()
+        if(accessToken) {
+            config.headers.common.Authorization = 'Bearer ' + accessToken
+        }
+        return config
+    }
+)
+
+const functions = {
+
+    getGetConfig: (embeddedAttributeName: string) => {
+        return {
+            transformResponse: [
+                function(data: string) {
+                    return data ? JSON.parse(data)._embedded[embeddedAttributeName] : data;
+                }
+            ]
+        }
+    },
+
+    // Generic
+
+    delete: (resourceUri: string) => instance.delete(resourceUri),
+
+    // Register
+
+    register: (request: NewChoirRegistration) => instance.post('registration', request),
+
+    // Invites
+
+    getInvites: () => instance.get<Array<Invite>>('invites', functions.getGetConfig('invites')),
+
+    updateInviteForId: (id: number, invite: any) => instance.put('invites/' + id, invite),
+
+    getInviteByToken: (token: string) => instance.get<Invite>('invite?token=' + token),
+
+    acceptInvite: (request: AcceptInvite) => instance.post('invite/accept', request),
+
+    getToken: () => instance.get<string>('choir/invitelink'),
+
+    deleteToken: () => instance.delete('choir/invitelink'),
+
+    // Songs
+
+    getSongById: (id: number) => instance.get<Song>('songs/' + id),
+
+    getAllSongs: () => instance.get<Array<Song>>('songs', functions.getGetConfig('songs')),
+
+    getSongsByCategoryId: (categoryId: number) => instance.get<Array<Song>>('songs/search/bycategory?id=' + categoryId, functions.getGetConfig('songs')),
+
+    createNewSong: (song: any) => instance.post<Song>('songs', song),
+
+    updateSongForId: (id: number, song: any) => instance.put<Song>('songs/' + id, song),
+
+    deleteSongForId: (id: number) => instance.delete('songs/' + id),
+
+    // Scores
+
+    getScoreById: (scoreId: number) => instance.get<Score>('scores/' + scoreId),
+
+    getScoresBySongId: (songId: number) => instance.get<Array<Score>>('songs/' + songId + '/scores', functions.getGetConfig('scores')),
+
+    createNewScore: (score: any) => instance.post('scores', score),
+
+    updateScoreForId: (id: number, score: any) => instance.put('scores/' + id, score),
+
+    deleteScoreForId: (id: number) => instance.delete('scores/' + id),
+
+    // Categories
+
+    getCategoryById: (id: number) => instance.get<Category>('categories/' + id),
+
+    getAllCategories: () => instance.get<Array<Category>>('categories', functions.getGetConfig('categories')),
+
+    // Song categories
+
+    getSongCategories: (songId: number) => instance.get<Array<Category>>('songs/' + songId + '/categories', functions.getGetConfig('categories')),
+
+    postSongCategories: (songId: number, categoryUris: string[]) => instance.post('songs/' + songId + '/categories', categoryUris.join('\r\n'), {
+        headers: {
+            'content-type': 'text/uri-list'
+        }
+    }),
+
+    deleteSongCategory: (songId: number, categoryId: number) => instance.delete('songs/' + songId + '/categories/' + categoryId),
+
+    // Setlists
+
+    getSetlistById: (id: number) => instance.get<Setlist>('setlists/' + id),
+
+    getAllSetlists: () => instance.get<Array<Setlist>>('setlists', functions.getGetConfig('setlists')),
+
+    createNewSetlist: (setlist: any) => instance.post('setlists', setlist),
+
+    updateSetlistForId: (id: number, setlist: any) => instance.put('setlists/' + id, setlist),
+
+    deleteSetlistForId: (id: number) => instance.delete('setlists/' + id),
+
+    // Setlist songs
+
+    getSetlistEntries: (setlistId: number) => instance.get<Array<SetlistEntry & WithEmbedded<"song", Song>>>('setlists/' + setlistId + '/entries', functions.getGetConfig('setlistEntries')),
+
+    postSetlistEntry: (entry: any) => instance.post("setlistEntries", entry, {
+        headers: {
+            'content-type': 'application/json'
+        }
+    }),
+
+    deleteSetlistEntry: (setlistEntryId: string) => instance.delete("setlistEntries/" + setlistEntryId),
+    
+    // My Choir
+
+    getChoirs: () => instance.get<Array<Choir>>('choirs', functions.getGetConfig('choirs')),
+
+    updateChoirForId: (id: number, choir: any) => instance.post('choirs/' + id, choir),
+
+    // Users
+
+    getUsers: () => instance.get<Array<User>>('users',  functions.getGetConfig('users')),
+
+    getUserById: (userId: number) => instance.get<User>('users/' + userId),
+
+    getUser: () => instance.get<User>('user'),
+
+    updateUserForId: (id: number, user: any) => instance.patch('users/' + id, user),
+
+}
+
+export default functions;
\ No newline at end of file
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 97ef8e9..7fca1f3 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -47,28 +47,19 @@
   </nav>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useAuth } from "@/stores/authStore";
 import { inject, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 
+// State
+const auth = useAuth();
+const { user, isLoggedIn } = storeToRefs(auth);
 
-export default {
-    setup() {
-        const logger = inject('vuejs3-logger');
+// Computed
+onMounted(() => {});
 
-        // State
-        const auth = useAuth();
-        const { user, isLoggedIn } = storeToRefs(auth);
-
-        // Computed
-        onMounted(() => {});
-
-        // Methods
-        const onLogin = () => auth.login()
-        const onLogout = () => auth.logout()
-
-        return { auth, user, isLoggedIn, onLogin, onLogout }
-    }
-}
+// Methods
+const onLogin = () => auth.login()
+const onLogout = () => auth.logout()
 </script>
\ No newline at end of file
diff --git a/frontend/src/components/ChoirMembers.vue b/frontend/src/components/ChoirMembers.vue
index 1eb0908..94e5990 100644
--- a/frontend/src/components/ChoirMembers.vue
+++ b/frontend/src/components/ChoirMembers.vue
@@ -4,11 +4,7 @@
             <div class="p-3">
                 <div class="members">
                     <h4 class="title is-4">Members</h4>
-                    <table
-                        class="table is-hoverable is-fullwidth"
-                        v-if="!loading"
-                        v-cloak
-                    >
+                    <table class="table is-hoverable is-fullwidth" v-if="!loading" v-cloak>
                         <thead>
                             <th>Name</th>
                             <th>Email</th>
@@ -22,7 +18,7 @@
                         <tfoot></tfoot>
                     </table>
                 </div>
-                
+
                 <!-- <div class="invites mt-5">
                     <h4 class="title is-4">Open invites</h4>
                     <table
@@ -60,15 +56,16 @@
 
                     <div class="is-flex mb-3" v-if="inviteLink">
                         <div class="control has-icons-right is-flex-grow-1 mr-2" @click="copyToken">
-                            <input class="button input" v-on:focus="$event.target.select()" ref="token" readonly :value="inviteLink"/>
+                            <input class="button input" v-on:focus="selectToken" ref="token" readonly
+                                :value="inviteLink" />
                             <span class="icon is-small is-right">
                                 <i class="fas fa-copy"></i>
                             </span>
                         </div>
                         <button class="button is-danger is-outlined" @click="deleteToken">
-                                <span class="icon is-small">
-                                  <i class="fas fa-times"></i>
-                                </span>
+                            <span class="icon is-small">
+                                <i class="fas fa-times"></i>
+                            </span>
                         </button>
                     </div>
 
@@ -88,122 +85,94 @@
     </div>
 </template>
 
-<script  lang="ts">
+<script setup lang="ts">
 import api from "./../api.js";
 import { onMounted, ref } from 'vue'
 import moment from "moment";
-
-export default {
-    props: {
-        choir: Object
-    },
-    setup (props) {
-        // state
-        
-        const members = ref([])
-        const invites = ref([])
-        const inviteLink = ref(null)
-        const token = ref()
-        const editing = ref(false)
-        const draftValues = ref(null)
-        const loading = ref(true)
-        const saving = ref(false)
-        const error = ref(null)
-
-        // Computed
-
-        onMounted(() => {
-            console.log(props.choir);
-            if (props.choir.inviteToken) {
-                let baseUrl = window.location.origin;
-                inviteLink.value = baseUrl + "/signup?invite=" + props.choir.inviteToken;
-            }
-            let membersLoaded = api.getUsers()
-                .then((response) => {
-                    console.log("Members loaded: ", response.data);
-                    members.value = response.data;
-                })
-                .catch((error) => {
-                    console.error(error);
-                    error.value = "Failed to load members";
-                });
-            let invitesLoaded = api.getInvites()
-                .then((response) => {
-                    console.log("Invites loaded: ", response.data);
-                    let allInvites = response.data;
-                    invites.value = allInvites.filter(i => !i.expired);
-                })
-                .catch((error) => {
-                    console.error(error);
-                    error.value = "Failed to load invites";
-                });
-            Promise.allSettled([membersLoaded, invitesLoaded]).then(()=> loading.value = false)
+import { Choir, User, Invite } from "@/types"
+import { PropType } from "vue";
+
+const props = defineProps({
+    choir: {
+        type: Object as PropType<Choir>,
+        required: true
+    }
+})
+
+// state
+
+const members = ref<Array<User>>([])
+const invites = ref<Array<Invite>>([])
+const inviteLink = ref<string>();
+const token = ref()
+const editing = ref(false)
+const draftValues = ref<Choir>()
+const loading = ref(true)
+const saving = ref(false)
+const error = ref<string>()
+
+// Computed
+
+onMounted(() => {
+    console.log(props.choir);
+    if (props.choir?.inviteToken) {
+        let baseUrl = window.location.origin;
+        inviteLink.value = baseUrl + "/signup?invite=" + props.choir.inviteToken;
+    }
+    let membersLoaded = api.getUsers()
+        .then((response) => {
+            console.log("Members loaded: ", response.data);
+            members.value = response.data;
         })
+        .catch((error) => {
+            console.error(error);
+            error.value = "Failed to load members";
+        });
+    let invitesLoaded = api.getInvites()
+        .then((response) => {
+            console.log("Invites loaded: ", response.data);
+            let allInvites = response.data;
+            invites.value = allInvites.filter((i: Invite) => !i.expired);
+        })
+        .catch((error) => {
+            console.error(error);
+            error.value = "Failed to load invites";
+        });
+    Promise.allSettled([membersLoaded, invitesLoaded]).then(() => loading.value = false)
+})
+
+// methods
+const formatDate = function (date: Date) {
+    if (date) {
+        return moment(String(date)).format('DD-MM-YYYY');
+    }
+}
+
+const generateToken = function () {
+    api.getToken()
+        .then((response) => {
+            console.log(response);
+            inviteLink.value = response.data;
+        });
+}
+
+const deleteToken = function () {
+    api.deleteToken()
+        .then(() => inviteLink.value = undefined);
+}
+
+const selectToken = (event: Event) => (event.target as HTMLInputElement).select()
 
-        // methods
-        const formatDate = function(date) {
-            if (date) {
-                return moment(String(date)).format('DD-MM-YYYY');
-            }
-        }
-
-        const save = function() {
-            saving.value = true;
-            var choir = draftValues.value;
-            if (!choir) {
-                return;
-            }
-            const promise = api.updateChoirForId(choir.id, choir);
-            promise.then(() => {
-                editing.value = false;
-                saving.value = false;
-                choir.value = choir;
-                draftValues.value = null;
-            })
-        }
-
-        const edit = function() {
-            draftValues.value = this.setlist;
-            editing.value = true;
-        }
-
-        const cancelEdit = function() {
-            draftValues.value = null;
-            editing.value = false;
-        }
-
-        const generateToken = function() {
-            api.getToken()
-                .then((response) => {
-                    console.log(response);
-                    inviteLink.value = response.data;
-                });
-        }
-
-        const deleteToken = function() {
-            api.deleteToken()
-                .then(() => inviteLink.value = null);
-        }
-
-        const copyToken = function() {
-            console.log(token.value);
-            token.value.focus();
-            document.execCommand('copy');
-        }
-
-        const revokeInvite = function(invite) {
-            console.log(invite);
-            invites.value = invites.value.filter(i => i !== invite);
-            invite.expired = true;
-            api.updateInviteForId(invite.id, invite);
-        }
-
-        return { 
-            members, invites, inviteLink, editing, draftValues, loading, saving, error, token,
-            formatDate, save, edit, cancelEdit, generateToken, deleteToken, copyToken, revokeInvite
-         };
-    },
+const copyToken = function () {
+    token.value.focus();
+    document.execCommand('copy');
 }
 
+// const revokeInvite = function (invite) {
+//     console.log(invite);
+//     invites.value = invites.value.filter(i => i !== invite);
+//     invite.expired = true;
+//     api.updateInviteForId(invite.id, invite);
+// }
 
 </script>
\ No newline at end of file
diff --git a/frontend/src/components/RepertoireMenu.vue b/frontend/src/components/RepertoireMenu.vue
index 9176a85..cde688c 100644
--- a/frontend/src/components/RepertoireMenu.vue
+++ b/frontend/src/components/RepertoireMenu.vue
@@ -3,13 +3,14 @@
 		<p class="menu-label">Repertoire</p>
 		<ul class="menu-list">
 			<li>
-				<router-link :to="{ name: 'Repertoire'}">All songs</router-link>
+				<router-link :to="{ name: 'Repertoire' }">All songs</router-link>
 			</li>
 			<li v-if="ready">
 				<div class="menu-header">By time of the year</div>
 				<ul>
 					<li v-for="(category) in categories.season" :key="category.id">
-						<router-link :to="{ name: 'CategorySeason', params: { id: category.id }}" append>{{ category.name }}</router-link>
+						<router-link :to="{ name: 'CategorySeason', params: { id: category.id } }" append>{{ category.name
+						}}</router-link>
 					</li>
 				</ul>
 			</li>
@@ -17,7 +18,8 @@
 				<div class="menu-header">By liturgical place</div>
 				<ul>
 					<li v-for="(category) in categories.liturgical" :key="category.id">
-						<router-link :to="{ name: 'CategoryLiturgical', params: { id: category.id }}" append>{{ category.name }}</router-link>
+						<router-link :to="{ name: 'CategoryLiturgical', params: { id: category.id } }" append>{{
+							category.name }}</router-link>
 					</li>
 				</ul>
 			</li>
@@ -30,47 +32,42 @@
 						<i class="fas fa-plus-square"></i>
 					</span>
 					Create setlist
-                </router-link>
+				</router-link>
 			</li>
-			<li v-for="(setlist) in allSetlists" :key="setlist.id" class="droppable" @drop="dropSong($event, setlist._links.self.href)" @dragover.prevent @dragenter.prevent>
-				<router-link :to="{ name: 'Setlist', params: { id: setlist.id }}" append>{{ setlist.name }}</router-link>
+			<li v-for="(setlist) in allSetlists" :key="setlist.id" class="droppable"
+				@drop="dropSong($event, setlist._links.self.href)" @dragover.prevent @dragenter.prevent>
+				<router-link :to="{ name: 'Setlist', params: { id: setlist.id } }" append>{{ setlist.name }}</router-link>
 			</li>
 		</ul>
 	</aside>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import api from "./../api.js";
-import { computed, inject, onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useSetlists } from "@/stores/setlistStore";
 import { useCategories } from "@/stores/categoryStore";
 import { storeToRefs } from "pinia";
 
-export default {
-    setup() {
-        const logger = inject('vuejs3-logger');
-        const categoryStore = useCategories();
-        const setlistStore = useSetlists();
+const categoryStore = useCategories();
+const setlistStore = useSetlists();
 
-        // State
-        const { error, allSetlists } = storeToRefs(setlistStore);
-        const { categories } = storeToRefs(categoryStore);
+// State
+const { error, allSetlists } = storeToRefs(setlistStore);
+const { categories } = storeToRefs(categoryStore);
 
-        // Computed
-        const ready = computed(() => !!categories);
+// Computed
+const ready = computed(() => !!categories);
 
-        onMounted(() => {
-            setlistStore.fetchAll();
-            categoryStore.fetchAll();
-        });
+onMounted(() => {
+	setlistStore.fetchAll();
+	categoryStore.fetchAll();
+});
 
-        // Methods
-        const dropSong = (event, setlistUri) => {
-            let songUri = event.dataTransfer.getData("text");
-            let entry = { setlist: setlistUri, song: songUri }
-            api.postSetlistEntry(entry);
-        }
-        return { setlistStore, allSetlists, categories, ready, dropSong, error }
-    }
+// Methods
+const dropSong = (event: DragEvent, setlistUri: string) => {
+	let songUri = event.dataTransfer?.getData("text");
+	let entry = { setlist: setlistUri, song: songUri }
+	api.postSetlistEntry(entry);
 }
 </script>
diff --git a/frontend/src/components/Score.vue b/frontend/src/components/Score.vue
index 86d2c35..330d4e4 100644
--- a/frontend/src/components/Score.vue
+++ b/frontend/src/components/Score.vue
@@ -58,65 +58,60 @@
         </div>
     </div>
 </template>
-<script lang="ts">
-import api from "./../api.js";
-import {computed, onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { PropType, computed, onMounted, ref } from 'vue'
 import { useScores } from "@/stores/scoreStore";
 import { useRoute, useRouter } from "vue-router";
+import { Score } from "@/types";
 
-export default {
-    props: {
-        value: Object
-    },
-    emits: ["remove"],
-    setup(props, { emit }) {
-        const scoreStore = useScores();
-        const route = useRoute();
-        const router = useRouter()
+const props = defineProps({
+    value: {
+        type: Object as PropType<Score>,
+        required: true            
+    }
+})
+const emit = defineEmits(["remove"])
 
-        // state
-        const score = ref(props.value);
-        const editing = ref(false);
-        const draftValues = ref();
-        const saving = ref(false);
-        const error = ref(null);
+const scoreStore = useScores();
+const route = useRoute();
+const router = useRouter()
 
-        // Computed
-        const isNew = computed(() => !score.value.id);
-        const previewUrl = computed(() => score.value.fileUrl?.replace("/view", "/preview"));
+// state
+const score = ref(props.value);
+const editing = ref(false);
+const draftValues = ref();
+const saving = ref(false);
+const error = ref(null);
 
-        onMounted(() => {
-            if (!score.value.id) {
-                draftValues.value = score.value;
-                editing.value = true;
-            }
-        });
+// Computed
+const isNew = computed(() => !score.value.id);
+const previewUrl = computed(() => score.value.fileUrl?.replace("/view", "/preview"));
 
-        // Methods
-        const edit = () => {
-            draftValues.value = score.value;
-            editing.value = true;
-        }
+onMounted(() => {
+    if (!score.value.id) {
+        draftValues.value = score.value;
+        editing.value = true;
+    }
+});
 
-        const save = () => {
-            score.value = draftValues.value;
-            editing.value = false;
-            console.log(score.value);
-            if(score.value.id) {
-                api.updateScoreForId(score.value.id, score.value);
-            } else {
-                api.createNewScore(score.value);
-            }
-        }
+// Methods
+const edit = () => {
+    draftValues.value = score.value;
+    editing.value = true;
+}
+
+const save = () => {
+    score.value = draftValues.value;
+    editing.value = false;
+    console.log(score.value);
+    scoreStore.saveToServer(score.value)
+}
 
-        const cancelEdit = () => {
-            editing.value = false;
-            draftValues.value = null;
-            if(!score.value.id) {
-                emit("remove");
-            }
-        }
-        return { score, editing, draftValues, saving, previewUrl, edit, save, cancelEdit }
+const cancelEdit = () => {
+    editing.value = false;
+    draftValues.value = null;
+    if(!score.value.id) {
+        emit("remove");
     }
 }
 </script>
diff --git a/frontend/src/components/SetlistDetail.vue b/frontend/src/components/SetlistDetail.vue
index 4cb5a47..522bf48 100644
--- a/frontend/src/components/SetlistDetail.vue
+++ b/frontend/src/components/SetlistDetail.vue
@@ -2,7 +2,7 @@
     <div class="setlist-detail">
         <div v-if="!loading">
             <div class="setlist-info m-3 is-flex is-align-content-flex-start">
-                <h1 class="title is-flex-grow-1 mr-3" v-if="!editing">{{ setlist.name }}</h1>
+                <h1 class="title is-flex-grow-1 mr-3" v-if="!editing">{{ setlist?.name }}</h1>
                 <div class="field is-horizontal is-flex-grow-1 mr-3" v-if="editing">
                     <div class="field-label is-normal">
                         <label class="label">Name</label>
@@ -10,7 +10,7 @@
                     <div class="field-body">
                         <div class="field" v-bind:class="{ static: !editing }" >
                             <div class="control">
-                                <input v-model="draftValues.name" class="input" type="text" placeholder="Easter Morning Service" />
+                                <input v-model="draftValues?.name" class="input" type="text" placeholder="Easter Morning Service" />
                             </div>
                         </div>
                     </div>
@@ -22,7 +22,7 @@
                     <div class="field-body">
                         <div class="field" v-bind:class="{ static: !editing }" >
                             <div class="control">
-                                <input v-model="draftValues.date" class="input" type="date" />
+                                <input v-model="draftValues?.date" class="input" type="date" />
                             </div>
                         </div>
                     </div>
@@ -68,99 +68,96 @@
                     </p>
                 </div>
             </div>
-            <div class="subtitle m-3" v-if="!editing">{{ setlist.date }}</div>
+            <div class="subtitle m-3" v-if="!editing">{{ setlist?.date }}</div>
         </div>
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useSetlists } from "@/stores/setlistStore";
-import { inject, onMounted, ref } from "vue";
-import {useRoute, useRouter} from "vue-router";
+import { Setlist } from "@/types";
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-export default {
-    setup() {
-        const logger = inject('vuejs3-logger');
-        const store = useSetlists()
-        const route = useRoute()
-        const router = useRouter()
+type DraftSetlist = Partial<Setlist>
 
-        // State
-        const setlist = ref({});
-        const editing = ref(false);
-        const draftValues = ref(null);
-        const loading = ref(true);
-        const saving = ref(false);
-        const error = ref(null);
+const store = useSetlists()
+const route = useRoute()
+const router = useRouter()
 
-        // Mounted
-        onMounted(() => {
-            if (route.name === "NewSetlist") {
-                draftValues.value = {};
-                editing.value = true;
-                loading.value = false;
-            } else {
-                const setlistId = route.params.id;
-                store.get(setlistId).then(value => {
-                    console.log("Loading...", loading.value);
-                    setlist.value = value;
-                    loading.value = false;
-                    console.log("value setlist: ", value);
-                    console.log("value setlist: ", setlist.value);
-                    console.log("Loading..", loading.value);
-                });
-            }
-        })
+// State
+const setlist = ref<Setlist>();
+const editing = ref(false);
+const draftValues = ref<DraftSetlist | null>(null);
+const loading = ref(true);
+const saving = ref(false);
+const error = ref<string | null>(null);
 
-        // Methods
-        const isNew = () => !setlist.value.id;
-        const save = () => {
-            saving.value = true;
-            const newSetlist = draftValues.value;
-            if (!newSetlist) {
-                return;
-            }
-            const promise = store.saveToServer(newSetlist);
-            promise.then((response) => {
-                const isNewSetlist = isNew();
-                if(isNewSetlist) {
-                    newSetlist.id = response.data.id;
-                }
-                editing.value = false;
-                saving.value = false;
-                setlist.value = newSetlist;
-                draftValues.value = null;
-                if(isNewSetlist) {
-                    store.put(setlist.value);
-                    router.push({
-                        name: "Setlist",
-                        params: { id: newSetlist.id },
-                    });
-                }
-            })
-        }
-        const edit = () => {
-            draftValues.value = setlist.value;
-            editing.value = true;
-        }
-        const cancelEdit = () => {
-            draftValues.value = null;
-            editing.value = false;
-        }
-        const remove = () => store.remove(setlist.value.id)
-            .then(() => {
-                router.push({ name: "Repertoire" });
-            });
+// Mounted
+onMounted(() => {
+    if (route.name === "NewSetlist") {
+        draftValues.value = {};
+        editing.value = true;
+        loading.value = false;
+    } else {
+        const setlistId = Number(route.params.id);
+        store.get(setlistId).then(value => {
+            setlist.value = value;
+            loading.value = false;
+        });
+    }
+})
+
+// Methods
+const isNew = () => !setlist.value?.id;
+const save = () => {
+    saving.value = true;
+    const newSetlist = draftValues.value as Setlist;
+    if (!newSetlist) {
+        return;
+    }
 
-        const exportText = () => {
-            const link = router.resolve({
-                name: "Export",
-                params: { id: setlist.value.id },
+    const promise = store.saveToServer(newSetlist);
+    promise.then((response) => {
+        const isNewSetlist = isNew()
+        if(isNewSetlist) {
+            newSetlist.id = response.data.id;
+        }
+        editing.value = false;
+        saving.value = false;
+        setlist.value = newSetlist;
+        draftValues.value = null;
+        if(isNewSetlist) {
+            store.put(setlist.value);
+            router.push({
+                name: "Setlist",
+                params: { id: newSetlist.id },
             });
-            window.open(link.href, '_blank');
         }
+    })
+}
 
-        return { store, setlist, editing, draftValues, loading, saving, save, edit, cancelEdit, remove, exportText }
-    }
+const edit = () => {
+    draftValues.value = setlist.value as DraftSetlist;
+    editing.value = true;
+}
+
+const cancelEdit = () => {
+    draftValues.value = null;
+    editing.value = false;
 }
+
+const remove = () => store.remove(setlist.value?.id as number)
+    .then(() => {
+        router.push({ name: "Repertoire" });
+    });
+
+const exportText = () => {
+    const link = router.resolve({
+        name: "Export",
+        params: { id: setlist.value?.id },
+    });
+    window.open(link.href, '_blank');
+}
+
 </script>
diff --git a/frontend/src/components/Song.vue b/frontend/src/components/Song.vue
index dcbc502..62c0f30 100644
--- a/frontend/src/components/Song.vue
+++ b/frontend/src/components/Song.vue
@@ -1,15 +1,11 @@
 <template>
     <div class="song">
-        <progress
-            v-if="loading"
-            class="progress is-medium is-info"
-            max="100"
-        ></progress>
+        <progress v-if="loading" class="progress is-medium is-info" max="100"></progress>
 
         <div v-if="!loading">
             <section class="hero is-info">
                 <div v-if="!editing" class="hero-body">
-                    <p class="title">{{ song.title }}</p>
+                    <p class="title">{{ song?.title }}</p>
                     <p class="subtitle" v-if="subtitle">
                         {{ subtitle }}
                     </p>
@@ -27,22 +23,13 @@
                                 <label class="label">Title</label>
                             </div>
                             <div class="field-body">
-                                <div
-                                    class="field"
-                                    v-bind:class="{ static: !editing }"
-                                >
+                                <div class="field" v-bind:class="{ static: !editing }">
                                     <div class="control">
-                                        <input
-                                            v-if="editing"
-                                            v-model="draftValues.title"
-                                            class="input"
-                                            :class="{'is-danger': v$.title.$error}"
-                                            type="text"
-                                            placeholder="The name of the song or hymn"
-                                            @blur="v$.title.$touch"
-                                        />
+                                        <input v-if="editing" v-model="draftValues?.title" class="input"
+                                            :class="{ 'is-danger': v$.title.$error }" type="text"
+                                            placeholder="The name of the song or hymn" @blur="v$.title.$touch" />
                                         <span v-else>
-                                            {{ song.title }}
+                                            {{ song?.title }}
                                         </span>
                                     </div>
                                 </div>
@@ -53,20 +40,12 @@
                                 <label class="label">Composer</label>
                             </div>
                             <div class="field-body">
-                                <div
-                                    class="field"
-                                    v-bind:class="{ static: !editing }"
-                                >
+                                <div class="field" v-bind:class="{ static: !editing }">
                                     <div class="control">
-                                        <input
-                                            v-if="editing"
-                                            v-model="draftValues.composer"
-                                            class="input"
-                                            type="text"
-                                            placeholder="Artist / composer / writer"
-                                        />
+                                        <input v-if="editing" v-model="draftValues?.composer" class="input" type="text"
+                                            placeholder="Artist / composer / writer" />
                                         <span v-else>
-                                            {{ song.composer }}
+                                            {{ song?.composer }}
                                         </span>
                                     </div>
                                 </div>
@@ -78,22 +57,13 @@
                             </div>
                             <div class="field-body field-flex">
                                 <div class="field-flex-col">
-                                    <div
-                                        class="field"
-                                        v-bind:class="{ static: !editing }"
-                                    >
+                                    <div class="field" v-bind:class="{ static: !editing }">
                                         <div class="control">
-                                            <input
-                                                v-if="editing"
-                                                v-model="
-                                                    draftValues.songbook.title
-                                                "
-                                                class="input"
-                                                type="text"
-                                                placeholder="Songbook, hymnal or collection title"
-                                            />
+                                            <input v-if="editing" v-model="draftValues?.songbook?.title
+                                                " class="input" type="text"
+                                                placeholder="Songbook, hymnal or collection title" />
                                             <span v-else>
-                                                {{ song.songbook.title }}
+                                                {{ song?.songbook?.title }}
                                             </span>
                                         </div>
                                     </div>
@@ -104,25 +74,16 @@
                                             <label class="label">Number</label>
                                         </div>
                                         <div class="field-body">
-                                            <div
-                                                class="field"
-                                                v-bind:class="{
-                                                    static: !editing,
-                                                }"
-                                            >
+                                            <div class="field" v-bind:class="{
+                                                static: !editing,
+                                            }">
                                                 <div class="control">
-                                                    <input
-                                                        v-if="editing"
-                                                        v-model="
-                                                            draftValues.songbookNumber
-                                                        "
-                                                        class="input"
-                                                        type="text"
-                                                        placeholder="Song number in the book"
-                                                    />
+                                                    <input v-if="editing" v-model="draftValues?.songbookNumber
+                                                        " class="input" type="text"
+                                                        placeholder="Song number in the book" />
                                                     <span v-else>
                                                         {{
-                                                            song.songbookNumber
+                                                            song?.songbookNumber
                                                         }}
                                                     </span>
                                                 </div>
@@ -137,17 +98,10 @@
                                 <label class="label">Youtube video</label>
                             </div>
                             <div class="field-body">
-                                <div
-                                    class="field"
-                                    v-bind:class="{ static: !editing }"
-                                >
+                                <div class="field" v-bind:class="{ static: !editing }">
                                     <div class="control">
-                                        <input
-                                            v-model="draftValues.recordingUrl"
-                                            class="input"
-                                            type="url"
-                                            placeholder="https://www.youtube.com/watch?v=..."
-                                        />
+                                        <input v-model="draftValues?.recordingUrl" class="input" type="url"
+                                            placeholder="https://www.youtube.com/watch?v=..." />
                                     </div>
                                 </div>
                             </div>
@@ -157,28 +111,16 @@
                                 <label class="label">Time of the year</label>
                             </div>
                             <div class="field-body">
-                                <div 
-                                    class="field"
-                                    v-bind:class="{ static: !editing }"
-                                >
+                                <div class="field" v-bind:class="{ static: !editing }">
                                     <div class="control">
                                         <div class="select is-multiple">
-                                            <VueMultiselect
-                                                v-if="editing"
-                                                v-model="draftSongCategories.season"
-                                                :multiple="true"
-                                                :options="categories.season"
-                                                track-by="name"
-                                                label="name"
-                                                :close-on-select="false"
-                                            ></VueMultiselect>
-                                                        
+                                            <VueMultiselect v-if="editing" v-model="draftSongCategories.season"
+                                                :multiple="true" :options="categories.season" track-by="name" label="name"
+                                                :close-on-select="false"></VueMultiselect>
+
                                             <div v-else class="tags are-medium">
-                                                <span 
-                                                    v-for="(category) in songCategories.season" 
-                                                    :key="category.id"
-                                                    class="tag"
-                                                >
+                                                <span v-for="(category) in songCategories?.season" :key="category.id"
+                                                    class="tag">
                                                     {{ category.name }}
                                                 </span>
                                             </div>
@@ -192,28 +134,16 @@
                                 <label class="label">Liturgical place</label>
                             </div>
                             <div class="field-body">
-                                <div 
-                                    class="field"
-                                    v-bind:class="{ static: !editing }"
-                                >
+                                <div class="field" v-bind:class="{ static: !editing }">
                                     <div class="control">
                                         <div class="select is-multiple">
-                                            <VueMultiselect
-                                                v-if="editing"
-                                                v-model="draftSongCategories.liturgical"
-                                                :multiple="true"
-                                                :options="categories.liturgical"
-                                                track-by="name"
-                                                label="name"
-                                                :close-on-select="false"
-                                            ></VueMultiselect>
+                                            <VueMultiselect v-if="editing" v-model="draftSongCategories.liturgical"
+                                                :multiple="true" :options="categories.liturgical" track-by="name"
+                                                label="name" :close-on-select="false"></VueMultiselect>
 
                                             <div v-else class="tags are-medium">
-                                                <span 
-                                                    v-for="(category) in songCategories.liturgical" 
-                                                    :key="category.id"
-                                                    class="tag"
-                                                >
+                                                <span v-for="(category) in songCategories?.liturgical" :key="category.id"
+                                                    class="tag">
                                                     {{ category.name }}
                                                 </span>
                                             </div>
@@ -226,27 +156,17 @@
 
                     <div class="field is-grouped mt-5">
                         <p v-if="!editing" class="control">
-                            <button 
-                                @click="edit" 
-                                class="button is-link"
-                            >
+                            <button @click="edit" class="button is-link">
                                 Edit
                             </button>
                         </p>
                         <p v-if="!editing" class="control">
-                            <button
-                                @click="remove"
-                                class="button is-danger"
-                            >
+                            <button @click="remove" class="button is-danger">
                                 Delete
                             </button>
                         </p>
                         <p v-if="editing" class="control">
-                            <button
-                                @click="save"
-                                class="button is-link"
-                                :class="{ 'is-loading': saving }"
-                            >
+                            <button @click="save" class="button is-link" :class="{ 'is-loading': saving }">
                                 Save changes
                             </button>
                         </p>
@@ -261,30 +181,17 @@
                 <div class="column">
                     <div class="is-size-4">Play</div>
                     <div v-if="youtubeId && !editing" class="yt-wrapper">
-                        <iframe
-                                id="ytplayer"
-                                type="text/html"
-                                :src="
-                            'https://www.youtube.com/embed/' +
+                        <iframe id="ytplayer" type="text/html" :src="'https://www.youtube.com/embed/' +
                             youtubeId +
                             '?autoplay=0'
-                        "
-                                frameborder="0"
-                        ></iframe>
+                            " frameborder="0"></iframe>
                     </div>
                     <div v-if="editing" class="field is-horizontal">
                         <div class="field-body">
-                            <div
-                                class="field"
-                                v-bind:class="{ static: !editing }"
-                            >
+                            <div class="field" v-bind:class="{ static: !editing }">
                                 <div class="control" v-if="editing">
-                                    <input
-                                        v-model="draftValues.recordingUrl"
-                                        class="input"
-                                        type="url"
-                                        placeholder="https://www.youtube.com/watch?v=..."
-                                    />
+                                    <input v-model="draftValues?.recordingUrl" class="input" type="url"
+                                        placeholder="https://www.youtube.com/watch?v=..." />
                                 </div>
                             </div>
                         </div>
@@ -292,9 +199,9 @@
 
                     <div class="text">
                         <div class="is-size-4">Text</div>
-                        <div v-if="!editing" v-html="song.text" />
+                        <div v-if="!editing" v-html="song?.text" />
                         <div v-else>
-                            <editor-content :editor="editor"/>
+                            <editor-content :editor="editor" />
                         </div>
                     </div>
                 </div>
@@ -303,7 +210,8 @@
             <div class="scores m-2 p-3">
                 <div class="is-size-4">Scores</div>
                 <div class="is-flex is-flex-direction-row is-flex-wrap-wrap">
-                    <Score v-for="score in scores" :key="score.id" :value="score" @remove="removeScore(score)"></Score>
+                    <ScoreComponent v-for="score in scores" :key="score.id" :value="(score as Score)"
+                        @remove="removeScore(score.id)"></ScoreComponent>
                     <div class="">
                         <button class="button is-primary" @click="addScore">
                             Add
@@ -315,15 +223,12 @@
     </div>
 </template>
 
-<script lang="ts">
-import Score from "@/components/Score.vue"
+<script setup lang="ts">
+import ScoreComponent from "@/components/Score.vue"
 import VueMultiselect from 'vue-multiselect'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import { computed, onMounted, ref } from 'vue' // or '@vue/composition-api' in Vue 2.x
+import { computed, onMounted, ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useSongs } from "@/stores/songStore";
@@ -331,179 +236,175 @@ import { useCategories } from "@/stores/categoryStore";
 import { useScores } from "@/stores/scoreStore";
 import { storeToRefs } from "pinia";
 import { useRoute, useRouter } from "vue-router";
+import { Song, Score, Songbook, Categories } from "@/types"
 
-export default {
-    setup () {
-        const songStore = useSongs();
-        const categoryStore = useCategories();
-        const scoreStore = useScores();
-        const route = useRoute();
-        const router = useRouter()
+type DraftSongbook = Partial<Songbook>
 
-        // state
-        const { categories } = storeToRefs(categoryStore);
-        const song = ref({});
-        const songCategories = ref();
-        const scores = ref([]);
-        const editing = ref(false);
-        const draftValues = ref();
-        const draftSongCategories = ref();
-        const loading = ref(true);
-        const saving = ref(false);
-        const error = ref(null);
-        const rules = {
-            title: { required },
-        }
-        const v$ = useVuelidate(rules, draftValues)
-        const editor = useEditor({
-            content: null,
-            extensions: [
-                StarterKit
-            ],
-            editorProps: {
-                attributes: {
-                    class: 'textarea textarea-resizable focus:outline-none',
-                },
-            },
-            editable: true,
-        })
+interface DraftSong extends Omit<Partial<Song>, "songbook"> {
+    songbook: DraftSongbook
+}
 
-        // Computed
-        const isNew = computed(() => !song.value.id);
-        const youtubeId = computed(() => song.value.recordingUrl ? song.value.recordingUrl.split("?v=")[1] : null);
-        const subtitle = computed(() => {
-            let result = "";
-            if (song.value.composer)
-                result += song.value.composer
-            if (song.value.composer && song.value.songbook.title)
-                result += " | ";
-            if (song.value.songbook?.title)
-                result += song.value.songbook.title;
-            if (song.value.songbook?.title && song.value.songbookNumber)
-                result += " " + song.value.songbookNumber;
-            return result;
-        });
+interface DraftScore extends Omit<Partial<Score>, "song"> {
+    song?: string
+}
 
-        onMounted(() => {
-            const categoriesLoaded = categoryStore.fetchAll();
-            if (route.name === "NewSong") {
-                draftValues.value = {
-                    songbook: {},
-                };
-                draftSongCategories.value = {
-                    season: [],
-                    liturgical: []
-                }
-                editing.value = true;
-                categoriesLoaded.finally(() => loading.value = false);
-            } else {
-                const songId = route.params.id;
-                const songLoaded = songStore.get(songId)
-                    .then((value) => {
-                        if (!value.songbook) {
-                            value.songbook = {};
-                        }
-                        song.value = value;
-                        const content = value.text;
-                        editor.value.commands.setContent(content)
-                    });
-                scoreStore.fetchForSong(songId).then((value) => scores.value = value);
-                const songCategoriesLoaded = categoryStore.getForSong(songId);
-                Promise.all([songLoaded, categoriesLoaded, songCategoriesLoaded])
-                    .then(([, , songCategoryResponse]) => {
-                        songCategories.value = {};
-                        songCategories.value.season = categories.value.season.filter(category => songCategoryResponse.some(songCategory => category._links.self.href === songCategory._links.self.href));
-                        songCategories.value.liturgical = categories.value.liturgical.filter(category => songCategoryResponse.some(songCategory => category._links.self.href === songCategory._links.self.href));
-                    })
-                    .finally(() => loading.value = false);
-            }
-        })
+const songStore = useSongs();
+const categoryStore = useCategories();
+const scoreStore = useScores();
+const route = useRoute();
+const router = useRouter()
 
-        // methods
-        const save = async () => {
-            saving.value = true;
-            const lyricsHtml = editor.value.getHTML();
-            const songDraft = draftValues.value;
-            songDraft.text = lyricsHtml;
-            const isFormCorrect = await v$.value.$validate()
-            if (!songDraft || !isFormCorrect) {
-                saving.value = false;
-                return;
-            }
-            const promise = songStore.save(songDraft);
-            const isNewSong = isNew.value
-            promise.then((response) => {
-                if(isNewSong) {
-                    songDraft.id = response.data.id;
-                }
-                categoryStore.putForSong(songDraft.id.toString(), draftSongCategories.value.season.concat(draftSongCategories.value.liturgical));
-                editing.value = false;
-                saving.value = false;
-                song.value = songDraft;
-                songCategories.value = draftSongCategories.value;
-                draftValues.value = null;
-                draftSongCategories.value = [];
-                if(isNewSong) {
-                    router.push({
-                        name: "Song",
-                        params: { id: songDraft.id },
-                    });
-                }
-            })
-        }
+// State
+const { categories } = storeToRefs(categoryStore);
+const song = ref<Song>()
+const songCategories = ref<Categories>();
+const scores = ref<Array<Score | DraftScore>>([]);
+const editing = ref(false);
+const draftValues = ref<DraftSong>();
+const draftSongCategories = ref();
+const loading = ref(true);
+const saving = ref(false);
+const error = ref(null);
+const rules = {
+    title: { required },
+}
+const v$ = useVuelidate<DraftSong>(rules, draftValues.value as DraftSong)
+const editor = useEditor({
+    content: null,
+    extensions: [
+        StarterKit
+    ],
+    editorProps: {
+        attributes: {
+            class: 'textarea textarea-resizable focus:outline-none',
+        },
+    },
+    editable: true,
+})
 
-        const remove = () =>
-            songStore.delete(song.value.id.toString())
-                .then((response) => {
-                    router.push({ name: "Repertoire" });
-                });
+// Computed
+const isNew = computed(() => !song.value?.id);
+const youtubeId = computed(() => song.value?.recordingUrl ? song.value.recordingUrl.split("?v=")[1] : null);
+const subtitle = computed(() => {
+    let result = "";
+    if (song.value?.composer)
+        result += song.value.composer
+    if (song.value?.composer && song.value.songbook?.title)
+        result += " | ";
+    if (song.value?.songbook?.title)
+        result += song.value.songbook.title;
+    if (song.value?.songbook?.title && song.value.songbookNumber)
+        result += " " + song.value.songbookNumber;
+    return result;
+});
 
-        const edit = () => {
-            draftValues.value = song.value;
-            draftSongCategories.value = Object.assign({}, songCategories.value);
-            editing.value = true;
+onMounted(() => {
+    const categoriesLoaded = categoryStore.fetchAll();
+    if (route.name === "NewSong") {
+        draftValues.value = {
+            songbook: {},
+        };
+        draftSongCategories.value = {
+            season: [],
+            liturgical: []
         }
+        editing.value = true;
+        categoriesLoaded.finally(() => loading.value = false);
+    } else {
+        const songId = Number(route.params.id);
+        const songLoaded = songStore.get(songId)
+            .then((value) => {
+                if (!value.songbook) {
+                    value.songbook = {};
+                }
+                song.value = value;
+                const content = value.text;
+                editor.value!.commands.setContent(content)
+            });
+        scoreStore.fetchForSong(songId).then((value) => scores.value = value);
+        const songCategoriesLoaded = categoryStore.getForSong(songId);
+        Promise.all([songLoaded, categoriesLoaded, songCategoriesLoaded])
+            .then(([, , songCategoryResponse]) => {
+                songCategories.value = {};
+                songCategories.value.season = categories.value.season!.filter(category => songCategoryResponse!.some(songCategory => category._links.self.href === songCategory._links.self.href));
+                songCategories.value.liturgical = categories.value.liturgical!.filter(category => songCategoryResponse!.some(songCategory => category._links.self.href === songCategory._links.self.href));
+            })
+            .finally(() => loading.value = false);
+    }
+})
 
-        const cancelEdit = () => {
-            draftValues.value = null;
-            draftSongCategories.value = null;
-            editing.value = false;
-            if (!song.value.id)
-                router.push({ name: "Repertoire" });
+// methods
+const save = async () => {
+    saving.value = true;
+    const lyricsHtml = editor.value?.getHTML();
+    const songDraft = draftValues.value;
+    songDraft!.text = lyricsHtml;
+    const isFormCorrect = await v$.value.$validate()
+    if (!songDraft || !isFormCorrect) {
+        saving.value = false;
+        return;
+    }
+    const promise = songStore.save(songDraft as Song);
+    const isNewSong = isNew.value
+    promise.then((response) => {
+        if (isNewSong) {
+            songDraft.id = response.data.id;
         }
-
-        const addScore = () => {
-            let newScore = {
-                id: null,
-                song: song.value._links.self.href
-            };
-            scores.value.push(newScore);
+        categoryStore.putForSong(response.data.id, draftSongCategories.value.season.concat(draftSongCategories.value.liturgical));
+        editing.value = false;
+        saving.value = false;
+        song.value = songDraft as Song;
+        songCategories.value = draftSongCategories.value;
+        draftValues.value = undefined;
+        draftSongCategories.value = [];
+        if (isNewSong) {
+            router.push({
+                name: "Song",
+                params: { id: songDraft.id },
+            });
         }
+    })
+}
 
-        const removeScore = (score) => {
-            if(score.id) {
-                scoreStore.delete(score.id);
-            }
-            scores.value = scores.value.filter(current => current.id !== score.id);
-        }
+const remove = () =>
+    songStore.delete(song.value!.id)
+        .then((response) => {
+            router.push({ name: "Repertoire" });
+        });
 
-        return { categories, song, isNew, youtubeId, songCategories, scores, editing, draftValues, draftSongCategories, loading, saving, error, v$, subtitle, editor,
-            save, remove, edit, cancelEdit, addScore, removeScore };
-    },
-    directives: {
-        "song-focus": function (el, binding) {
-            if (binding.value) {
-                el.focus();
-            }
-        },
-    },
-    components: {
-        Score,
-        VueMultiselect,
-        EditorContent
+const edit = () => {
+    draftValues.value = song.value as DraftSong;
+    draftSongCategories.value = Object.assign({}, songCategories.value);
+    editing.value = true;
+}
+
+const cancelEdit = () => {
+    draftValues.value = undefined;
+    draftSongCategories.value = null;
+    editing.value = false;
+    if (!song.value!.id)
+        router.push({ name: "Repertoire" });
+}
+
+const addScore = () => {
+    let newScore: DraftScore = {
+        song: song.value?._links.self.href
+    };
+    scores.value.push(newScore);
+}
+
+const removeScore = (scoreId: number | undefined) => {
+    if (scoreId) {
+        scoreStore.delete(scoreId);
     }
+    scores.value = scores.value.filter(current => current.id !== scoreId);
 }
 
+const vSongFocus = (el: HTMLElement, binding: { value: any }) => {
+    if (binding.value) {
+        el.focus();
+    }
+}
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
@@ -511,15 +412,19 @@ export default {
 [v-cloak] {
     display: none;
 }
+
 .select.is-multiple {
     width: 100%;
 }
+
 .yt-wrapper {
     position: relative;
-    padding-bottom: 56.25%; /* 16:9 */
+    padding-bottom: 56.25%;
+    /* 16:9 */
     padding-top: 25px;
     height: 0;
 }
+
 .yt-wrapper iframe {
     position: absolute;
     top: 0;
@@ -527,9 +432,11 @@ export default {
     width: 100%;
     height: 100%;
 }
+
 .textarea-resizable {
     height: initial;
 }
+
 .text p {
     min-height: 18px;
 }
diff --git a/frontend/src/components/Songs.vue b/frontend/src/components/Songs.vue
index 292e857..25178ca 100644
--- a/frontend/src/components/Songs.vue
+++ b/frontend/src/components/Songs.vue
@@ -1,22 +1,14 @@
-<template>    
+<template>
     <div class="p-2">
         <!-- <div class="is-flex is-justify-content-space-between">
             <h1 class="title">Repertoire</h1>
             <router-link class="button is-primary" to="song/new" append tag="button">Add +</router-link>
         </div> -->
-        <progress
-            v-if="loading"
-            class="progress is-medium is-info"
-            max="100"
-        ></progress>
+        <progress v-if="loading" class="progress is-medium is-info" max="100"></progress>
         <div v-if="error" class="error" @click="handleErrorClick">
-            ERROR: {{ error.value }}
+            ERROR: {{ error }}
         </div>
-        <table
-            class="table is-hoverable is-fullwidth song-table"
-            v-if="!loading"
-            v-cloak
-        >
+        <table class="table is-hoverable is-fullwidth song-table" v-if="!loading" v-cloak>
             <thead>
                 <th class="col1" title="number"></th>
                 <th class="col2">Title</th>
@@ -29,9 +21,11 @@
                 <th v-if="!!setlistId"></th>
             </thead>
             <tbody>
-                <tr v-for="(song, index) in songs" class="song" :key="song.id" draggable="true" @dragstart="startDrag($event, song)">
+                <tr v-for="(song, index) in songs" class="song" :key="song.id" draggable="true"
+                    @dragstart="startDrag($event, song)">
                     <td>{{ oneBased(index) }}</td>
-                    <th><router-link :to="{ name: 'Song', params: { id: song.id }}" append>{{ song.title }}</router-link></th>
+                    <th><router-link :to="{ name: 'Song', params: { id: song.id } }" append>{{ song.title }}</router-link>
+                    </th>
                     <td>{{ song.composer }}</td>
                     <td>{{ (song.songbook || {}).title }}</td>
                     <td>{{ song.songbookNumber }}</td>
@@ -39,15 +33,17 @@
                     <td>{{ song.lastSetlist?.date }}</td>
                     <td class="category-col">
                         <div class="tags">
-                            <span v-for="(category, index) in song.categories" class="song-category tag is-normal" :key="index">
+                            <span v-for="(category, index) in song.categories" class="song-category tag is-normal"
+                                :key="index">
                                 {{ category.name }}
                             </span>
                         </div>
                     </td>
                     <td v-if="!!setlistId" class="p-1b">
-                        <button class="button is-danger is-inverted is-small" :class="{ 'is-loading': song.deleting }" @click="deleteSong(song)">
+                        <button class="button is-danger is-inverted is-small" :class="{ 'is-loading': deleting }"
+                            @click="removeSongFromSetlist(song as SetlistSong)">
                             <span class="icon is-small">
-                              <i class="fas fa-times"></i>
+                                <i class="fas fa-times"></i>
                             </span>
                         </button>
                     </td>
@@ -56,214 +52,154 @@
             <tfoot></tfoot>
         </table>
         <footer class="footer" v-cloak>
-                <strong>{{ songs.length }}</strong>
-                {{ pluralize(songs) }}
+            <strong>{{ songs.length }}</strong>
+            {{ pluralize(songs.length) }}
         </footer>
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import api from "./../api.js";
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useSongs } from "@/stores/songStore";
 import { useRoute, useRouter } from "vue-router";
-import { storeToRefs } from "pinia";
+import { SetlistEntry, Song, User, WithEmbedded } from "@/types";
 
+// Types
 
-export default {
-    props: {
-        activeUser: Object
-    },
-    emits: ["remove"],
-    setup(props, { emit }) {
-        const songStore = useSongs();
-        const route = useRoute();
-        const router = useRouter();
-
-        // state
-        const activeUser = ref(props.activeUser);
-        const songs = ref([]);
-        const newSong = ref();
-        const editedSong = ref(null);
-        const loading = ref(true);
-        const error = ref(null);
-        const setlistId = ref(null);
-
-        let beforeEditCache = null;
-
-        // Computed
-        const userEmail = computed(() => activeUser.value ? activeUser.value.email : "");
-        const inputPlaceholder = computed(() => activeUser.value ? activeUser.value.given_name + ", what needs to be sung?" : "What needs to be sung?")
-
-        onMounted(() => {
-            loadSongs();
-        });
-
-        // Methods
-        const pluralize = function (n) {
-            return n === 1 ? "song" : "songs";
-        }
-        
-        const loadSongs = function() {
-            const routeName = route.name;
-            let id = route.params.id;
-            let songsLoaded;
-            let transformer;
-            let sortTransformer = data => data.sort((songA, songB) => songA.title.localeCompare(songB.title));
-            switch(routeName) {
-                case 'Repertoire':
-                    songsLoaded = api.getAllSongs();
-                    transformer = sortTransformer;
-                    break;
-                case 'CategorySeason':
-                case 'CategoryLiturgical':
-                    songsLoaded = api.getSongsByCategoryId(id);
-                    transformer = sortTransformer;
-                    break;
-                case 'Setlist':
-                    setlistId.value = id;
-                    songsLoaded = api.getSetlistEntries(id);
-                    transformer = entries => {
-                        let sorted = entries.sort((entryA, entryB) => entryA.number - entryB.number);
-                        return sorted.map(entry => Object.assign(entry._embedded.song, { setlistEntryUri: entry._links.self.href}));
-                    }
-                    break;
-            }
-            songsLoaded
-                .then((response) => {
-                    console.log("Data loaded: ", response.data);
-                    songs.value = transformer(response.data);
-                })
-                .catch((error) => {
-                    console.error(error);
-                    error.value = "Failed to load songs";
-                })
-                .finally(() => (loading.value = false));
-        }
-
-        const addSong = function () {
-            var value = newSong.value && newSong.value.trim();
-            if (!value) {
-                return;
-            }
-
-            songs.value.push({
-                title: value,
-                author: "Dirk",
-            });
-
-            newSong.value = "";
-        }
-
-        const removeSong = function (song) {
-            // notice NOT using "=>" syntax
-            songs.value.splice(songs.value.indexOf(song), 1);
-        }
+type DraftSong = Partial<Song>
+interface SetlistSong extends Song {
+    setlistEntryUri: string
+}
 
-        const editSong = function (song) {
-            beforeEditCache = song.title;
-            editedSong.value = song;
-        }
+const emit = defineEmits(["remove"])
 
-        const doneEdit = function (song) {
-            if (!editedSong.value) {
-                return;
-            }
+const songStore = useSongs();
+const route = useRoute();
+const router = useRouter();
 
-            editedSong.value = null;
-            song.title = song.title.trim();
+// state
+const songs = ref<Array<Song>>([]);
+const loading = ref(true);
+const deleting = ref(false)
+const error = ref<string | null>(null);
+const setlistId = ref<number>();
 
-            if (!song.title) {
-                removeSong(song);
-            }
-        }
+onMounted(() => {
+    loadSongs();
+});
 
-        const cancelEdit = function (song) {
-            editedSong.value = null;
-            song.title = beforeEditCache;
-        }
+// Methods
+const pluralize = function (n: number) {
+    return n === 1 ? "song" : "songs";
+}
 
-        const handleErrorClick = function () {
-            error.value = null;
-        }
+const loadSongs = function () {
+    const sorter = (data: Array<Song>) => data.sort((songA, songB) => songA.title.localeCompare(songB.title));
+    const setlistExtractor = (entries: Array<SetlistEntry & WithEmbedded<"song", Song>>) => {
+        let sorted = entries.sort((entryA, entryB) => entryA.number - entryB.number);
+        return sorted.map(entry => Object.assign(entry._embedded.song, { setlistEntryUri: entry._links.self.href })) as Array<SetlistSong>;
+    }
 
-        const oneBased = (index) => index + 1;
+    const routeName = route.name;
+    let id = Number(route.params.id);
+    let songsLoaded;
+    switch (routeName) {
+        case 'Repertoire':
+            songsLoaded = api.getAllSongs().then(response => songs.value = sorter(response.data));
+            break;
+        case 'CategorySeason':
+        case 'CategoryLiturgical':
+            songsLoaded = api.getSongsByCategoryId(id).then(response => songs.value = sorter(response.data));
+            break;
+        case 'Setlist':
+            setlistId.value = id;
+            songsLoaded = api.getSetlistEntries(id).then(response => songs.value = setlistExtractor(response.data));
+            break;
+    }
+    songsLoaded!.finally(() => (loading.value = false));
+}
 
-        const startDrag = function(event, song) {
-            event.dataTransfer.dropEffect = "link";
-            event.dataTransfer.setData("text/plain", song._links.self.href);
-        }
+const removeSong = function (song: Song) {
+    // notice NOT using "=>" syntax
+    songs.value.splice(songs.value.indexOf(song), 1);
+}
 
-        const deleteSong = function(song) {
-            loading.value = true;
-            song.deleting = true;
-            let entryUri = song.setlistEntryUri;
-            api.delete(entryUri)
-                .then((response) => {
-                    console.log("Entry removed: " + entryUri);
-                    removeSong(song);
-                })
-                .catch((error) => {
-                    console.error(error);
-                    error.value = "Failed to remove entry";
-                })
-                .finally(() => loading.value = false);
-        }
+const handleErrorClick = function () {
+    error.value = null;
+}
 
-        return {
-            songs, error, loading, setlistId,
-            userEmail, inputPlaceholder,
-            pluralize, loadSongs, addSong, removeSong, editSong, doneEdit, cancelEdit, handleErrorClick, oneBased, startDrag, deleteSong                
-        }
-    },
+const oneBased = (index: number) => index + 1;
 
-    // a custom directive to wait for the DOM to be updated
-    // before focusing on the input field.
-    // http://vuejs.org/guide/custom-directive.html
-    directives: {
-        "song-focus": function (el, binding) {
-            if (binding.value) {
-                el.focus();
-            }
-        },
+const startDrag = function (event: DragEvent, song: Song) {
+    if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "link";
+        event.dataTransfer.setData("text/plain", song._links.self.href);
     }
-};
+}
+
+const removeSongFromSetlist = function (song: SetlistSong) {
+    loading.value = true;
+    deleting.value = true;
+    let entryUri = song.setlistEntryUri;
+    api.delete(entryUri)
+        .then((response) => {
+            console.log("Entry removed: " + entryUri);
+            removeSong(song);
+        })
+        .catch((error) => {
+            console.error(error);
+            error.value = "Failed to remove entry";
+        })
+        .finally(() => deleting.value = false);
+}
 </script>
 
 <style>
 [v-cloak] {
     display: none;
 }
+
 .song-table {
     table-layout: fixed;
 }
+
 td.p-1b {
     padding: 0.3em;
 }
+
 .col1 {
     width: 3%;
 }
+
 .col2 {
     width: 20%;
 }
+
 .col3 {
     width: 15%;
 }
+
 .col4 {
     width: 15%;
 }
+
 .col5 {
     width: 5%;
 }
+
 .col6 {
     width: 10%;
 }
+
 .col7 {
     width: 10%;
 }
-.category-col { 
+
+.category-col {
     width: 22%;
 }
+
 .category-col .tags {
     flex-wrap: initial;
 }
diff --git a/frontend/src/stores/authStore.js b/frontend/src/stores/authStore.ts
similarity index 90%
rename from frontend/src/stores/authStore.js
rename to frontend/src/stores/authStore.ts
index 47e76ba..0ceead8 100644
--- a/frontend/src/stores/authStore.js
+++ b/frontend/src/stores/authStore.ts
@@ -1,5 +1,5 @@
-import {defineStore} from "pinia";
-import {Log, UserManager, WebStorageStateStore} from 'oidc-client'
+import { defineStore } from "pinia";
+import { User, UserManager, WebStorageStateStore } from 'oidc-client'
 
 const settings = {
     userStore: new WebStorageStateStore({ store: window.localStorage }),
@@ -19,7 +19,7 @@ userManager.events.addAccessTokenExpired(() => {
 
 export const useAuth = defineStore('auth', {
     state: () => ({
-        user: null
+        user: {} as User | null
     }),
     getters: {
         isLoggedIn: (state) => state.user !== null
@@ -78,10 +78,4 @@ export const useAuth = defineStore('auth', {
             return this.user?.profile?.sub;
         }
     }
-})
-export default {
-    install: function (Vue) {
-        Log.logger = console;
-        Log.level = Log.INFO;
-    }
-}
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/frontend/src/stores/categoryStore.js b/frontend/src/stores/categoryStore.js
deleted file mode 100644
index be33872..0000000
--- a/frontend/src/stores/categoryStore.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import {defineStore} from "pinia";
-import api from "././../api.js";
-
-export const useCategories = defineStore('categories', {
-    state: () => ({
-        categories: {},
-        categoriesBySongId: new Map(),
-        loading: false,
-        error: null
-    }),
-    getters: {},
-    actions: {
-        async fetchAll() {
-            // if (!Object.keys(this.categories).length) {
-                this.loading = true;
-                api.getAllCategories()
-                    .then(response => {
-                        this.categories = {
-                            season: response.data.filter(category => category.type === "SEASON"),
-                            liturgical: response.data.filter(category => category.type === "LITURGICAL_MOMENT")
-                        }
-                    })
-                    .catch((error) => {
-                        console.log(error);
-                        this.error = "Failed to load categories";
-                    });
-                this.loading = false;
-            // }
-        },
-        async fetchForSong(songId) {
-            this.loading = true;
-            const response = await api.getSongCategories(songId)
-                .catch((error) => {
-                    console.log(error);
-                    this.error = "Failed to load song categories";
-                });
-            this.categoriesBySongId.set("hoi", "test");
-            this.categoriesBySongId.set(songId, response.data);
-            this.loading = false;
-            return response.data;
-        },
-        getForSong(songId) {
-            console.log(this.categoriesBySongId.keys());
-            return this.categoriesBySongId.has(songId) ? this.categoriesBySongId.get(songId) : this.fetchForSong(songId)
-        },
-        putForSong(songId, categories) {
-            let previousCategories = this.categoriesBySongId.get(songId) ?? [];
-            let newCategories = categories.filter(draftCategory => !previousCategories.some(previousCategory => draftCategory._links.self.href === previousCategory._links.self.href));
-            let deletedCategories = previousCategories.filter(previousCategory => !categories.some(draftCategory => previousCategory._links.self.href === draftCategory._links.self.href));
-            const promises = [];
-            if(newCategories.length) {
-                const posted = api.postSongCategories(songId, newCategories.map(songCategory => songCategory._links.self.href));
-                promises.push(posted);
-            }
-            deletedCategories.forEach(songCategory => promises.push(api.deleteSongCategory(songId, songCategory.id)));
-            Promise.all(promises)
-                .then(() => {
-                    if (this.categoriesBySongId.has(songId)) {
-                        newCategories.map((category) => this.categoriesBySongId.get(songId).push(category));
-                    } else {
-                        this.categoriesBySongId.set(songId, newCategories);
-                    }
-                    this.categoriesBySongId.set(songId, this.categoriesBySongId.get(songId).filter((category) => deletedCategories.map((category) => category.id).includes(category.id)));
-                }).catch((error) => {
-                    console.log(error);
-                    this.error = "Failed to load song categories";
-            });
-        }
-    }
-});
\ No newline at end of file
diff --git a/frontend/src/stores/categoryStore.ts b/frontend/src/stores/categoryStore.ts
new file mode 100644
index 0000000..19d01d2
--- /dev/null
+++ b/frontend/src/stores/categoryStore.ts
@@ -0,0 +1,65 @@
+import { defineStore } from "pinia";
+import api from "././../api.js";
+import { Categories, Category } from '@/types'
+import { CacheListMap } from "../types/CacheMaps";
+
+export type CategoriesState = {
+    categories: Categories
+    categoriesBySongId: CacheListMap<number, Category>
+    loading: boolean
+    error: string | undefined
+}
+
+export const useCategories = defineStore('categories', {
+    state: () => ({
+        categories: {},
+        categoriesBySongId: new Map(),
+        loading: false
+    } as CategoriesState),
+    getters: {},
+    actions: {
+        async fetchAll() {
+            this.loading = true;
+            api.getAllCategories()
+                .then(response => {
+                    this.categories = {
+                        season: response.data.filter(category => category.type === "SEASON"),
+                        liturgical: response.data.filter(category => category.type === "LITURGICAL_MOMENT")
+                    }
+                })
+                .catch((error) => {
+                    console.log(error);
+                    this.error = "Failed to load categories";
+                });
+            this.loading = false;
+        },
+
+        async fetchForSong(songId: number) {
+            this.loading = true;
+            const response = await api.getSongCategories(songId);
+            this.categoriesBySongId.set(songId, response.data);
+            this.loading = false;
+            return response.data;
+        },
+
+        async getForSong(songId: number) {
+            console.log(this.categoriesBySongId.keys());
+            return this.categoriesBySongId.has(songId) ? this.categoriesBySongId.get(songId) : await this.fetchForSong(songId)
+        },
+
+        async putForSong(songId: number, categories: Category[]) {
+            let previousCategories = this.categoriesBySongId.get(songId) ?? [];
+            let newCategories = categories.filter(draftCategory => !previousCategories.some(previousCategory => draftCategory.id === previousCategory.id));
+            let deletedCategories = previousCategories.filter(previousCategory => !categories.some(draftCategory => previousCategory.id === draftCategory.id));
+            const promises = [];
+            if(newCategories.length) {
+                const posted = api.postSongCategories(songId, newCategories.map(songCategory => songCategory._links.self.href));
+                promises.push(posted);
+            }
+            deletedCategories.forEach(songCategory => promises.push(api.deleteSongCategory(songId, songCategory.id)));
+            await Promise.all(promises)
+            this.categoriesBySongId.addAllTo(songId, newCategories)
+            this.categoriesBySongId.removeAllFrom(songId, deletedCategories)
+        }
+    }
+});
\ No newline at end of file
diff --git a/frontend/src/stores/scoreStore.js b/frontend/src/stores/scoreStore.ts
similarity index 59%
rename from frontend/src/stores/scoreStore.js
rename to frontend/src/stores/scoreStore.ts
index 01ccd2d..2b12d43 100644
--- a/frontend/src/stores/scoreStore.js
+++ b/frontend/src/stores/scoreStore.ts
@@ -1,55 +1,65 @@
-import {defineStore} from "pinia";
-import api from "./../api.js";
+import { defineStore } from "pinia";
+import api from "../api.js";
+import { CacheMap } from "@/types/CacheMaps.js";
+import { Score } from "@/types/index.js";
 
 export const useScores = defineStore('scores', {
     state: () => ({
-        scores: new Map(),
+        scores: new CacheMap<number, Score>(),
         loading: false,
-        error: null
+        error: null as string | null
     }),
     getters: {
         allScores(state) {
             console.log("All scores:", [...state.scores.values()]);
             return [...state.scores.values()];
         },
-        scoresForSongId: (state) => (songId) => state.scores.filter((score) => score.songId === songId), // TODO
+        scoresForSongId: (state) => (songId: number) => Array.from(state.scores.values()).filter(score => score.song.id === songId),
         count(state) {
             return state.scores.size;
         }
     },
     actions: {
-        async fetchForSong(songId) {
+        async fetch(scoreId: number) {
+            this.loading = true
+            const response = await api.getScoreById(scoreId)
+            this.put(response.data)
+            this.loading = false
+            return response.data
+        },
+
+        async fetchForSong(songId: number) {
             this.loading = true;
             const response = await api.getScoresBySongId(songId)
-                .catch((error) => {
-                    console.log(error);
-                    this.error = "Failed to load scores";
-                });
             console.log("Scores loaded: ", response.data);
             response.data.map((score) => this.scores.set(score.id, score));
             this.loading = false;
             return response.data;
         },
-        async get(scoreId) {
+
+        async get(scoreId: number) {
             if (!this.scores.has(scoreId)) {
                 return await this.fetch(scoreId);
             } else {
                 return this.scores.get(scoreId);
             }
         },
-        put(score) {
+
+        put(score: Score) {
             this.scores.set(score.id, score);
         },
-        async saveToServer(score) {
+
+        async saveToServer(score: Score) {
             if (score.id) {
                 return api.updateScoreForId(score.id, score);
             } else {
                 return api.createNewScore(score);
             }
         },
-        async delete(scoreId) {
+
+        async delete(scoreId: number) {
             return api.deleteScoreForId(scoreId)
-                .then((response) => {
+                .then((_) => {
                     this.scores.delete(scoreId);
                 });
         }
diff --git a/frontend/src/stores/setlistStore.js b/frontend/src/stores/setlistStore.ts
similarity index 66%
rename from frontend/src/stores/setlistStore.js
rename to frontend/src/stores/setlistStore.ts
index a5eaa9a..5b3db17 100644
--- a/frontend/src/stores/setlistStore.js
+++ b/frontend/src/stores/setlistStore.ts
@@ -1,11 +1,13 @@
 import {defineStore} from "pinia";
-import api from "./../api.js";
+import api from "../api";
+import { CacheMap } from "@/types/CacheMaps";
+import { Setlist } from "@/types";
 
 export const useSetlists = defineStore('setlists', {
     state: () => ({
-        setlists: new Map(),
+        setlists: new CacheMap<number, Setlist>(),
         loading: false,
-        error: null
+        error: null as string | null
     }),
     getters: {
         allSetlists(state) {
@@ -20,44 +22,39 @@ export const useSetlists = defineStore('setlists', {
         async fetchAll() {
             this.loading = true;
             const response = await api.getAllSetlists()
-                .catch(err => {
-                    console.log(err);
-                    this.error = "Failed to load setlists";
-                })
-            console.log("setlists loaded:", response);
-            response.data.forEach(setlist => this.setlists.set(setlist.id, setlist));
+            response.data.forEach(setlist => this.setlists.set(setlist.id as number, setlist));
             this.loading = false
         },
-        async fetch(setlistId) {
+
+        async fetch(setlistId: number) {
             this.loading = true;
-            const response = await api.getSetlistById(setlistId)
-                .catch((error) => {
-                    console.log(error);
-                    this.error = "Failed to load setlist";
-                });
-            console.log("Setlist loaded: ", response.data);
-            this.setlists.set(response.data.id, response.data);
+            const response = await api.getSetlistById(setlistId);
+            this.setlists.set(response.data.id as number, response.data);
             this.loading = false;
             return response.data;
         },
-        async get(setlistId) {
+
+        async get(setlistId: number) {
             if (!this.setlists.has(setlistId)) {
                 return await this.fetch(setlistId);
             } else {
                 return this.setlists.get(setlistId);
             }
         },
-        put(setlist) {
+
+        put(setlist: Setlist) {
+            if (setlist.id == undefined) throw new Error("Setlist has no ID")
             this.setlists.set(setlist.id, setlist);
         },
-        async saveToServer(setlist) {
+
+        async saveToServer(setlist: Setlist) {
             if (setlist.id) {
                 return api.updateSetlistForId(setlist.id, setlist);
             } else {
                 return api.createNewSetlist(setlist);
             }
         },
-        async remove(setlistId) {
+        async remove(setlistId: number) {
             return api.deleteSetlistForId(setlistId)
                 .then((response) => {
                     this.setlists.delete(setlistId);
diff --git a/frontend/src/stores/songStore.js b/frontend/src/stores/songStore.ts
similarity index 62%
rename from frontend/src/stores/songStore.js
rename to frontend/src/stores/songStore.ts
index 959abe9..44fb1a0 100644
--- a/frontend/src/stores/songStore.js
+++ b/frontend/src/stores/songStore.ts
@@ -1,10 +1,12 @@
-import {defineStore} from "pinia";
-import api from "./../api.js";
+import { defineStore } from "pinia";
+import api from "../api";
+import { Song } from "@/types";
+import { CacheListMap, CacheMap } from "@/types/CacheMaps";
 
 export const useSongs = defineStore('songs', {
     state: () => ({
-        songs: new Map(),
-        songsBySetlistId: new Map(),
+        songs: new CacheMap<number, Song>(),
+        songsBySetlistId: new CacheListMap<number, Song>(),
         loading: false,
         error: null
     }),
@@ -13,43 +15,28 @@ export const useSongs = defineStore('songs', {
         async fetchAll() {
             this.loading = true;
             const response = await api.getAllSongs()
-                .catch(err => {
-                    console.log(err);
-                    this.error = "Failed to load songs";
-                })
-            console.log("Songs loaded:", response);
             response.data.forEach(this.put);
             this.loading = false
         },
 
-        async fetchForSetlist(setlistId) {
+        async fetchForSetlist(setlistId: number) {
             this.loading = true;
             const response = await api.getSetlistEntries(setlistId)
-                .catch(err => {
-                    console.log(err);
-                    this.error = "Failed to load setlist";
-                })
             let sorted = response.data.sort((entryA, entryB) => entryA.number - entryB.number).map(entry => entry._embedded.song);
             this.putSetlist(sorted, setlistId);
             this.loading = false;
-            console.log(sorted)
             return sorted;
         },
 
-        async fetch(songId) {
+        async fetch(songId: number) {
             this.loading = true;
             const response = await api.getSongById(songId)
-                .catch((error) => {
-                    console.log(error);
-                    this.error = "Failed to load song";
-                });
-            console.log("Song loaded: ", response.data);
             this.songs.set(response.data.id, response.data);
             this.loading = false;
             return response.data;
         },
 
-        async get(songId) {
+        async get(songId: number) {
             if (!this.songs.has(songId)) {
                 return await this.fetch(songId);
             } else {
@@ -57,30 +44,34 @@ export const useSongs = defineStore('songs', {
             }
         },
 
-        async getForSetlist(setlistId) {
+        async getForSetlist(setlistId: number) {
             if (!this.songsBySetlistId.has(setlistId)) {
                 return await this.fetchForSetlist(setlistId);
             } else {
-                return this.songsBySetlistId.get(setlistId);
+                return this.songsBySetlistId.getOrEmpty(setlistId);
             }
         },
 
-        put(song) {
+        put(song: Song) {
             this.songs.set(song.id, song);
         },
 
-        putSetlist(songs, setlistId) {
+        putSetlist(songs: Array<Song>, setlistId: number) {
             songs.forEach(this.put)
             this.songsBySetlistId.set(setlistId, songs)
         },
 
-        save(song) {
+        removeSetlist(song: Song, setlistId: number) {
+            api.deleteSetlistEntry
+        },
+
+        save(song: Song) {
             const savePromise = this.saveToServer(song);
-            savePromise.then(savedSong => this.songs.set(savedSong.id, savedSong));
+            savePromise.then(response => this.songs.set(response.data.id, response.data));
             return savePromise;
         },
 
-        saveToServer(song) {
+        saveToServer(song: Song) {
             if (song.id) {
                 return api.updateSongForId(song.id, song);
             } else {
@@ -88,7 +79,7 @@ export const useSongs = defineStore('songs', {
             }
         },
 
-        delete(songId) {
+        delete(songId: number) {
             return api.deleteSongForId(songId)
                 .then((response) => {
                     this.songs.delete(songId);
diff --git a/frontend/src/stores/userStore.js b/frontend/src/stores/userStore.ts
similarity index 62%
rename from frontend/src/stores/userStore.js
rename to frontend/src/stores/userStore.ts
index 5ece9a8..5f500fa 100644
--- a/frontend/src/stores/userStore.js
+++ b/frontend/src/stores/userStore.ts
@@ -1,22 +1,19 @@
 import {defineStore} from "pinia";
-import api from "./../api.js";
+import api from "../api";
+import { CacheMap } from "@/types/CacheMaps";
+import { User } from "@/types";
 
 export const useUsers = defineStore('users', {
     state: () => ({
-        users: new Map(),
+        users: new CacheMap<number, User>(),
         loading: false,
-        error: null
+        error: null as string | null
     }),
     getters: {},
     actions: {
-        async fetch(userId) {
+        async fetch(userId: number) {
             this.loading = true;
             const response = await api.getUserById(userId)
-                .catch((error) => {
-                    console.log(error);
-                    this.error = "Failed to load user";
-                });
-            console.log("User loaded: ", response.data);
             this.users.set(response.data.id, response.data);
             this.loading = false;
             return response.data;
@@ -25,38 +22,28 @@ export const useUsers = defineStore('users', {
         async fetchAll() {
             this.loading = true;
             const response = await api.getUsers()
-                .catch((error) => {
-                    console.error(error);
-                    this.error = "Failed to load users";
-                });
-            console.log("Users loaded: ", response.data);
             response.data.map((user) => this.users.set(user.id, user));
             this.loading = false;
             return response.data;
         },
 
-        async get(userId) {
+        async get(userId: number) {
             if (!this.users.has(userId)) {
                 return await this.fetch(userId);
             } else {
-                return this.songs.get(userId);
+                return this.users.get(userId);
             }
         },
 
         async getCurrent() {
             this.loading = true;
             const response = await api.getUser()
-                .catch((error) => {
-                    console.error(error);
-                    this.error = "Failed to load current user";
-                });
-            console.log("User loaded: ", response.data);
             this.users.set(response.data.id, response.data);
             this.loading = false;
             return response.data;
         },
 
-        save(user) {
+        save(user: User) {
             console.log(user);
             this.users.set(user.id, user);
             let changes = {
diff --git a/frontend/src/types/CacheMaps.ts b/frontend/src/types/CacheMaps.ts
new file mode 100644
index 0000000..c21056a
--- /dev/null
+++ b/frontend/src/types/CacheMaps.ts
@@ -0,0 +1,37 @@
+import { Option } from "effect"
+import { LazyArg } from "effect/Function"
+import { Identifiable } from ".";
+
+export class CacheMap<K, V> extends Map<K, V> {
+    getOrNone = (key: K) => Option.fromNullable(this.get(key))
+
+    getOrElse = (key: K, onElse: LazyArg<V>) => Option.getOrElse(this.getOrNone(key), onElse)
+}
+
+export class CacheListMap<K, V extends Identifiable> extends CacheMap<K, Array<V>> {
+    addTo(key: K, value: V): void {
+        let array = this.getOrElse(key, () => {
+            let newArray = Array<V>()
+            this.set(key, newArray)
+            return newArray
+        });
+        array.push(value)
+    }
+
+    addAllTo(key: K, values: Array<V>): void {
+        var existingArray = this.getOrNone(key)
+        Option.match(existingArray, {
+            onNone: () => this.set(key, values),
+            onSome: (array) => values.map(value => array.push(value))
+        })
+    }
+
+    removeAllFrom(key: K, values: Array<V>): void {
+        Option.map(this.getOrNone(key), array => {
+            let remaining = array.filter(e => !values.includes(e))
+            this.set(key, remaining)
+        })
+    }
+
+    getOrEmpty = (key: K) => this.get(key) ?? new Array<V>
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..b68bdfd
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,129 @@
+export interface Identifiable extends HalResponse {
+    id: number | undefined
+}
+
+export interface HalResponse {
+    _links: { self: { href: string }}
+}
+
+export interface Choir extends Identifiable {
+    id: number
+    name: string
+    type: string
+    inviteToken?: string
+    manager: User
+}
+
+export interface User extends Identifiable {
+    id: number,
+    choir: Choir,
+    email: string,
+    username: string,
+    displayName: string
+}
+
+export interface Invite extends Identifiable {
+    id: number
+    email: string
+    invitedBy: User
+    token: string
+    createdDate: Date
+    acceptedDate: Date
+    expired: Boolean
+    choir: Choir
+}
+
+export interface Registration {
+    displayName: string
+    email: string
+    password: string
+}
+
+export interface NewChoirRegistration extends Registration {
+    choirName: string
+}
+
+export interface AcceptInvite extends Registration {
+    token: string
+}
+
+
+export interface Categories {
+    season?: Array<Category> | undefined,
+    liturgical?: Array<Category> | undefined
+}
+
+export interface Category extends Identifiable {
+    id: number,
+    choir: Choir,
+    name: string,
+    type: CategoryType
+}
+
+enum CategoryType {
+    Season = "SEASON",
+    Liturgical = "LITURGICAL_MOMENT"
+}
+
+export interface Score extends Identifiable {
+    id: number,
+    song: Song,
+    description: string | undefined,
+    fileUrl: string
+}
+
+export interface Song extends Identifiable {
+    id: number,
+    choir: Choir,
+    title: string,
+    composer: string,
+    recordingUrl: string,
+    scoreUrl: string,
+    songbook: Songbook | undefined,
+    songbookNumber: number,
+    scores: Array<Score>,
+    slug: string,
+    addedAt: Date,
+    addedBy: User,
+    categories: Array<Category>,
+    setlistEntries: Array<SetlistEntry>,
+    text: string,
+    lastSetlist: Setlist | undefined
+}
+
+export interface Songbook extends Identifiable {
+    id: number,
+    title: string
+}
+
+export interface Setlist extends Identifiable {
+    id: number | undefined,
+    name: string,
+    date: Date,
+    choir: Choir,
+    entries: Array<SetlistEntry>,
+}
+
+export interface SetlistEntry extends HalResponse {
+    id: string,
+    setlist: Setlist,
+    song: Song,
+    number: number
+}
+
+export interface User extends Identifiable {
+    id: number,
+    choir: Choir,
+    email: string,
+    username: string,
+    displayName: string,
+    zitadelId: string
+}
+
+type Embedded<N extends string, O> = { 
+    [K in N]: O
+}
+
+export interface WithEmbedded<N extends string, O> {
+    _embedded: Embedded<N, O>
+}
\ No newline at end of file
diff --git a/frontend/src/views/AllSongs.vue b/frontend/src/views/AllSongs.vue
index 573dffe..c5038ad 100644
--- a/frontend/src/views/AllSongs.vue
+++ b/frontend/src/views/AllSongs.vue
@@ -13,15 +13,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Songs from '@/components/Songs.vue'
 
-const AllSongs = {
-    name: "All Songs",
-    components: {
-        Songs
-    },
-};
-
-export default AllSongs;
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/Landing.vue b/frontend/src/views/Landing.vue
index 76bd089..625389c 100644
--- a/frontend/src/views/Landing.vue
+++ b/frontend/src/views/Landing.vue
@@ -58,27 +58,19 @@
 	</section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useAuth } from "@/stores/authStore";
-import { inject, onMounted } from "vue";
+import { onMounted } from "vue";
 import { storeToRefs } from "pinia";
 
+// State
+const auth = useAuth();
+const { user, isLoggedIn } = storeToRefs(auth);
 
-export default {
-    setup() {
-        const logger = inject('vuejs3-logger');
+// Computed
+onMounted(() => {});
 
-        // State
-        const auth = useAuth();
-        const { user, isLoggedIn } = storeToRefs(auth);
+// Methods
+const onLogin = () => auth.login()
 
-        // Computed
-        onMounted(() => {});
-
-        // Methods
-        const onLogin = () => auth.login()
-
-        return { auth, user, isLoggedIn, onLogin }
-    }
-}
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/MyChoir.vue b/frontend/src/views/MyChoir.vue
index 5bab0da..2537312 100644
--- a/frontend/src/views/MyChoir.vue
+++ b/frontend/src/views/MyChoir.vue
@@ -4,20 +4,22 @@
             <section class="hero is-medium is-info">
                 <div class="hero-body">
                     <p class="subtitle">My choir</p>
-                    <p class="title">{{ choir.name }}</p>
+                    <p class="title">{{ choir?.name }}</p>
                 </div>
             </section>
             <div class="p-3" v-if="!loading">
 
                 <div class="tabs">
                     <ul>
-                        <li :class="{ 'is-active': activeTab == 'members' }"><a v-on:click="activeTab = 'members'">Members</a></li>
-                        <li :class="{ 'is-active': activeTab == 'categories' }"><a v-on:click="activeTab = 'categories'">Categories</a></li>
+                        <li :class="{ 'is-active': activeTab == 'members' }"><a
+                                v-on:click="activeTab = 'members'">Members</a></li>
+                        <li :class="{ 'is-active': activeTab == 'categories' }"><a
+                                v-on:click="activeTab = 'categories'">Categories</a></li>
                     </ul>
                 </div>
 
-                <div class="new-members" v-if="activeTab == 'members'">
-                    <ChoirMembers :choir="choir"/>
+                <div class="new-members" v-if="activeTab == 'members' && choir">
+                    <ChoirMembers :choir="choir" />
                 </div>
 
                 <div class="categories" v-if="activeTab == 'categories'">
@@ -29,77 +31,56 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ChoirMembers from "../components/ChoirMembers.vue";
 import api from "./../api.js";
 import { onMounted, ref } from 'vue'
 import moment from "moment";
+import { Choir } from "@/types";
 
-export default {
-    setup () {
-        // state
-        
-        const choir = ref({})
-        const editing = ref(false)
-        const draftValues = ref(null)
-        const loading = ref(true)
-        const saving = ref(false)
-        const error = ref(null)
-        const activeTab = ref("members")
+// state
+const choir = ref<Choir>()
+const editing = ref(false)
+const draftValues = ref<Choir | undefined>()
+const loading = ref(true)
+const saving = ref(false)
+const activeTab = ref("members")
 
-        // Computed
-
-        onMounted(() => {
-            api.getChoirs()
-            .then((response) => {
-                choir.value = response.data[0];
-                console.log("Choir loaded: ", response.data[0]);
-                loading.value = false
-            })
-            .catch((error) => {
-                console.log(error);
-                error.value = "Failed to load choir";
-            });
+// Computed
+onMounted(() => {
+    api.getChoirs()
+        .then((response) => {
+            choir.value = response.data[0];
+            console.log("Choir loaded: ", response.data[0]);
+            loading.value = false
         })
+        .catch((error) => {
+            console.log(error);
+            error.value = "Failed to load choir";
+        });
+})
 
-        // methods
-        const formatDate = function(date) {
-            if (date) {
-                return moment(String(date)).format('DD-MM-YYYY');
-            }
-        }
-
-        const save = function() {
-            saving.value = true;
-            var choir = draftValues.value;
-            if (!choir) {
-                return;
-            }
-            const promise = api.updateChoirForId(choir.id, choir);
-            promise.then(() => {
-                editing.value = false;
-                saving.value = false;
-                choir.value = choir;
-                draftValues.value = null;
-            })
-        }
-
-        const edit = function() {
-            draftValues.value = this.setlist;
-            editing.value = true;
-        }
-
-        const cancelEdit = function() {
-            draftValues.value = null;
-            editing.value = false;
-        }
+// methods
+const formatDate = function (date: Date) {
+    if (date) {
+        return moment(String(date)).format('DD-MM-YYYY');
+    }
+}
 
-        return { choir, editing, draftValues, loading, saving, error, activeTab,
-        formatDate, save, edit, cancelEdit };
-    },
-    components: {
-        ChoirMembers
+const save = function () {
+    saving.value = true;
+    var changedChoir = draftValues.value;
+    if (!changedChoir) {
+        return;
     }
+    const promise = api.updateChoirForId(changedChoir.id, changedChoir);
+    promise.then(() => {
+        editing.value = false;
+        saving.value = false;
+        choir.value = changedChoir;
+        draftValues.value = undefined;
+    })
 }
 
+
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 199677f..b719b3a 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -3,87 +3,75 @@
         <section class="hero is-medium is-link">
             <div class="hero-body">
                 <p class="subtitle">hello</p>
-                <p class="title">{{ user.displayName }}</p>
+                <p class="title">{{ user?.displayName }}</p>
             </div>
         </section>
 
         <div class="pt-5">
             <section class="section">
-            <h1 class="title">User details</h1>
-            <div class="w-40">
-                <div class="field">
-                    <label class="label">Name</label>
-                    <div class="control">
-                        <input class="input" type="text" v-model="draftValues.displayName" />
+                <h1 class="title">User details</h1>
+                <div class="w-40">
+                    <div class="field">
+                        <label class="label">Name</label>
+                        <div class="control">
+                            <input class="input" type="text" v-model="draftValues?.displayName" />
+                        </div>
                     </div>
-                </div>
 
-                <div class="field">
-                    <label class="label">Email</label>
-                    <div class="control has-icons-left">
-                        <input class="input" type="email" placeholder="you@" v-model="draftValues.email" />
-                        <span class="icon is-small is-left">
-                            <i class="fas fa-envelope"></i>
-                        </span>
+                    <div class="field">
+                        <label class="label">Email</label>
+                        <div class="control has-icons-left">
+                            <input class="input" type="email" placeholder="you@" v-model="draftValues?.email" />
+                            <span class="icon is-small is-left">
+                                <i class="fas fa-envelope"></i>
+                            </span>
+                        </div>
                     </div>
-                </div>
 
-                <button
-                    @click="save"
-                    class="button is-link"
-                    :class="{ 'is-loading': saving }"
-                >
-                    Save changes
-                </button>
-            </div>
+                    <button @click="save" class="button is-link" :class="{ 'is-loading': saving }">
+                        Save changes
+                    </button>
+                </div>
             </section>
         </div>
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useAuth } from "@/stores/authStore";
 import { useUsers } from "@/stores/userStore";
+import { User } from "@/types";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
-export default {
-    setup() {
-        const auth = useAuth();
-        const userStore = useUsers();
-        const { user: authUser } = storeToRefs(auth);
-
-        // State
-        const user = ref()
-        const loading = ref(true)
-        const saving = ref(false)
-        const draftValues = ref({})
+const auth = useAuth();
+const userStore = useUsers();
+const { user: authUser } = storeToRefs(auth);
 
-        // Computed
-        onMounted(() => {
-            console.log(auth.getUserZitadelId());
-            console.log(userStore.getCurrent());
-            userStore.getCurrent()
-                .then((value) => {
-                    user.value = value;
-                    draftValues.value = value;
-                })
-                .finally(() => loading.value = false);
-        });
+// State
+const user = ref<User>()
+const loading = ref(true)
+const saving = ref(false)
+const draftValues = ref<User>()
 
-        // Methods
-        const save = () => {
-            saving.value = true;
-            user.value = draftValues.value;
-            userStore.save(draftValues.value)
-                .finally(() => saving.value = false);
-        }
+// Computed
+onMounted(() => {
+    console.log(auth.getUserZitadelId());
+    console.log(userStore.getCurrent());
+    userStore.getCurrent()
+        .then((value) => {
+            user.value = value;
+            draftValues.value = value;
+        })
+        .finally(() => loading.value = false);
+});
 
-        return {
-            auth, user, draftValues, loading, saving,
-            save
-        }
-    }
+// Methods
+const save = () => {
+    saving.value = true;
+    user.value = draftValues.value;
+    userStore.save(draftValues.value)
+        .finally(() => saving.value = false);
 }
 </script>
 <style>
diff --git a/frontend/src/views/Repertoire.vue b/frontend/src/views/Repertoire.vue
index c8115dc..377a96c 100644
--- a/frontend/src/views/Repertoire.vue
+++ b/frontend/src/views/Repertoire.vue
@@ -9,18 +9,9 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RepertoireMenu from '@/components/RepertoireMenu.vue'
 
-// app Vue instance
-const Repertoire = {
-    name: "Repertoire",
-    components: {
-        RepertoireMenu
-    }
-};
-
-export default Repertoire;
 </script>
 
 <style>
diff --git a/frontend/src/views/Setlist.vue b/frontend/src/views/Setlist.vue
index 1f9f3b0..cff4e5d 100644
--- a/frontend/src/views/Setlist.vue
+++ b/frontend/src/views/Setlist.vue
@@ -13,16 +13,6 @@
 import SetlistDetail from '@/components/SetlistDetail.vue';
 import Songs from '@/components/Songs.vue';
 
-// app Vue instance
-const Setlist = {
-	name: "Setlist",
-	components: {
-		SetlistDetail,
-		Songs
-	}
-};
-
-export default Setlist;
 </script>
 
 <style>
diff --git a/frontend/src/views/SetlistTextExport.vue b/frontend/src/views/SetlistTextExport.vue
index a5f420e..2520738 100644
--- a/frontend/src/views/SetlistTextExport.vue
+++ b/frontend/src/views/SetlistTextExport.vue
@@ -2,40 +2,36 @@
     <div class="text">
         <div v-for="song in songs" :key="song.id">
             <div><b>{{ song.title }}</b></div>
-            <div v-html="song.text" />
+            <div v-html="song.text"></div>
             <p></p>
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import {useSongs} from "@/stores/songStore";
-import {useRoute} from "vue-router";
-import {computed, onMounted, ref} from "vue";
+<script setup lang="ts">
+import { useSongs } from "@/stores/songStore";
+import { useRoute } from "vue-router";
+import { onMounted, ref } from "vue";
+import { Song } from "@/types";
 
-export default {
-    setup () {
-        const songStore = useSongs();
-        const route = useRoute();
+const songStore = useSongs();
+const route = useRoute();
 
-        // state
-        const text = ref("")
-        const songs = ref([])
+// state
+const text = ref("")
+const songs = ref<Array<Song>>([])
 
-        onMounted(() => {
-            const setlistId = route.params.id;
-            songStore
-                .getForSetlist(setlistId)
-                .then(result => songs.value = result)
-        })
+onMounted(() => {
+    const setlistId = Number(route.params.id);
+    songStore
+        .getForSetlist(setlistId)
+        .then(result => songs.value = result)
+})
 
-        return { songs, text };
-    },
-}
 </script>
 
 <style>
-    .text p {
-        min-height: 18px;
-    }
+.text p {
+    min-height: 18px;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/SignUp.vue b/frontend/src/views/SignUp.vue
index 5a9c565..32ade4d 100644
--- a/frontend/src/views/SignUp.vue
+++ b/frontend/src/views/SignUp.vue
@@ -2,21 +2,22 @@
     <div class="signup container" v-if="!loading">
         <section class="mt-6">
             <h1 class="title has-text-primary">Register as a new user</h1>
-            <h2 class="subtitle has-text-info" v-if="isInvite">joining {{ choir.name }}</h2>
+            <h2 class="subtitle has-text-info" v-if="isInvite">joining {{ choir?.name }}</h2>
         </section>
 
-        <div class="pt-5">
+        <div class="pt-5" v-if="registration">
             <div class="field">
                 <label class="label">Name</label>
                 <div class="control">
-                    <input class="input" type="text" placeholder="Elvis" v-model="registration.displayName"/>
+                    <input class="input" type="text" placeholder="Elvis" v-model="registration.displayName" />
                 </div>
             </div>
 
             <div class="field" v-if="!isInvite">
                 <label class="label">Name of your choir</label>
                 <div class="control">
-                    <input class="input" type="text" placeholder="" v-model="registration.choirName" />
+                    <input class="input" type="text" placeholder=""
+                        v-model="(registration as NewChoirRegistration).choirName" />
                 </div>
             </div>
 
@@ -33,23 +34,21 @@
             <div class="field">
                 <label class="label">Password</label>
                 <p class="control has-icons-left">
-                    <input class="input" type="password" placeholder="Super safe password" v-model="registration.password"/>
+                    <input class="input" type="password" placeholder="Super safe password"
+                        v-model="registration.password" />
                     <span class="icon is-small is-left">
-                    <i class="fas fa-lock"></i>
-                </span>
+                        <i class="fas fa-lock"></i>
+                    </span>
                 </p>
             </div>
 
             <div class="control">
-                <button 
-                    class="button is-primary" 
-                    @click="submit"
-                    :class="{ 'is-loading': saving }">
+                <button class="button is-primary" @click="submit" :class="{ 'is-loading': saving }">
                     Create account
                 </button>
             </div>
 
-            <div v-if="success" class="has-text-success">
+            <div v-if="isSuccess" class="has-text-success">
                 Account created.
             </div>
             <div v-if="errorMessage" class="has-text-danger">
@@ -60,70 +59,69 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
 import api from "./../api.js";
+import { AcceptInvite, Choir, NewChoirRegistration, Registration } from "@/types";
+import { useRoute, useRouter } from "vue-router";
+
+type DraftRegistration = Partial<Registration>
 
-const Signup = {
-	name: "SignUp",
-	props: [],
-	// app initial state
-    data: function () {
-        return {
-            loading: true,
-            saving: false,
-            registration: {},
-            isInvite: null,
-            choir: {},
-			success: null,
-            errorMessage: null
-        };
-    },
 
-    mounted: function () {
-        let token = this.$route.query.invite;
-        this.isInvite = !!token;
-        if (token) {
-            api.getInviteByToken(token)
-                .then((response) => {
-                    this.$log.debug("Invite loaded: ", response.data);
-                    let inviteDetail = response.data;
-                    this.registration.email = inviteDetail.email;
-                    this.registration.token = inviteDetail.token;
-                    this.choir = inviteDetail.choir;
-                    this.loading = false;
-                })
-                .catch((error) => {
-                    this.$log.debug(error);
-                    this.errorMessage = "Failed to load invite";
-                    this.loading = false;
-                });
-        } else {
-            this.loading = false;
-        }
+// State
+const route = useRoute();
+const loading = ref(true)
+const saving = ref(false)
+const registration = ref<DraftRegistration>()
+const isInvite = ref(false)
+const choir = ref<Choir>()
+const isSuccess = ref<boolean>()
+const errorMessage = ref<string>()
 
-    },
+onMounted(() => {
+    const token = route.query.invite as string;
+    isInvite.value = !!token;
+    if (token) {
+        api.getInviteByToken(token)
+            .then((response) => {
+                const inviteDetail = response.data;
+                registration.value = {
+                    email: inviteDetail.email,
+                    token: inviteDetail.token
+                } as AcceptInvite
+                choir.value = inviteDetail.choir;
+                loading.value = false;
+            })
+            .catch((error) => {
+                errorMessage.value = "Failed to find invitation";
+                loading.value = false;
+            });
+    } else {
+        registration.value = {} as DraftRegistration
+        loading.value = false;
+    }
+})
 
-	methods: {
-        submit: function () {
-            this.saving = true;
-            this.errorMessage = null;
-            if (!this.registration) {
-                return;
-            }
-            let action = this.isInvite ? api.acceptInvite : api.register;
-			action(this.registration)
-				.then((response) => {
-					console.log(response);
-					this.success = true;
-                })
-                .catch((error) => {
-                    this.errorMessage = error.response.data.message ?? "Error while sending request: " + error.response.statusText;
-                    this.$log.debug(error.response);
-                })
-                .finally(() => this.saving = false);
-        },
-	}
+const submit = () => {
+    saving.value = true;
+    errorMessage.value = undefined;
+    if (!registration.value) {
+        return;
+    }
+    let promise;
+    if (isInvite.value)
+        promise = api.acceptInvite(registration.value as AcceptInvite)
+    else
+        promise = api.register(registration.value as NewChoirRegistration)
+    promise
+        .then((response) => {
+            console.log(response);
+            isSuccess.value = true;
+        })
+        .catch((error) => {
+            errorMessage.value = error.response.data.message ?? "Error while sending request: " + error.response.statusText;
+        })
+        .finally(() => saving.value = false);
 }
 
-export default Signup;
 </script>
diff --git a/frontend/src/views/SongsByCategory.vue b/frontend/src/views/SongsByCategory.vue
index 9aba53e..570ec50 100644
--- a/frontend/src/views/SongsByCategory.vue
+++ b/frontend/src/views/SongsByCategory.vue
@@ -1,43 +1,31 @@
 <template>
     <div>
         <div class="is-flex is-justify-content-space-between m-3">
-            <h1 class="title">{{ category.name }}</h1>
+            <h1 class="title" v-if="category">{{ category.name }}</h1>
         </div>
         <Songs />
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { Category } from "@/types";
+import { onMounted, ref } from "vue";
 import api from "./../api.js";
 import Songs from '@/components/Songs.vue'
+import { useRoute } from "vue-router";
 
-const SongsByCategory = {
-    name: "Songs by Category",
-    data: function () {
-        return {
-            category: {
-                name: "..."
-            }
-        };
-    },
-    mounted: function () {
-        console.log(this.$route.params);
-        var routeName = this.$route.name;
-        var categoryId = this.$route.params.id;
-        api.getCategoryById(categoryId)
-            .then((response) => {
-                this.$log.debug("Data loaded: ", response.data);
-                this.category = response.data;
-            })
-            .catch((error) => {
-                this.$log.debug(error);
-                this.error = "Failed to load repertoire";
-            });
-    },
-    components: {
-        Songs
-    }
-};
 
-export default SongsByCategory;
+// State
+const category = ref<Category>()
+const route = useRoute()
+
+onMounted(() => {
+    console.log(route.params);
+    var categoryId = Number(route.params.id);
+    api.getCategoryById(categoryId)
+        .then((response) => {
+            category.value = response.data;
+        })
+})
+
 </script>
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 69b19e5..0e3e03b 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -28,9 +28,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "CommonJS",                                /* Specify what module code is generated. */
+    "module": "ES2022",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "Node16",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "Bundler",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     "baseUrl": ".",                                  /* Specify the base directory to resolve non-relative module names. */
     "paths": {
       "@/*": [
@@ -40,8 +40,7 @@
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     "types": [
-      "webpack-env",
-      "jest"
+      "vite/client"
     ],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
@@ -115,5 +114,6 @@
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
-}
+  },
+  "include": ["src"]
+}
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 1db00be..8e1aa3e 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,10 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path';
 
 // https://vitejs.dev/config/
-const path = require("path");
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    port: 8091
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
deleted file mode 100644
index 56212d0..0000000
--- a/frontend/vue.config.js
+++ /dev/null
@@ -1,28 +0,0 @@
-module.exports = {
-    runtimeCompiler: true,
-    devServer: {
-      port: 8091
-    },
-    chainWebpack: config => {
-        config.resolve.alias.set('vue', '@vue/compat')
-        config.module
-            .rule('vue')
-            .use('vue-loader')
-            .tap(options => {
-                return {
-                    ...options,
-                    compilerOptions: {
-                        compatConfig: {
-                            MODE: 2
-                        }
-                    }
-                }
-            })
-        config
-            .plugin('html')
-            .tap(args => {
-                args[0].title = "Chorister";
-                return args;
-            })
-    }
-  };
\ No newline at end of file
diff --git a/reverse-proxy/Caddyfile-dev b/reverse-proxy/Caddyfile-dev
index 7139fc0..6d3e137 100644
--- a/reverse-proxy/Caddyfile-dev
+++ b/reverse-proxy/Caddyfile-dev
@@ -8,7 +8,7 @@ handle_path /auth/* {
 	reverse_proxy h2c://localhost:9000
 }
 handle_path /* {
-	reverse_proxy localhost:5173
+	reverse_proxy localhost:8091
 }
 
 log {