--- a/client/src/assets/application.scss	Thu Feb 07 11:27:07 2019 +0100
+++ b/client/src/assets/application.scss	Thu Feb 07 15:14:40 2019 +0100
@@ -99,16 +99,13 @@
 }
 
 .popup {
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  margin-left: -150px;
   width: 300px;
   max-width: 300px;
+  @extend %fully-centered;
 }
 
 .popup.show {
-  margin: 0.5rem 0 0 -150px;
+  margin: 0.5rem 0 0 0;
   max-height: 999px;
 }
 
@@ -132,3 +129,11 @@
 .headline {
   font-weight: bold;
 }
+
+.list-fade-enter-active, .list-fade-leave-active {
+  transition: transform .3s;
+}
+.list-fade-enter, .list-fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}

--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Thu Feb 07 11:27:07 2019 +0100
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Thu Feb 07 15:14:40 2019 +0100
@@ -3,16 +3,18 @@
     <div class="d-flex flex-row justify-content-between">
       <h5><translate>PDF-Templates</translate></h5>
       <input
-        id="uploadPDFTemplate"
-        ref="uploadPDFTemplate"
+        @change="upload"
+        id="uploadPDFTemplates"
+        ref="uploadPDFTemplates"
         type="file"
         style="visibility:hidden"
       />
       <button
         class="btn btn-sm btn-info"
-        @click="$refs.uploadPDFTemplate.click()"
+        @click="$refs.uploadPDFTemplates.click()"
       >
-        <font-awesome-icon icon="plus" />
+        <font-awesome-icon icon="spinner" class="fa-spin" v-if="uploading" />
+        <font-awesome-icon icon="plus" v-else />
       </button>
     </div>
     <div class="d-flex mt-1">
@@ -26,7 +28,7 @@
             <th></th>
           </tr>
         </thead>
-        <tbody>
+        <transition-group name="list-fade" tag="tbody">
           <tr v-for="template in pdfTemplates" :key="template.name">
             <td>{{ template.name }}</td>
             <td>{{ template.description }}</td>
@@ -36,14 +38,58 @@
               <button class="btn btn-sm btn-info mr-2">
                 <font-awesome-icon icon="download" />
               </button>
-              <button class="btn btn-sm btn-danger">
+              <button
+                class="btn btn-sm btn-danger"
+                @click="
+                  showDeleteTemplatePrompt = true;
+                  templateToDelete = template;
+                "
+              >
                 <font-awesome-icon icon="trash" />
               </button>
             </td>
           </tr>
-        </tbody>
+        </transition-group>
       </table>
     </div>
+
+    <div
+      :class="[
+        'box popup ui-element rounded bg-white',
+        { show: showDeleteTemplatePrompt }
+      ]"
+    >
+      <div>
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+          <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon>
+          <translate>Delete PDF Template</translate>
+          <font-awesome-icon
+            icon="times"
+            class="ml-auto text-muted"
+            @click="showDeleteTemplatePrompt = false"
+          ></font-awesome-icon>
+        </h6>
+        <div class="p-3 text-left">
+          <translate class="text-center d-block">
+            Do you really want to delete the following template:
+          </translate>
+          <h5 class="mt-3 text-center">{{ templateToDelete.name }}</h5>
+        </div>
+        <div
+          class="py-2 px-3 border-top d-flex align-items-center justify-content-between"
+        >
+          <button
+            class="btn btn-sm btn-warning"
+            @click="showDeleteTemplatePrompt = false"
+          >
+            no
+          </button>
+          <button class="btn btn-sm btn-info" @click="remove(templateToDelete)">
+            yes
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -65,8 +111,32 @@
 
 export default {
   name: "pdftemplates",
+  data() {
+    return {
+      uploading: false,
+      templateToDelete: "",
+      showDeleteTemplatePrompt: false
+    };
+  },
   computed: {
     ...mapState("application", ["pdfTemplates"])
+  },
+  methods: {
+    upload() {
+      this.uploading = true;
+      this.$store
+        .dispatch(
+          "application/uploadPDFTemplates",
+          this.$refs.uploadPDFTemplates.files
+        )
+        .then(() => {
+          this.uploading = false;
+        });
+    },
+    remove(template) {
+      this.showDeleteTemplatePrompt = false;
+      this.$store.dispatch("application/removePDFTemplate", template);
+    }
   }
 };
 </script>

--- a/client/src/store/application.js	Thu Feb 07 11:27:07 2019 +0100
+++ b/client/src/store/application.js	Thu Feb 07 15:14:40 2019 +0100
@@ -212,6 +212,30 @@
           resolve();
         }, 500);
       });
+    },
+    uploadPDFTemplates({ state, commit }, files) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          const reader = new FileReader();
+          reader.onload = event => {
+            let templates = state.pdfTemplates;
+            templates.push(JSON.parse(event.target.result));
+            commit("pdfTemplates", templates);
+            // TODO: send template to server
+          };
+          reader.onerror = error => reject(error);
+          reader.readAsText(files[0]);
+          resolve();
+        }, 1000);
+      });
+    },
+    removePDFTemplate({ state, commit }, template) {
+      let templates = state.pdfTemplates;
+      let removeIndex = templates.findIndex(t => t.name === template.name);
+      if (removeIndex !== -1) {
+        templates.splice(removeIndex, 1);
+        commit("pdfTemplates", templates);
+      }
     }
   }
 };