diff --git a/application/controllers/api/frontend/v1/messages/Messages.php b/application/controllers/api/frontend/v1/messages/Messages.php
index ac107f687..788c8861e 100644
--- a/application/controllers/api/frontend/v1/messages/Messages.php
+++ b/application/controllers/api/frontend/v1/messages/Messages.php
@@ -17,10 +17,12 @@ class Messages extends FHCAPI_Controller
 			'sendMessage' => ['admin:r', 'assistenz:r'],
 			'deleteMessage' => ['admin:r', 'assistenz:r'],
 			'getVorlagentext' => ['admin:r', 'assistenz:r'],
+			'getPreviewText' => ['admin:r', 'assistenz:r'],
 		]);
 
 		//Load Models
 		$this->load->model('system/Message_model', 'MessageModel');
+		$this->load->model('CL/Messages_model', 'MessagesModel');
 
 		// Additional Permission Checks
 		//TODO(manu) check permissions
@@ -179,8 +181,7 @@ class Messages extends FHCAPI_Controller
 
 	public function sendMessage($recipient_id)
 	{
-		//TODO(manu) Problems with Vorlagen...
-		//TODO(Manu) Problems with VARS
+		//default setting
 		$receiversPersonId = $this->_getPersonIdFromUid($recipient_id);
 
 		$uid = getAuthUID();
@@ -201,35 +202,94 @@ class Messages extends FHCAPI_Controller
 			}
 		}
 
-		$subject = $this->input->post('subject');
+		$this->load->library('form_validation');
 
+		$this->form_validation->set_rules('subject', 'Betreff', 'required', [
+			'required' => $this->p->t('ui', 'error_fieldRequired', ['field' => 'Betreff'])
+		]);
+
+		$this->form_validation->set_rules('body', 'Text', 'required', [
+			'required' => $this->p->t('ui', 'error_fieldRequired', ['field' => 'Text'])
+		]);
+
+		if ($this->form_validation->run() == false)
+		{
+			$this->terminateWithValidationErrors($this->form_validation->error_array());
+		}
+
+		$subject = $this->input->post('subject');
 		$body = $this->input->post('body');
 
-	//	$this->terminateWithError("rp_id " . $receiversPersonId, self::ERROR_TYPE_GENERAL);
 
-/*		$subject = $this->input->post('subject');
 
-		$formData = $this->input->post('data');*/
+		$typeId = $this->input->post('type_id');
+		$id = $this->input->post('id');
 
-		//$_POST['subject'] = $formData['subject'];
-	//	$subject = $formData['subject'];
-	//	$body = $formData['body'];
+		if($typeId == 'uid')
+		{
+			//$this->terminateWithError("uid ", self::ERROR_TYPE_GENERAL);
+			$prestudent_id = $this-> _getPrestudentIdFromUid($id);
 
-	//	$subject = isset($_POST['subject']) ? $_POST['subject'] : null;
-	//	$body = isset($_POST['body']) ? $_POST['body'] : null;
+			//parseMessagetext for variables Prestudent
+			$result = $this->MessagesModel->parseMessageTextPrestudent($prestudent_id, $body);
+			$bodyParsed = $this->getDataOrTerminateWithError($result);
+		}
+		elseif($typeId == 'person_id')
+		{
+			$this->terminateWithError("person_id ", self::ERROR_TYPE_GENERAL);
 
-	//	$this->terminateWithError("person_id " . $receiversPersonId, self::ERROR_TYPE_GENERAL);
+			$result = $this->MessagesModel->parseMessageTextPerson($id, $body);
+			$bodyParsed = $this->getDataOrTerminateWithError($result);
+		}
+		elseif($typeId == 'prestudent_id')
+		{
+			$this->terminateWithError("prestudent_id ", self::ERROR_TYPE_GENERAL);
 
-	//	$this->terminateWithError("subject " . $subject, self::ERROR_TYPE_GENERAL);
-	//	$this->terminateWithError("body " . $body, self::ERROR_TYPE_GENERAL);
+			$result = $this->MessagesModel->parseMessageTextPrestudent($id, $body);
+			$bodyParsed = $this->getDataOrTerminateWithError($result);
+		}
+		else
+		{
+			$this->terminateWithError("type_id " . $typeId . " not valid", self::ERROR_TYPE_GENERAL);
+		}
 
-	//	$this->terminateWithError("person_id " . $benutzer->person_id, self::ERROR_TYPE_GENERAL);
-	//	$this->terminateWithError("subject " . $subject, self::ERROR_TYPE_GENERAL);
-		$result = $this->messagelib->sendMessageUser($receiversPersonId, $subject, $body, $benutzer->person_id);
+		$result = $this->messagelib->sendMessageUser($receiversPersonId, $subject, $bodyParsed, $benutzer->person_id);
 
 		$this->terminateWithSuccess($result);
 	}
 
+	public function getPreviewText($id, $type_id)
+	{
+		if (isset($_POST['data']))
+		{
+			$data = json_decode($_POST['data']);
+			unset($_POST['data']);
+
+		}
+		else
+			$this->terminateWithError("Textbody missing ", self::ERROR_TYPE_GENERAL);
+
+		switch($type_id)
+		{
+			case 'uid':
+				$prestudent_id = $this->_getPrestudentIdFromUid($id);
+				$result = $this->MessagesModel->parseMessageTextPrestudent($prestudent_id, $data);
+
+				break;
+			case 'person_id':
+				$id = $id;
+				break;
+			default:
+				$this->terminateWithError("MESSAGES::getPreviewText logic for type_id " . $type_id . " not defined yet", self::ERROR_TYPE_GENERAL);
+				break;
+		}
+
+		//$this->terminateWithSuccess($result);
+		$bodyParsed = $this->getDataOrTerminateWithError($result);
+
+		$this->terminateWithSuccess($bodyParsed);
+	}
+
 	public function deleteMessage($messageId)
 	{
 		// Start DB transaction
@@ -238,6 +298,7 @@ class Messages extends FHCAPI_Controller
 		$result = $this->MessageModel->deleteMessageRecipient($messageId);
 		if (isError($result)) {
 			return $this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
+			return $this->terminateWithError($result, self::ERROR_TYPE_GENERAL);
 		}
 
 		$result = $this->MessageModel->deleteMessageStatus($messageId);
@@ -265,6 +326,7 @@ class Messages extends FHCAPI_Controller
 		$data = $this->getDataOrTerminateWithError($result);
 		$benutzer = current($data);
 
+		//return $data->person_id;
 		return $benutzer->person_id;
 	}
 
diff --git a/application/models/system/Message_model.php b/application/models/system/Message_model.php
index 7ecb54a9e..0fdb39736 100644
--- a/application/models/system/Message_model.php
+++ b/application/models/system/Message_model.php
@@ -323,5 +323,4 @@ class Message_model extends DB_Model
 		return $this->execQuery($sql, array($message_id));
 	}
 	
-	
 }
diff --git a/public/js/api/messages/person.js b/public/js/api/messages/person.js
index 6a0ac8c7c..5cbb49550 100644
--- a/public/js/api/messages/person.js
+++ b/public/js/api/messages/person.js
@@ -20,13 +20,13 @@ export default {
 	getNameOfDefaultRecipient(params){
 		return this.$fhcApi.get('api/frontend/v1/messages/messages/getNameOfDefaultRecipient/' + params.id + '/' + params.type_id);
 	},
+	getPreviewText(params, data){
+		return this.$fhcApi.post('api/frontend/v1/messages/messages/getPreviewText/' + params.id + '/' + params.type_id,
+			data);
+	},
 	sendMessage(form, id, data) {
-	console.log("factory " + id);
-		console.log(JSON.stringify(data));
-
-		return this.$fhcApi.post(form, 'api/frontend/v1/messages/messages/sendMessage/' + id,
-			data
-		);
+		return this.$fhcApi.post(form,'api/frontend/v1/messages/messages/sendMessage/' + id,
+			data);
 	},
 	deleteMessage(messageId){
 		return this.$fhcApi.post('api/frontend/v1/messages/messages/deleteMessage/' + messageId);
diff --git a/public/js/components/Messages/Details/NewMessage.js b/public/js/components/Messages/Details/NewMessage.js
index 2d85c8e00..c8aae2124 100644
--- a/public/js/components/Messages/Details/NewMessage.js
+++ b/public/js/components/Messages/Details/NewMessage.js
@@ -3,7 +3,6 @@ import FormInput from '../../Form/Input.js';
 import ListBox from "../../../../../index.ci.php/public/js/components/primevue/listbox/listbox.esm.min.js";
 import DropdownComponent from '../../VorlagenDropdown/VorlagenDropdown.js';
 
-
 export default {
 	components: {
 		FormForm,
@@ -21,6 +20,7 @@ export default {
 			type: [Number, String],
 			required: true
 		},
+		openMode: String,
 	},
 	data(){
 		return {
@@ -45,12 +45,14 @@ export default {
 			itemsPrestudent: [],
 			itemsPerson: [],
 			itemsUser: [],
-			selectedFieldStudent: null,
+/*			selectedFieldStudent: null,
 			itemsStudent: [
 				{ label: "Variable 1", value: "var1" },
 				{ label: "Variable 2", value: "var2" },
 				{ label: "Variable 3", value: "var3" }
-			]
+			]*/
+			previewText: null,
+			previewBody: ""
 		}
 	},
 	methods: {
@@ -86,22 +88,35 @@ export default {
 		updateText(value) {
 			this.formData.body = value;
 		},
-		sendMessage(){
+		sendMessage() {
 			//TODO(Manu) check default recipient(s)
 			const data = new FormData();
+			const params = {
+					id: this.id,
+					type_id: this.typeId
+			};
+			const merged = {
+				...this.formData,
+				...params
+			};
+			data.append('data', JSON.stringify(merged));
 
-			data.append('data', JSON.stringify(this.formData));
-			return this.$fhcApi.factory.messages.person.sendMessage(this.$refs.formVorlage, this.id, data)
+			return this.$fhcApi.factory.messages.person.sendMessage(
+				this.$refs.formMessage,
+				this.id,
+				data)
 				.then(response => {
 					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSent'));
 					//this.hideModal('messageModal');
+					this.hideTemplate();
 					this.resetForm();
 				}).catch(this.$fhcAlert.handleSystemError)
 				.finally(() => {
-					//this.resetForm();
-					//closeModal
-					//closewindwo
-				}
+						//this.resetForm();
+						//closeModal
+						//closewindwo
+						this.$emit('reloadTable');
+					}
 				);
 		},
 		getVorlagentext(vorlage_kurzbz){
@@ -120,9 +135,37 @@ export default {
 					//closewindwo
 				});
 		},
+		getPreviewText(){
+			const data = new FormData();
+
+			data.append('data', JSON.stringify(this.formData.body));
+			return this.$fhcApi.factory.messages.person.getPreviewText({
+				id: this.id,
+				type_id: this.typeId}, data)
+				.then(response => {
+					this.previewText = response.data;
+				}).catch(this.$fhcAlert.handleSystemError)
+				.finally(() => {
+					//this.resetForm();
+					//closeModal
+					//closewindwo
+				});
+		},
 		insertVariable(selectedItem){
 			if (this.editor) {
 				this.editor.insertContent(selectedItem.value + " ");
+				//TODO(Manu) check: nicht mal mit Punkt adden gehts ohne eintrag nach vars
+/*				this.editor.focus();
+				this.editor.setDirty(true);*/
+
+				//this.editor.fire('change'); //forces
+
+				//this.editor.undoManager.add();
+
+				//this.editor.insertContent(selectedItem.value + "\u00A0");
+				//this.editor.insertContent(`<span>${selectedItem.value}&nbsp;</span>`);
+				//this.editor.selection.setCursorLocation(this.editor.getBody(), 1);
+
 			} else {
 				console.error("Editor instance is not available.");
 			}
@@ -207,6 +250,19 @@ export default {
 				this.formData.subject = vorlage_kurzbz;
 			}
 		},
+		hideTemplate(){
+			if (this.openMode == "showDiv")
+				this.isVisible = false;
+		},
+		showTemplate(){
+			if (this.openMode == "showDiv")
+				this.isVisible = true;
+		},
+		showPreview(){
+			this.getPreviewText().then(() => {
+				this.previewBody = this.previewText;
+			});
+		}
 	},
 	watch: {
 		'formData.body': {
@@ -227,14 +283,10 @@ export default {
 					this.formData.subject = newVal;
 					return this.getVorlagentext(newVal);
 				}
-				//TODO(Manu) own function or retval to getVorlagentext
-				//component VorlagenComponent
-
 			}
 		}
 	},
 	created(){
-
 		if(this.typeId == 'person_id'){
 			this.$fhcApi.factory.messages.person.getMessageVarsPerson()
 				.then(result => {
@@ -246,7 +298,6 @@ export default {
 				})
 				.catch(this.$fhcAlert.handleSystemError);
 		}
-
 		if(this.typeId == 'uid') {
 			this.$fhcApi.factory.messages.person.getMsgVarsPrestudent(this.id)
 				.then(result => {
@@ -258,8 +309,8 @@ export default {
 						value: value
 					}));*/
 					this.itemsPrestudent = Object.entries(prestudent).map(([key, value]) => ({
-						label: key,
-						value: '{' + key + '}'
+						label: key.toLowerCase(),
+						value: '{' + key.toLowerCase() + '}'
 					}));
 				})
 				.catch(this.$fhcAlert.handleSystemError);
@@ -292,157 +343,185 @@ export default {
 	},
 	template: `
 	<div class="messages-detail-newmessage">
-	
-		<div v-show="isVisible">
-			<h4>New Message</h4>
-			
-				{{typeId}} {{id}}
-			
-				{{formData.subject}}
-				{{formData.vorlage_kurzbz}}
-	
-			<p v-if="formData.body">
-				formData.body befüllt
-			</p>
-
-			<div class="row">
-			
-				<div class="col-sm-8">
-		
-					<form-form class="row g-3 mt-2" ref="formMessage">
-					
-						<div class="row mb-3">
-						
-							<form-input
-								type="text"
-								name="recipient"
-								:label="$p.t('messages/recipient')"
-								v-model="defaultRecipient"
-								disabled
-							>
-							</form-input>					
-						</div>
-						
-						<div class="row mb-3">
-							<form-input
-								type="text"
-								name="subject"
-								:label="$p.t('global/betreff') + ' *'"
-								v-model="formData.subject"
-							>
-							</form-input>					
-						</div>
-				
-						<!--Tiny MCE-->
-						<div class="row mb-3">
-							<form-input
-								ref="editor"
-								:label="$p.t('global','nachricht')  + ' *'"
-								type="textarea"
-								v-model="formData.body"
-								name="text"
-								rows="15"
-								cols="75"
-								>
-							</form-input>
-						</div>
-								
-						<div class="row">				
-							<DropdownComponent
-								ref="dropdownComp"
-								:label="$p.t('global/vorlage')"
-								@change="handleSelectedVorlage"
-								useLoggedInUserOe
-							>
-							</DropdownComponent>
-						</div>
-											
-					</form-form>
-				</div>
-		
-				<div class="col-sm-4">
-				
-					<div v-if="this.fieldsPrestudent.length > 0">
-						<strong>Felder Prestudent</strong>
-						<div class="border p-3 overflow-auto" style="height: 200px;">
-							
-							<list-box
-								v-model="selectedFieldPrestudent"
-								:options="itemsPrestudent"
-								optionLabel="label"
-							>
-							  <template #option="slotProps">
-								<div @dblclick="insertVariable(slotProps.option)">
-								  {{ slotProps.option.label }}
-								</div>
-							  </template>
-							</list-box>
-													
-						</div>
-						
-						<button class="m-3" @click="insertVariablePrestudent">Insert Variable</button>
-						<p>{{selectedFieldPrestudent}}</p>
-
-					</div>
-					
-					<div v-if="this.fieldsPerson.length > 0">
-						<strong>Felder Person</strong>
-						<div class="border p-3 overflow-auto" style="height: 200px;">
-							
-							<list-box
-								v-model="selectedFieldPerson"
-								:options="itemsPerson"
-								optionLabel="label"
-							>
-								<template #option="slotProps">
-									<div @dblclick="insertVariable(slotProps.option)">
-									  {{ slotProps.option.label }}
-									</div>
-							  </template>
-							</list-box>
-													
-						</div>
-						<button class="m-3" @click="insertVariablePerson">Insert Variable</button>
-						<p>{{selectedFieldPerson}}</p>
-					</div>
-							
-					<div>
-						<strong>Meine Felder</strong>
-						<div class="border p-3 overflow-auto" style="height: 200px;">
-							
-							<list-box
-								v-model="selectedFieldUser"
-								:options="itemsUser"
-								optionLabel="label"
-							>
-								<template #option="slotProps">
-									<div @dblclick="insertVariable(slotProps.option)">
-									  {{ slotProps.option.label }}
-									</div>
-							  </template>
-							</list-box>
-													
-						</div>
-						<button class="m-3" @click="insertVariableUser">Insert Variable</button>
-					</div>
-					
-					
-					<div class="d-grid gap-2 d-md-flex justify-content-md-end">
-					
-						<button class="btn btn-secondary" @click="resetForm">Reset All</button>
-						
-						<button v-if="statusNew" type="button" class="btn btn-primary" @click="sendMessage()">{{$p.t('ui', 'nachrichtSenden')}}</button>
-						<button v-else type="button" class="btn btn-primary" @click="replyMessage(formData.message_id)">{{$p.t('global', 'reply')}}</button>
-					</div>
-					
-				</div>
-				
-			</div>
-		</div>
-		
-		<hr>
+			<hr>
 		<button type="button" class="btn btn-warning" @click="toggleDivNewMessage()">Toggle NewMessage</button>
 		<hr>
+
+		<div v-show="isVisible">
+			<div class="overflow-auto" style="max-height: 500px; border: 1px solid #ccc;">
+
+				<h4>New Message</h4>
+	<!--			{{formData.body}}
+				||
+				{{previewText}}-->
+
+				<div class="row">
+					<div class="col-sm-8">
+						<form-form class="row g-3 mt-2" ref="formMessage">
+
+						<!--TODO(Manu) ist eigentlich ein Array, hier werden alle Einträge angegeben als String-->
+							<div class="row mb-3">
+
+								<form-input
+									type="text"
+									name="recipient"
+									:label="$p.t('messages/recipient')"
+									v-model="defaultRecipient"
+									disabled
+								>
+								</form-input>
+							</div>
+							
+							<div class="row mb-3">
+								<form-input
+									type="text"
+									name="subject"
+									:label="$p.t('global/betreff') + ' *'"
+									v-model="formData.subject"
+								>
+								</form-input>
+							</div>
+
+							<!--Tiny MCE-->
+							<div class="row mb-3">
+								<form-input
+									ref="editor"
+									:label="$p.t('global','nachricht')  + ' *'"
+									type="textarea"
+									v-model="formData.body"
+									name="text"
+									rows="15"
+									cols="75"
+									>
+								</form-input>
+							</div>
+
+							<div class="row">
+								<DropdownComponent
+									ref="dropdownComp"
+									:label="$p.t('global/vorlage')"
+									@change="handleSelectedVorlage"
+									useLoggedInUserOe
+								>
+								</DropdownComponent>
+							</div>
+
+						</form-form>
+					</div>
+
+					<div class="col-sm-4">
+						<div v-if="this.fieldsPrestudent.length > 0">
+							<strong>Felder Prestudent</strong>
+							<div class="border p-3 overflow-auto" style="height: 200px;">
+
+								<list-box
+									v-model="selectedFieldPrestudent"
+									:options="itemsPrestudent"
+									optionLabel="label"
+								>
+								  <template #option="slotProps">
+									<div @dblclick="insertVariable(slotProps.option)">
+									  {{ slotProps.option.label }}
+									</div>
+								  </template>
+								</list-box>
+
+							</div>
+
+							<button class="m-3" @click="insertVariablePrestudent">Insert Variable</button>
+							<p>{{selectedFieldPrestudent}}</p>
+
+						</div>
+
+						<div v-if="this.fieldsPerson.length > 0">
+							<strong>Felder Person</strong>
+							<div class="border p-3 overflow-auto" style="height: 200px;">
+
+								<list-box
+									v-model="selectedFieldPerson"
+									:options="itemsPerson"
+									optionLabel="label"
+								>
+									<template #option="slotProps">
+										<div @dblclick="insertVariable(slotProps.option)">
+										  {{ slotProps.option.label }}
+										</div>
+								  </template>
+								</list-box>
+
+							</div>
+							<button class="m-3" @click="insertVariablePerson">Insert Variable</button>
+							<p>{{selectedFieldPerson}}</p>
+						</div>
+
+						<div>
+							<strong>Meine Felder</strong>
+							<div class="border p-3 overflow-auto" style="height: 200px;">
+
+								<list-box
+									v-model="selectedFieldUser"
+									:options="itemsUser"
+									optionLabel="label"
+								>
+									<template #option="slotProps">
+										<div @dblclick="insertVariable(slotProps.option)">
+										  {{ slotProps.option.label }}
+										</div>
+								  </template>
+								</list-box>
+
+							</div>
+							<button class="m-3" @click="insertVariableUser">Insert Variable</button>
+						</div>
+
+						<div class="d-grid gap-2 d-md-flex justify-content-md-end">
+
+							<button class="btn btn-secondary" @click="resetForm">Reset All</button>
+
+							<button v-if="statusNew" type="button" class="btn btn-primary" @click="sendMessage()">{{$p.t('ui', 'nachrichtSenden')}}</button>
+							<button v-else type="button" class="btn btn-primary" @click="replyMessage(formData.message_id)">{{$p.t('global', 'reply')}}</button>
+						</div>
+
+					</div>
+
+				</div>
+
+				<div class="row mt-4">
+
+					<h4>Vorschau:</h4>
+					<div>
+						<form-form class="row g-3 mt-2" ref="formPreview">
+
+							<div class="col-sm-2 mb-3">
+								<form-input
+									type="select"
+									name="recipient"
+									:label="$p.t('messages/recipient')"
+									v-model="defaultRecipient"
+								>
+								</form-input>
+							</div>
+
+							<div class="col-md-2 mt-4">
+								<br>
+								<button type="button" class="btn bt		n-secondary" @click="showPreview()">Aktualisieren</button>
+							</div>
+						</form-form>
+
+						<div class="col-sm-12 overflow-scroll">
+								<div ref="preview">
+									<div v-html="previewBody" class="p-3 border rounded overflow-scroll twoColumns"></div>
+								</div>
+						</div>
+
+					</div>
+
+				</div>
+	
+			</div>
+
+		</div>
+
 	</div>
 	`
 
diff --git a/public/js/components/Messages/Details/TableMessages.js b/public/js/components/Messages/Details/TableMessages.js
index 0025d7b47..10210ece4 100644
--- a/public/js/components/Messages/Details/TableMessages.js
+++ b/public/js/components/Messages/Details/TableMessages.js
@@ -22,6 +22,7 @@ export default {
 			required: true
 		},
 		messageLayout: String,
+		openMode: String
 	},
 	//TODO(Manu) endpoint macht Probleme
 	data(){
@@ -238,15 +239,14 @@ export default {
 				const linkWindowNewMessage = this.cisRoot + '/public/js/components/Messages/Details/NewMessage.js';
 				window.open(linkWindowNewMessage, '_blank');
 			}
-			else if (this.openmode == "modal"){
+			else if (this.openMode == "modal"){
 				console.log("open with bootstrap Modal");
 			}
-			else if (this.openmode == "showDiv"){
-				console.log("open div in NewMessage.js");
-				//emit to NewMessage.js
+			else if (this.openMode == "showDiv"){
+				this.$emit('showNewMessageTemplate');
 			}
 			else
-				console.log("no valid openmode: yet to be developed");
+				console.log("no valid openMode");
 		},
 		reload() {
 			this.$refs.table.reloadTable();
diff --git a/public/js/components/Messages/Messages.js b/public/js/components/Messages/Messages.js
index a7cccb8cb..f862ebc46 100644
--- a/public/js/components/Messages/Messages.js
+++ b/public/js/components/Messages/Messages.js
@@ -28,31 +28,56 @@ export default {
 				].includes(value)
 			}
 		},
+		openMode: {
+			type: String,
+			default: 'window',
+			validator(value) {
+				return [
+					'window',
+					'modal',
+					'showDiv'
+				].includes(value)
+			}
+		}
 	},
 	data() {
 		return {}
 	},
+	methods: {
+		showNewMessageTemplate(){
+			this.$refs.templateNewMessage.showTemplate();
+		},
+		reloadTable(){
+			this.$refs.templateTableMessage.reload();
+		}
+	},
 	template: `
 	<div class="core-messages h-100 pb-3">
 <!--	<p>endpoint Messages.js: {{endpoint}}</p>-->
 		<div v-if="showNew">
-			<NewMessage
+			<new-message
+				ref="templateNewMessage"
 				:type-id="typeId"
 				:id="id"
 				:endpoint="endpoint"
+				:openMode="openMode"
+				@reloadTable="reloadTable"
 			>
-			</NewMessage>
+			</new-message>
 		</div>
 		
 		<div v-if="showTable">
-			<TableMessages
+			<table-messages
+				ref="templateTableMessage"
 				:type-id="typeId"
 				:id="id"
 				:endpoint="endpoint"
 				:messageLayout="messageLayout"
+				:openMode="openMode"
+				@showNewMessageTemplate="showNewMessageTemplate"
 			>
 			
-			</TableMessages>
+			</table-messages>
 		</div>
 		
 	</div>
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Messages.js b/public/js/components/Stv/Studentenverwaltung/Details/Messages.js
index 14d74e56c..bc07401e6 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Messages.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Messages.js
@@ -1,4 +1,5 @@
 import CoreMessages from "../../../Messages/Messages.js";
+//import CoreMessages from "@/Messages/Messages.js";
 
 export default {
 	components: {
@@ -17,6 +18,7 @@ export default {
 			messageLayout="twoColumnsTableLeft"
 			show-table
 			show-new
+			open-mode="showDiv"
 			>
 		</core-messages>
 
diff --git a/public/js/components/VorlagenDropdown/VorlagenDropdown.js b/public/js/components/VorlagenDropdown/VorlagenDropdown.js
index e4c48501a..b074711f4 100644
--- a/public/js/components/VorlagenDropdown/VorlagenDropdown.js
+++ b/public/js/components/VorlagenDropdown/VorlagenDropdown.js
@@ -1,5 +1,5 @@
 import {CoreFilterCmpt} from "../filter/Filter.js";
-import FormForm from '../Form/Form';
+import FormForm from '../Form/Form.js';
 import FormInput from '../Form/Input.js';
 
 export default {
@@ -39,16 +39,13 @@ export default {
 	},
 	methods: {
 		updateValue() {
-		//	console.log("in COMPO: update: " + this.selectedValue + ' jetzt ' + 'InfocenterMailErgaenzungsprfEng');
 			this.$emit('change', this.selectedValue);
-			//this.$emit('change', this.selectedValue); // Emit-Event beim Ändern des Wertes
 		},
 		setValue(value) {
 			this.selectedValue = value;
 		},
 	},
-	 created() {
-
+	created() {
 		if(this.isAdmin) {
 			this.$fhcApi.factory.vorlagen.getVorlagen()
 				.then(result => {
@@ -103,7 +100,6 @@ template: `
 				</option>
 			</form-input>
 		</div>
-		
 	</div>
 	`,
 }
\ No newline at end of file