diff --git a/api/__tests__/mock/mail_template.ts b/api/__tests__/mock/mail_template.ts
index 7313c3bff..a08da1af5 100644
--- a/api/__tests__/mock/mail_template.ts
+++ b/api/__tests__/mock/mail_template.ts
@@ -3,20 +3,21 @@ import { prisma } from "./prisma";
 export async function initialiseMailTemplate() {
     const mailTemplate1 = {
         name: "Vuilnis",
-        mail_subject: "Vuilnis in $(building)",
-        content: "In $(building) ligt er vuilnis op de grond",
+        mail_subject: "Vuilnis in $(gebouw_naam)",
+        content: "In $(gebouw_naam) ligt er vuilnis op de grond",
     };
 
     const mailTemplate2 = {
         name: "Code",
-        mail_subject: "Code werkt niet in $(building)",
-        content: "In $(building) werkt $(code) niet meer",
+        mail_subject: "Code werkt niet in $(gebouw_naam)",
+        content: "In $(gebouw_naam) werkt de code niet meer",
     };
 
     const mailTemplate3 = {
         name: "Ivago",
-        mail_subject: "Ivago is niet langs $(building) gekomen",
-        content: "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+        mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
+        content:
+            "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
     };
     await prisma.mailTemplate.createMany({
         data: [mailTemplate1, mailTemplate2, mailTemplate3],
diff --git a/api/__tests__/routes/mail_template.test.ts b/api/__tests__/routes/mail_template.test.ts
index 9dc68f14a..a2fa6e804 100644
--- a/api/__tests__/routes/mail_template.test.ts
+++ b/api/__tests__/routes/mail_template.test.ts
@@ -34,8 +34,8 @@ describe("Mail Template tests", () => {
         test("POST /mail_template", async () => {
             const newMailTemplate = {
                 name: "new mail template",
-                mail_subject: "new mail template subject $(building)",
-                content: "new content for $(building)",
+                mail_subject: "new mail template subject $(gebouw_naam)",
+                content: "new content for $(gebouw_naam)",
             };
 
             await runner.post({
@@ -48,22 +48,22 @@ describe("Mail Template tests", () => {
         test("GET /mail_template", async () => {
             const expected = [
                 {
-                    content: "In $(building) ligt er vuilnis op de grond",
+                    content: "In $(gebouw_naam) ligt er vuilnis op de grond",
                     id: 1,
-                    mail_subject: "Vuilnis in $(building)",
+                    mail_subject: "Vuilnis in $(gebouw_naam)",
                     name: "Vuilnis",
                 },
                 {
-                    content: "In $(building) werkt $(code) niet meer",
+                    content: "In $(gebouw_naam) werkt de code niet meer",
                     id: 2,
-                    mail_subject: "Code werkt niet in $(building)",
+                    mail_subject: "Code werkt niet in $(gebouw_naam)",
                     name: "Code",
                 },
                 {
                     content:
-                        "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+                        "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                     id: 3,
-                    mail_subject: "Ivago is niet langs $(building) gekomen",
+                    mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
                     name: "Ivago",
                 },
             ];
@@ -74,16 +74,16 @@ describe("Mail Template tests", () => {
         test("GET /mail_template with filter", async () => {
             const expected = [
                 {
-                    content: "In $(building) werkt $(code) niet meer",
+                    content: "In $(gebouw_naam) werkt de code niet meer",
                     id: 2,
-                    mail_subject: "Code werkt niet in $(building)",
+                    mail_subject: "Code werkt niet in $(gebouw_naam)",
                     name: "Code",
                 },
                 {
                     content:
-                        "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+                        "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                     id: 3,
-                    mail_subject: "Ivago is niet langs $(building) gekomen",
+                    mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
                     name: "Ivago",
                 },
             ];
@@ -99,8 +99,8 @@ describe("Mail Template tests", () => {
                 {
                     id: 1,
                     name: "Vuilnis",
-                    mail_subject: "Vuilnis in $(building)",
-                    content: "In $(building) ligt er vuilnis op de grond",
+                    mail_subject: "Vuilnis in $(gebouw_naam)",
+                    content: "In $(gebouw_naam) ligt er vuilnis op de grond",
                 },
             ];
 
@@ -118,8 +118,8 @@ describe("Mail Template tests", () => {
             const expected = {
                 id: 1,
                 name: "Updated name mail template",
-                mail_subject: "Vuilnis in $(building)",
-                content: "In $(building) ligt er vuilnis op de grond",
+                mail_subject: "Vuilnis in $(gebouw_naam)",
+                content: "In $(gebouw_naam) ligt er vuilnis op de grond",
             };
 
             await runner.patch({
@@ -137,15 +137,15 @@ describe("Mail Template tests", () => {
                 {
                     id: 2,
                     name: "Code",
-                    mail_subject: "Code werkt niet in $(building)",
-                    content: "In $(building) werkt $(code) niet meer",
+                    mail_subject: "Code werkt niet in $(gebouw_naam)",
+                    content: "In $(gebouw_naam) werkt de code niet meer",
                 },
                 {
                     id: 3,
                     name: "Ivago",
-                    mail_subject: "Ivago is niet langs $(building) gekomen",
+                    mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
                     content:
-                        "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+                        "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                 },
             ];
             await runner.get({
diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 52978f004..a75b67eb6 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -136,6 +136,12 @@
               title="Rondes"
               value="rounds"
             ></v-list-item>
+            <v-list-item
+              :to="{ name: 'template_overview' }"
+              prepend-icon="mdi-email"
+              title="Templates"
+              value="templates"
+            ></v-list-item>
           </div>
         </v-list>
 
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index c61d94beb..e736d0089 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -14,6 +14,7 @@ import BuildingScreen from "@/views/building/BuildingScreen.vue";
 import BuildingFollowup from "@/views/building/BuildingFollowup.vue";
 import GarbageMaker from "@/views/building/GarbageMaker.vue";
 import UserOverview from "@/views/dashboard/Users.vue";
+import TemplateOverview from "@/views/dashboard/Template.vue";
 import BuildingOverview from "@/views/dashboard/Buildings.vue";
 import RoundOverview from "@/views/dashboard/Round.vue";
 import ContactSyndicus from "@/views/contact/ContactSyndicus.vue";
@@ -186,7 +187,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/contact",
+        path: "/contact/:id?",
         name: "contact_syndicus",
         component: ContactSyndicus,
         meta: {
@@ -270,7 +271,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/template/nieuw",
+        path: "/sjabloon/nieuw/:id?",
         component: TemplateBuilder,
         name: "template_new",
         meta: {
@@ -283,6 +284,20 @@ const routes: any[] = [
           ) => superstudent || admin,
         },
       },
+      {
+        path: "/sjabloon",
+        component: TemplateOverview,
+        name: "template_overview",
+        meta: {
+          title: "Sjablonen",
+          auth: (
+            student: boolean,
+            superstudent: boolean,
+            syndicus: boolean,
+            admin: boolean,
+          ) => superstudent || admin,
+        },
+      },
       {
         path: "/:pathMatch(.*)*",
         component: PageNotFound,
diff --git a/web/src/types/Template.ts b/web/src/types/Template.ts
new file mode 100644
index 000000000..596233fb9
--- /dev/null
+++ b/web/src/types/Template.ts
@@ -0,0 +1,71 @@
+import { Header } from "@/components/table/Header";
+import { TableEntity } from "@/components/table/TableEntity";
+import { RowType } from "@/components/table/RowType";
+import { MailTemplateQuery, Result } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+import router from "@/router";
+
+export class Template implements TableEntity<Result<MailTemplateQuery>> {
+  headers(): Array<Header<Result<MailTemplateQuery>>> {
+    return Template.headers();
+  }
+
+  static headers(): Array<Header<Result<MailTemplateQuery>>> {
+    return [
+      {
+        id: 0,
+        name: "Template naam",
+        fit: false,
+        get: (e: Result<MailTemplateQuery>) => e.name,
+        type: RowType.TEXT,
+        sortable: true,
+      },
+      {
+        id: 1,
+        name: "",
+        fit: true,
+        get: () => "mdi-pencil",
+        type: RowType.ICONBUTTON,
+        sortable: false,
+        onClick: (e: Result<MailTemplateQuery>) => {
+          router.push({ name: "template_new", params: { id: e.id } });
+        },
+      },
+      {
+        id: 2,
+        name: "",
+        fit: true,
+        get: () => "mdi-delete",
+        type: RowType.ICONBUTTON,
+        sortable: false,
+        onClick: (
+          e: Result<MailTemplateQuery>,
+          list: Array<Result<MailTemplateQuery> | null>,
+        ) => {
+          tryOrAlertAsync(async () => {
+            await new MailTemplateQuery().deleteOne({ id: e.id });
+            const index = list.findIndex((x) => x === e);
+            list[index] = null;
+          });
+        },
+      },
+    ].map((e) => new Header<Result<MailTemplateQuery>>(e));
+  }
+
+  route(item: Result<MailTemplateQuery>): {
+    name: string;
+    params: { id: number };
+  } {
+    return Template.route(item);
+  }
+
+  static route(item: Result<MailTemplateQuery>): {
+    name: string;
+    params: { id: number };
+  } {
+    return {
+      name: "building_id",
+      params: { id: item.id },
+    };
+  }
+}
diff --git a/web/src/views/building/BuildingScreen.vue b/web/src/views/building/BuildingScreen.vue
index aa4b9f42a..61bf8b69a 100644
--- a/web/src/views/building/BuildingScreen.vue
+++ b/web/src/views/building/BuildingScreen.vue
@@ -256,18 +256,16 @@ function getBuildingDescription(): string {
   return castedBuilding.description;
 }
 
+function mail() {
+  router.push({ name: "contact_syndicus", params: { id: building.value?.id } });
+}
+
 function call(number: string | undefined) {
   if (number) {
     location.href = "tel:" + number;
   }
 }
 
-function mail(address: string | undefined) {
-  if (address) {
-    location.href = "mailto:" + address;
-  }
-}
-
 function tomaps() {
   window.open(
     `https://maps.google.com/maps?q=${building.value?.address.number}+${building.value?.address.street},+${building.value?.address.city},+${building.value?.address.zip_code}`,
diff --git a/web/src/views/contact/ContactSyndicus.vue b/web/src/views/contact/ContactSyndicus.vue
index bd1adf3c3..714107485 100644
--- a/web/src/views/contact/ContactSyndicus.vue
+++ b/web/src/views/contact/ContactSyndicus.vue
@@ -41,16 +41,17 @@
           </v-select>
         </v-col>
 
-        <v-col cols="3" class="flex-grow-0 flex-shrink-0 py-0 my-0">
+        <v-col cols="5" class="flex-grow-1 flex-shrink-0 py-0 my-0">
           <v-select
             label="Sjabloon"
             v-model="selected_template"
-            :items="templates"
+            :items="allTemplates"
             :item-value="'name'"
             :item-title="'name'"
             return-object
             prepend-inner-icon="mdi-list-box"
             :disabled="building === null"
+            @update:model-value="updateFields()"
           >
           </v-select>
         </v-col>
@@ -63,35 +64,20 @@
           class="flex-grow-1 flex-shrink-0 py-0 my-0"
         >
           <v-text-field
+            v-model="subject"
             prepend-inner-icon="mdi-text-short"
             label="Onderwerp"
-            :model-value="selected_template.subject"
           >
           </v-text-field>
         </v-col>
       </v-row>
-      <v-row class="py-0 my-0 mx-3"
-        ><v-col
-          cols="1"
-          style="min-width: 100px; max-width: 100%"
-          class="flex-grow-1 flex-shrink-0 py-0 my-0"
-          ><v-file-input
-            prepend-icon=""
-            prepend-inner-icon="mdi-upload"
-            label="Bestanden"
-          ></v-file-input></v-col
-      ></v-row>
       <v-row class="py-0 my-0 mx-3"
         ><v-col
           cols="1"
           style="min-width: 100px; max-width: 100%"
           class="flex-grow-1 flex-shrink-0 py-0 my-0"
         >
-          <v-textarea
-            rows="17"
-            label="Inhoud"
-            :model-value="selected_template.content"
-          ></v-textarea
+          <v-textarea v-model="content" rows="17" label="Inhoud"></v-textarea
         ></v-col>
       </v-row>
       <v-btn
@@ -99,6 +85,7 @@
         prepend-icon="mdi-send"
         variant="tonal"
         class="mb-6 ml-6"
+        @click="sendMail()"
         >Versturen</v-btn
       >
     </BorderCard>
@@ -106,47 +93,65 @@
 </template>
 
 <script lang="ts" setup>
-import Template from "@/components/models/Template";
-import { ref, computed, reactive, Ref } from "vue";
+import { ref, onMounted } from "vue";
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import { tryOrAlertAsync } from "@/try";
-import { Result, BuildingQuery } from "@selab-2/groep-1-query";
+import {
+  Result,
+  BuildingQuery,
+  MailTemplateQuery,
+  MailQuery,
+} from "@selab-2/groep-1-query";
+import { parseTemplate } from "@/assets/scripts/templateParser";
+import { useRoute } from "vue-router";
+
+const allTemplates = ref<Result<MailTemplateQuery>[]>([]);
+const selected_template = ref<Result<MailTemplateQuery>>();
+
+const buildings = ref<Result<BuildingQuery>[]>();
+const building = ref<Result<BuildingQuery>>();
+
+const subject = ref<string>("");
+const content = ref<string>("");
+
+const route = useRoute();
+const buildingId: number = Number(route.params.id);
+
+onMounted(() => {
+  tryOrAlertAsync(async () => {
+    allTemplates.value = await new MailTemplateQuery().getAll();
+  });
 
-const building: Ref<Result<BuildingQuery> | null> = ref(null);
+  tryOrAlertAsync(async () => {
+    buildings.value = await new BuildingQuery().getAll();
+  });
 
-const buildings =
-  (await tryOrAlertAsync<Array<Result<BuildingQuery>>>(async () => {
-    return await new BuildingQuery().getAll({});
-  })) ?? [];
+  tryOrAlertAsync(async () => {
+    building.value = await new BuildingQuery().getOne(buildingId);
+  });
+});
 
-const templates: Template[] = reactive([
-  { name: "Andere", subject: "", content: "" },
-  {
-    name: "Opmerking",
-    subject: computed(() => `Opmerking: ${building.value?.name}`),
-    content: computed(
-      () =>
-        `Beste ${building?.value?.syndicus?.user.first_name},\n\nWij hebben een opmerking ontvangen..\n\nMet vriendelijke groeten,\nDr Trottoir team`,
-    ),
-  },
-  {
-    name: "Klacht",
-    subject: computed(() => `Klacht: ${building.value?.name}`),
-    content: computed(
-      () =>
-        `Beste ${building?.value?.syndicus?.user.first_name},\n\nWij zijn ontevreden met..\n\nMet vriendelijke groeten,\nDr Trottoir team`,
-    ),
-  },
-  {
-    name: "Schade",
-    subject: computed(() => `Schade: ${building.value?.name}`),
-    content: computed(
-      () =>
-        `Beste ${building?.value?.syndicus?.user.first_name},Wij hebben schade vastgesteld..\n\nMet vriendelijke groeten,\nDr Trottoir team`,
-    ),
-  },
-]);
+function parseString(str: string | undefined): string {
+  if (building.value && str) {
+    return parseTemplate(building.value, str);
+  }
+  return "";
+}
+function updateFields() {
+  subject.value = parseString(selected_template?.value?.mail_subject);
+  content.value = parseString(selected_template?.value?.content);
+}
+function sendMail() {
+  tryOrAlertAsync(async () => {
+    await new MailQuery().createOne({
+      to: building.value?.syndicus.user.email,
+      subject: subject.value,
+      content: content.value,
+    });
 
-const selected_template = ref<Template>(templates[0]);
+    subject.value = "";
+    content.value = "";
+  });
+}
 </script>
diff --git a/web/src/views/contact/TemplateBuilder.vue b/web/src/views/contact/TemplateBuilder.vue
index b059d0a0a..80e8497e3 100644
--- a/web/src/views/contact/TemplateBuilder.vue
+++ b/web/src/views/contact/TemplateBuilder.vue
@@ -24,6 +24,7 @@
               style="min-width: 100px; max-width: 100%"
               class="flex-grow-1 flex-shrink-0 py-0 my-0 mx-3"
               ><v-text-field
+                v-model="templateName"
                 prepend-inner-icon="mdi-file-document-outline"
                 label="Template naam"
               >
@@ -64,6 +65,7 @@
             prepend-icon="mdi-content-save"
             variant="tonal"
             class="mb-6 ml-6"
+            @click="saveTemplate()"
             >Opslaan</v-btn
           >
         </BorderCard> </v-col
@@ -96,10 +98,28 @@
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import { ref } from "vue";
+import { Result, MailTemplateQuery } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+import { useRoute } from "vue-router";
 
+const templateName = ref<string>("");
 const subject = ref<string>("");
 const body = ref<string>("");
 
+const route = useRoute();
+const templateId: number = Number(route.params.id);
+
+if (templateId) {
+  tryOrAlertAsync(async () => {
+    const thisTemplate: Result<MailTemplateQuery> =
+      await new MailTemplateQuery().getOne(templateId);
+
+    templateName.value = thisTemplate.name;
+    subject.value = thisTemplate.mail_subject;
+    body.value = thisTemplate.content;
+  });
+}
+
 const variables: { name: string; description: string }[] = [
   { name: "$(syndicus_voornaam)", description: "Voornaam van een syndicus" },
   {
@@ -111,6 +131,35 @@ const variables: { name: string; description: string }[] = [
   { name: "$(gebouw_adres)", description: "Adres van het gebouw" },
   { name: "$(ivago_id)", description: "Ivago ID van het gebouw" },
 ];
+
+function saveTemplate() {
+  if (!templateId) {
+    tryOrAlertAsync(async () => {
+      await new MailTemplateQuery().createOne({
+        name: templateName.value,
+        mail_subject: subject.value,
+        content: body.value,
+      });
+    });
+    clearForm();
+  } else {
+    tryOrAlertAsync(async () => {
+      await new MailTemplateQuery().updateOne({
+        id: templateId,
+        name: templateName.value,
+        mail_subject: subject.value,
+        content: body.value,
+      });
+    });
+    clearForm();
+  }
+}
+
+function clearForm() {
+  templateName.value = "";
+  subject.value = "";
+  body.value = "";
+}
 </script>
 
 <style scoped>
diff --git a/web/src/views/dashboard/Template.vue b/web/src/views/dashboard/Template.vue
new file mode 100644
index 000000000..abef5791c
--- /dev/null
+++ b/web/src/views/dashboard/Template.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="d-flex flex-row-reverse">
+    <v-btn
+      v-if="useAuthStore().auth?.admin"
+      prepend-icon="mdi-plus"
+      color="primary"
+      class="mr-3 text-none"
+      :to="{ name: 'template_new' }"
+    >
+      Nieuwe template
+    </v-btn>
+  </div>
+  <Table :entries="templates" :headers="Template.headers()"></Table>
+</template>
+
+<script setup lang="ts">
+import Table from "@/components/table/Table.vue";
+import { useAuthStore } from "@/stores/auth";
+import { Template } from "@/types/Template";
+import { MailTemplateQuery, Result } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+
+const templates: Array<Result<MailTemplateQuery>> =
+  (await tryOrAlertAsync<Array<Result<MailTemplateQuery>>>(async () => {
+    return await new MailTemplateQuery().getAll({});
+  })) ?? [];
+</script>