diff --git a/application/views/Vertragsverwaltung.php b/application/views/Vertragsverwaltung.php
index 988d5cdb8..d4802398e 100644
--- a/application/views/Vertragsverwaltung.php
+++ b/application/views/Vertragsverwaltung.php
@@ -16,7 +16,7 @@ $includesArray = array(
 	'customCSSs' => [
 		'public/css/components/vue-datepicker.css',
 		'public/css/components/primevue.css',
-/*		'public/css/Vertragsverwaltung.css'*/
+		'public/css/Vertragsverwaltung.css'
 	],
 	'customJSs' => [
 		#'vendor/npm-asset/primevue/tree/tree.min.js',
diff --git a/public/css/Vertragsverwaltung.css b/public/css/Vertragsverwaltung.css
new file mode 100644
index 000000000..7f28d7335
--- /dev/null
+++ b/public/css/Vertragsverwaltung.css
@@ -0,0 +1,16 @@
+@import './components/verticalsplit.css';
+
+html {
+  font-size: .875em;
+}
+.vv{
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+.vv> header {
+	flex: 0 0 auto;
+}
+.vv> div {
+	flex: 1 1 auto;
+}
diff --git a/public/js/components/Vertraege/List/Details.js b/public/js/components/Vertraege/List/Details.js
index c11d178e7..60ec5110e 100644
--- a/public/js/components/Vertraege/List/Details.js
+++ b/public/js/components/Vertraege/List/Details.js
@@ -194,9 +194,10 @@ export default {
 	},
 	template: `
 
-	<div class="ore-contracts-details h-50 d-flex flex-column w-100">
+	<div class="ore-contracts-details h-50 d-flex flex-column w-100 mt-2">
+<!--	<div class="core-contracts-details vv">-->
 	<br>		
-		<h4>{{$p.t('vertrag', 'vertragDetails')}}</h4>
+		<h5>{{$p.t('vertrag', 'vertragDetails')}}</h5>
 	
 		<core-filter-cmpt
 			ref="table"
diff --git a/public/js/components/Vertraege/List/Status.js b/public/js/components/Vertraege/List/Status.js
index 02ba09d1a..3c05daa66 100644
--- a/public/js/components/Vertraege/List/Status.js
+++ b/public/js/components/Vertraege/List/Status.js
@@ -214,9 +214,9 @@ export default {
 		}
 	},
 	template: `
-	<div class="core-contracts-status h-50 d-flex flex-column w-100">
+	<div class="core-contracts-status h-50 d-flex flex-column w-100 mt-2">
 		<br>
-		<h4>{{$p.t('vertrag', 'vertragStatus')}}</h4>
+		<h5>{{$p.t('vertrag', 'vertragStatus')}}</h5>
 	
 		<core-filter-cmpt
 			ref="table"
diff --git a/public/js/components/Vertraege/MitarbeiterHeader.js b/public/js/components/Vertraege/MitarbeiterHeader.js
index 76f3337f9..84d8e03b8 100644
--- a/public/js/components/Vertraege/MitarbeiterHeader.js
+++ b/public/js/components/Vertraege/MitarbeiterHeader.js
@@ -132,7 +132,7 @@ export default {
 		},
 	},
 	template: `
-	<div class="core-mitarbeiter h-100 d-flex flex-column">
+	<div class="core-mitarbeiter-header">
 		<h4>{{$p.t('vertrag', 'vertragsverwaltung')}}</h4>
 		
 <!--	filter: show only active employees-->
diff --git a/public/js/components/Vertraege/Vertragsverwaltung.js b/public/js/components/Vertraege/Vertragsverwaltung.js
index 33e276f3c..85f183584 100644
--- a/public/js/components/Vertraege/Vertragsverwaltung.js
+++ b/public/js/components/Vertraege/Vertragsverwaltung.js
@@ -1,6 +1,6 @@
 import MitarbeiterHeader from "./MitarbeiterHeader.js";
 import MitarbeiterDetails from "./MitarbeiterDetails.js";
-import Vertraege from "./Vertraege.js";
+import VertraegeMitarbeiter from "./Vertraege.js";
 import VerticalSplit from "../verticalsplit/verticalsplit.js";
 
 export default {
@@ -8,11 +8,11 @@ export default {
 		VerticalSplit,
 		MitarbeiterHeader,
 		MitarbeiterDetails,
-		Vertraege
+		VertraegeMitarbeiter
 	},
 	props: {
 		config: Object,
-		permissions: Object, //TODO(Manu)
+		permissions: Object,
 	},
 	provide() {
 		return {
@@ -38,24 +38,23 @@ export default {
 		}
 	},
 	template: `
-<div>
+<div class="vv">
 	<div class="container-fluid overflow-hidden">
-		<div class="row h-100">
 			<main class="col-md-8 ms-sm-auto col-lg-9 col-xl-10">
-				<vertical-split>
+				<vertical-split ref="vsplit">
 					<template #top>	
-						<MitarbeiterHeader :filterMa="filterMa" :vertragsarten="vertragsarten" @selectedPerson="selectPerson" />
+	<!--					<div class="d-flex flex-column" style="height: 100%;">-->
+							<MitarbeiterHeader :filterMa="filterMa" :vertragsarten="vertragsarten" @selectedPerson="selectPerson" />
+<!--						</div>-->
 					</template>
 					<template #bottom>
 						<div class="col" v-if="person_id!=null">
 							<mitarbeiter-details :person_id="person_id"></mitarbeiter-details>
-							<h5>Verträge</h5>
-							<Vertraege :endpoint="$fhcApi.factory.vertraege.person" :person_id="this.person_id"/>
+							<VertraegeMitarbeiter :endpoint="$fhcApi.factory.vertraege.person" :person_id="this.person_id"/>
 						</div>
 					<template>
 				</vertical-split>
 			</main>	
-			</div>
 		</div>
 	</div>
 	`