diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5be5a57..f01d768 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6,7 +6,8 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
-        "@formkit/nuxt": "^1.0.0-beta.10"
+        "@formkit/nuxt": "^1.0.0-beta.10",
+        "vue-toastification": "^2.0.0-rc.5"
       },
       "devDependencies": {
         "@nuxtjs/tailwindcss": "^5.3.3",
@@ -9186,6 +9187,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -16272,6 +16281,12 @@
         "@vue/devtools-api": "^6.1.4"
       }
     },
+    "vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 26b2bf5..fc976f5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "nuxt-icon": "^0.1.5"
   },
   "dependencies": {
-    "@formkit/nuxt": "^1.0.0-beta.10"
+    "@formkit/nuxt": "^1.0.0-beta.10",
+    "vue-toastification": "^2.0.0-rc.5"
   }
 }
diff --git a/frontend/pages/settings/admin/ledenlijst.vue b/frontend/pages/settings/admin/ledenlijst.vue
index 8f2e543..a28b87a 100644
--- a/frontend/pages/settings/admin/ledenlijst.vue
+++ b/frontend/pages/settings/admin/ledenlijst.vue
@@ -12,13 +12,18 @@
 </template>
 
 <script setup>
+import { useToast } from 'vue-toastification'
+
 definePageMeta({
     title: 'Ledenlijst',
     key: 'back'
 })
 
+const toast = useToast()
+
 const file = ref(null)
 const disableButtons = ref(false)
+const ledenlijst = ref([])
 
 const handleFileChanged = (event) => {
     const target = event.target;
@@ -31,6 +36,74 @@ const handleFileChanged = (event) => {
 const submitLedenlijst = () => {
     disableButtons.value = true
 
-    console.log('submitting', file.value)
+    let reader = new FileReader()
+
+    reader.onload = function() {
+        csvToJson(reader.result);
+    };
+
+    reader.onerror = function() {
+        console.log(reader.error);
+    };
+
+    reader.readAsText(file.value)
+}
+
+const csvToJson = (csv) => {
+    let array = csv.split("\n")
+    let result = [];
+
+    let headers = array[0].split(",")
+
+    for (let i = 1; i < array.length - 1; i++) {
+        let obj = {}
+    
+        let str = array[i]
+        let s = ''
+    
+        let flag = 0
+        for (let ch of str) {
+            if (ch === '"' && flag === 0) {
+                flag = 1
+            }
+            else if (ch === '"' && flag == 1) flag = 0
+            if (ch === ',' && flag === 0) ch = '|'
+            if (ch !== '"') s += ch
+        }
+    
+        let properties = s.split("|")
+    
+        for (let j in headers) {
+            if (properties[j].includes(",")) {
+                obj[headers[j]] = properties[j]
+                .split(",").map(item => item.trim())
+            }
+            else obj[headers[j]] = properties[j]
+        }
+        
+        result.push(obj)
+    }
+
+    if (!Object.hasOwn(result[0], 'Relatiecode') || !Object.hasOwn(result[0], 'Volledige naam (1)') || !Object.hasOwn(result[0], 'E-mail') || !Object.hasOwn(result[0], '2e E-mail') || !Object.hasOwn(result[0], 'Verenigingssporten') || !Object.hasOwn(result[0], 'Diploma dropdown 1')) return toast.error('Missing properties')
+
+    for (let i in result) {
+        let groups = []
+        if (Array.isArray(result[i].Verenigingssporten)) {
+            for (let j = 0; j < result[i].Verenigingssporten.length; j++ ) {
+                let tmp = result[i].Verenigingssporten[j].split(' - ')
+                tmp.shift()
+                if (tmp[1] === 'Week') tmp[1] = 'Vrijdag'
+                groups.push(...tmp)
+            }
+        } else {
+            groups = result[i].Verenigingssporten.split(' - ')
+            groups.shift()
+            if (groups[1] === 'Week') groups[1] = 'Vrijdag'
+        }
+
+        ledenlijst.value.push({ relatiecode: result[i].Relatiecode, fullName: result[i]['Volledige naam (1)'].join(' '), email: [result[i]['E-mail'], result[i]['2e E-mail']], groups: groups, diploma: result[i]['Diploma dropdown 1'] })
+    }
+
+    console.log(ledenlijst.value)
 }
 </script>
\ No newline at end of file
diff --git a/frontend/plugins/toast.js b/frontend/plugins/toast.js
new file mode 100644
index 0000000..8ec7f9b
--- /dev/null
+++ b/frontend/plugins/toast.js
@@ -0,0 +1,6 @@
+import Toast from "vue-toastification";
+import "vue-toastification/dist/index.css";
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(Toast)
+})
\ No newline at end of file