diff --git a/public/css/components/Detailheader.css b/public/css/components/Detailheader.css
index a81ec0283..e283a55cc 100644
--- a/public/css/components/Detailheader.css
+++ b/public/css/components/Detailheader.css
@@ -5,4 +5,60 @@
 .bg-unruly {
     background-color: #ad1010 !important;
     color: white;
-}
\ No newline at end of file
+}
+
+/*.fotosperre {
+    z-index: 1;
+    font-size: 1rem;
+    width: 1.25rem;
+    height: 1.25rem;
+}*/
+
+.foto-container .fotoedit {
+    opacity: 0;
+    transition: opacity 0.3s;
+    backdrop-filter: blur(2px);
+}
+
+.fotoedit {
+    background-color: rgba(0, 0, 0, 0.4);
+    color: white;
+    border: none;
+    z-index: 4;
+    font-size: 1rem;
+    width: 1.8rem;
+    height: 1.8rem;
+    opacity:0;
+    transition: opacity 0.2s;
+    top:20%;
+}
+
+/* fotoeditMa {
+    background-color: rgba(0, 0, 0, 0.4);
+    color: white;
+    border: none;
+    z-index: 4;
+    font-size: 1rem;
+    opacity:0;
+    transition: opacity 0.2s;
+    top:20%;
+}*/
+
+.buttonleft {
+    margin-left: 1rem;
+}
+
+.buttonright {
+    margin-right: 1rem;
+}
+
+/*.fotoEditMa {
+    z-index: 104;
+    font-size: 1rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    opacity:0;
+    transition: opacity 0.2s;
+    top:13%;"
+    z-index: 104; font-size: 1rem; width: 2.5rem; height: 2.5rem; opacity:0; transition: opacity 0.2s; top:13%;"
+}*/
diff --git a/public/js/components/DetailHeader/DetailHeader.js b/public/js/components/DetailHeader/DetailHeader.js
index 3e09f376a..164030592 100644
--- a/public/js/components/DetailHeader/DetailHeader.js
+++ b/public/js/components/DetailHeader/DetailHeader.js
@@ -7,12 +7,6 @@ export default {
 	components: {
 		ModalUploadFoto
 	},
-/*	inject: {
-		domain: {
-			from: 'configDomain',
-			default: 'fhcomplete.info'
-		},
-	},*/
 	props: {
 		headerData: {
 			type: Object,
@@ -203,23 +197,21 @@ export default {
 					/>
 
 					<template v-if="person.foto_sperre">
-						<i
-						  class=" fa fa-lock text-secondary bg-light rounded d-flex justify-content-center align-items-center position-absolute top-0 end-0"
-						  style="z-index: 1; font-size: 1rem; width: 1.25rem; height: 1.25rem;"
-						></i>
+						<i class="fa fa-lock text-secondary bg-light rounded d-flex justify-content-center align-items-center position-absolute top-0 end-0"
+						style="z-index: 1; font-size: 1rem; width: 1.25rem; height: 1.25rem;"
+						>
+						</i>
 					</template>
 					<template v-if="fotoEditable">
 						<button
 							type="button"
-							class="fotoedit btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute start-0"
-							style="z-index: 4; font-size: 1rem; width: 1.5rem; height: 1.5rem; opacity:0; transition: opacity 0.2s; top:20%; left:2rem;"
+							class="fotoedit buttonleft btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute start-0"
 							@click="showDeleteModal(headerData[0].person_id)">
 							<i class="fa fa-xmark"></i>
 						</button>
 						<button
 							type="button"
-							class="fotoedit btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute end-0"
-							style="z-index: 4; font-size: 1rem; width: 1.5rem; height: 1.5rem; opacity:0; transition: opacity 0.2s; top:20%; right:2rem;"
+							class="fotoedit buttonright btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute end-0"
 							@click="showModal(headerData[0].person_id)">
 							<i class="fa fa-pen"></i>
 						</button>
diff --git a/public/js/components/DetailHeader/Modal/UploadFoto.js b/public/js/components/DetailHeader/Modal/UploadFoto.js
index 34f569828..a04677c67 100644
--- a/public/js/components/DetailHeader/Modal/UploadFoto.js
+++ b/public/js/components/DetailHeader/Modal/UploadFoto.js
@@ -19,11 +19,9 @@ export default {
 	},
 	data(){
 		return{
-			formData: {
-				file: null,
-				preview: null,
-				base64Image: null,
-			},
+			base64Image: null,
+			file: null,
+			preview: null,
 		}
 	},
 	methods:{
@@ -36,6 +34,7 @@ export default {
 
 			// convert File in base64
 			const reader = new FileReader();
+
 			reader.onload = (event) => {
 				this.base64Image = event.target.result;
 				this.preview = this.base64Image;
@@ -51,19 +50,23 @@ export default {
 
 			return this.$api
 				.call(ApiHandleFoto.uploadFoto(person_id, {
-						image: this.base64Image,    // Base64 String
-						filename: this.file.name    // Original name of file
+						image: this.base64Image,
+						filename: this.file.name
 							}))
 				.then(result => {
 					this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successFotoUpload'));
-					this.resetModal();
-					this.$refs.modalUploadFoto.hide();
+					this.closeModal();
 					this.$emit('reload');
 				})
 				.catch(this.$fhcAlert.handleSystemError);
 		},
 		resetModal(){
-			this.formData.foto = [];
+			this.base64Image = [];
+			this.file = null;
+		},
+		closeModal(){
+			this.resetModal();
+			this.$refs.modalUploadFoto.hide();
 		}
 	},
 	template: `
@@ -78,18 +81,19 @@ export default {
 				<form-form
 					ref="formUploadFoto"
 					>
-
 					  <div>
-						<input type="file" @change="onFileChange" accept="image/*" />
-						<div v-if="preview">
-						  <p>Preview:</p>
-						  <img :src="preview" width="200" />
+						<input class="form-control" type="file" @change="onFileChange" accept="image/*" />
+						<div class="mt-3">
+						   <div>
+						   	<img :src="base64Image" style="width:100px"/>
+						  </div>
 						</div>
 					  </div>
 				</form-form>
 
 				<template #footer>
 					<div class="d-grid gap-2 d-md-flex justify-content-md-end">
+					    <button class="btn btn-secondary" @click="closeModal()">{{$p.t('ui', 'cancel')}}</button>
 						<button type="button" class="btn btn-primary" @click="uploadImage(person_id)">{{$p.t('ui', 'hochladen')}}</button>
 					</div>
 				</template>
diff --git a/public/js/components/Stv/Studentenverwaltung/Details.js b/public/js/components/Stv/Studentenverwaltung/Details.js
index 3c19c7cae..89c1a12be 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details.js
@@ -71,6 +71,7 @@ export default {
 				:headerData="students"
 				typeHeader="student"
 				@reload="reloadList"
+				fotoEditable
 			>
 				<template #titleAlphaTile>P_ID</template>
 				<template #valueAlphaTile>{{students[0].person_id}}</template>