diff --git a/components/AbgabeItem.vue b/components/AbgabeItem.vue
index 27c95f015b7a331225c3d3bf839d7ff05cbee9dc..fcf0f3d819993dc5b15f53b33be9c9aa18bdc9ee 100644
--- a/components/AbgabeItem.vue
+++ b/components/AbgabeItem.vue
@@ -3,7 +3,7 @@
         :selected="selected"
     >
         <div class="flex flex-row w-full">
-            <div v-if="!inEdit" class="w-full select-none text-left mr-1">
+            <div class="w-full select-none text-left mr-1">
                 {{ title }}
             </div>
             <button
diff --git a/components/KolloquiumItem.vue b/components/KolloquiumItem.vue
index 08fd91a4398cca058d05d8b97149f64ad6a96182..04f87a95fdcd2f69031d4f16f537ba6e62ab65e7 100644
--- a/components/KolloquiumItem.vue
+++ b/components/KolloquiumItem.vue
@@ -12,13 +12,16 @@
                 class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-blue-500 hover:bg-blue-700 active:bg-blue-900 pb-1">&#9993;</button>
             <button
                 v-if="inEdit"
-                @click.native="save()"
+                @click="save()"
                 class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-green-500 hover:bg-green-700 active:bg-green-900">✓</button>
             <button
                 v-if="!inEdit"
+                @click="edit()"
                 class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-yellow-500 hover:bg-yellow-700 active:bg-yellow-900">✎</button>
             <button
-                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-red-500 hover:bg-red-700 active:bg-red-900">╳</button>
+                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-red-500 hover:bg-red-700 active:bg-red-900"
+                @click="deleteMe()"
+            >╳</button>
         </div>
     </ListItem>
 </template>
@@ -48,7 +51,14 @@ export default {
     },
     methods: {
         save() {
-            console.log("save me!")
+            this.$emit("update:inEdit", false);
+            this.$emit("update:title", this.title);
+        },
+        edit() {
+            this.$emit("update:inEdit", true);
+        },
+        deleteMe() {
+            this.$emit("deleteKolloquium")
         }
     }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 16c36137101bf1cef77dee3d6f17fc0a8fab4eef..c7a82dc872a2e7b6a02e6c8fee72924642f2fd1a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,5 @@
 <template>
-    <div
-        class="relative flex flex-col items-center justify-top min-h-screen bg-gray-100 sm:items-top sm:pt-0"
-    >
+    <div class="relative flex flex-col items-center justify-top min-h-screen bg-gray-100 sm:items-top sm:pt-0">
         <box>
             <template slot="title">
                 KolloquiumVR Control Panel
@@ -21,7 +19,10 @@
                     @click.native="selectKolloquium(kolloquium)"
                     :selected="selectedKolloquium===kolloquium.title"
                     :title="kolloquium.title"
+                    @update:title="kolloquium.title=$event"
                     :inEdit="kolloquium.inEdit"
+                    @update:inEdit="toggleEdit(kolloquium, $event)"
+                    @deleteKolloquium="deleteKolloquium(kolloquium)"
                 />
                 <ListItem
                     @click.native="createNewKolloquium()"
@@ -45,7 +46,6 @@
                 <button class="border rounded mt-4 p-2 font-semibold text-white bg-green-500 hover:bg-green-600 focus:bg-green-700">Aktivieren</button>
             </template>
         </box>
-        {{ kolloquiums }}
     </div>
 </template>
 
@@ -105,6 +105,15 @@ export default {
             this.kolloquiums = this.kolloquiums.filter(kolloquium => kolloquium.title.length > 0);
             this.kolloquiums = [...this.kolloquiums, {title: '', inEdit: true}];
 
+        },
+        toggleEdit(kolloquium, status) {
+            this.kolloquiums.forEach(kolloquium => {
+                kolloquium.inEdit = false;
+            });
+            kolloquium.inEdit = status;
+        },
+        deleteKolloquium(kolloquiumToDelete) {
+            this.kolloquiums = this.kolloquiums.filter(kolloquium => kolloquium.title != kolloquiumToDelete.title);
         }
     }
 }