diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 3219db32..c2eb69c1 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -45,3 +45,63 @@ button:active {
   background-color: var(--green);
 }
 
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 1;
+}
+
+.list {
+  margin-top: 30px;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+.listItem {
+  position: relative;
+  background-color: #FFFFFF;
+  border: 1px solid rgb(209, 213, 219);
+  display: flex;
+  align-items: center;
+  text-align: left;
+  margin-top: -1px;
+}
+
+.listItemButton {
+  position: relative;
+  background-color: #FFFFFF;
+  border: none;
+  display: flex;
+  align-items: center;
+  font-size: 1.25rem;
+  padding: .75rem 1rem;
+  padding-left: 0;
+  text-align: left;
+  height: 50px;
+  width: 100%;
+}
+
+.listItemAddButton {
+  text-align: center;
+  position: relative;
+  background-color: #FFFFFF;
+  border: 1px solid rgb(209, 213, 219);
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  padding: .75rem 1rem;
+  margin-top: -1px;
+}
+
+.listItemId, .listItemName {
+  padding: .75rem 1rem;
+}
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
index 9fbe19f8..5e4ae8f8 100644
--- a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
@@ -6,7 +6,7 @@
 	import TopBarTrainer from "@/components/widgets/TopBarTrainer.vue"
 	import {svg} from "@/assets/Svg"
 	import {setArea} from "@/components/screensTrainer/ScreenResourceCreation.vue"
-	import AreaPopup from '../widgets/AreaPopup.vue'
+	import DeleteItemPopup from '../widgets/DeleteItemPopup.vue'
 
 	const exerciseStore = useExerciseStore()
 
@@ -32,21 +32,27 @@
 		socketTrainer.areaAdd()
 	}
 
+	function deleteArea(){
+		socketTrainer.areaDelete(currentArea.value)
+	}
+
 	const showPopup = ref(false)
 </script>
 
 <template>
-	<AreaPopup v-if="showPopup" :area-name="currentArea" @close-popup="showPopup=false" />
+	<DeleteItemPopup v-if="showPopup" :name="currentArea" @close-popup="showPopup=false" @delete="deleteArea" />
 	<TopBarTrainer />
-	<div id="list">
+	<div class="list">
 		<div
 			v-for="area in areas"
 			:key="area.areaName"
-			class="listitem"
+			class="listItem"
 			:class="{ 'selected': currentArea === area.areaName }"
 		>
-			<button class="areaButton" @click="openArea(area.areaName)">
-				{{ area.areaName }}
+			<button class="listItemButton" @click="openArea(area.areaName)">
+				<div class="listItemName">
+					{{ area.areaName }}
+				</div>
 			</button>
 			<button class="settingsButton" @click="openPopup(area.areaName)">
 				<svg
@@ -59,7 +65,7 @@
 				</svg>
 			</button>
 		</div>
-		<button id="addAreaButton" @click="addArea()">
+		<button class="listItemAddButton" @click="addArea()">
 			Bereich hinzufügen
 		</button>
 	</div>
@@ -70,33 +76,8 @@
 </template>
 
 <style scoped>
-	#list {
+	.list {
 		margin-top: 90px;
-		margin-left: 30px;
-		margin-right: 30px;
-	}
-
-	.listitem {
-		position: relative;
-		background-color: #FFFFFF;
-		border: 1px solid rgb(209, 213, 219);
-		display: flex;
-		align-items: center;
-		text-align: left;
-		margin-top: -1px;
-	}
-
-	.areaButton {
-		position: relative;
-		background-color: #FFFFFF;
-		border: none;
-		display: flex;
-		align-items: center;
-		font-size: 1.25rem;
-		padding: .75rem 1rem;
-		text-align: left;
-		height: 50px;
-		width: 100%;
 	}
 
 	.settingsButton {
@@ -106,20 +87,7 @@
 		background-color: rgb(243, 244, 246);
 	}
 
-	#addAreaButton {
-		text-align: center;
-		position: relative;
-		background-color: #FFFFFF;
-		border: 1px solid rgb(209, 213, 219);
-		box-sizing: border-box;
-		width: 100%;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-		padding: .75rem 1rem;
-		margin-top: -1px;
-	}
-
-	.selected .areaButton {
+	.selected .listItemButton {
 		filter: brightness(90%);
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
index cdcaac3c..2aa99527 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
-	import {computed} from 'vue'
+	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
+	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
+	import DeleteItemPopup from '@/components/widgets/DeleteItemPopup.vue'
+	import socketTrainer from '@/sockets/SocketTrainer'
+	import AddMaterialPopup from '@/components/widgets/AddMaterialPopup.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -12,12 +16,81 @@
 	const exerciseStore = useExerciseStore()
 
 	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+
+	const currentMaterialName = ref('No Material Name')
+	const currentMaterialType = ref('No Material Type')
+
+	const showDeletePopup = ref(false)
+	const showAddPopup = ref(false)
+
+	function openDeletePopup(materialName: string) {
+		currentMaterialName.value = materialName
+		showDeletePopup.value = true
+	}
+
+	function openAddPopup(materialType: string) {
+		currentMaterialType.value = materialType
+		showAddPopup.value = true
+	}
+
+	function deleteMaterial(){
+		socketTrainer.materialDelete(currentMaterialName.value)
+	}
+
+	const devices = computed(() => {
+		return currentAreaData.value?.material.filter(material => material.materialType === 'device') || []
+	})
+
+	const bloodList = computed(() => {
+		return currentAreaData.value?.material.filter(material => material.materialType === 'blood') || []
+	})
 </script>
 
 <template>
-	<h1>Patienten</h1>
-	{{ currentAreaData?.devices }}
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
+	<DeleteItemPopup
+		v-if="showDeletePopup"
+		:name="currentMaterialName"
+		@delete="deleteMaterial"
+		@close-popup="showDeletePopup=false"
+	/>
+	<AddMaterialPopup
+		v-if="showAddPopup"
+		:material-type="currentMaterialType"
+		:current-area="props.currentArea"
+		@close-popup="showAddPopup=false"
+	/>
+	<div class="list">
+		<div
+			v-for="device in devices as Material[]"
+			:key="device.materialName"
+			class="listItem"
+		>
+			<button class="listItemButton" @click="openDeletePopup(device.materialName)">
+				<div class="listItemName">
+					{{ device.materialName }}
+				</div>
+			</button>
+			<ToggleSwitchForListItems default="active" />
+		</div>
+		<button v-if="currentAreaData" class="listItemAddButton" @click="openAddPopup('device')">
+			Gerät hinzufügen
+		</button>
+	</div>
+	<div class="list">
+		<div
+			v-for="blood in bloodList as Material[]"
+			:key="blood.materialName"
+			class="listItem"
+		>
+			<button class="listItemButton" @click="openDeletePopup(blood.materialName)">
+				<div class="listItemName">
+					{{ blood.materialName }}
+				</div>
+			</button>
+			<ToggleSwitchForListItems default="active" />
+		</div>
+		<button v-if="currentAreaData" class="listItemAddButton" @click="openAddPopup('blood')">
+			Blut hinzufügen
+		</button>
+	</div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
index 96bf9826..1ef6cb6a 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -47,74 +47,25 @@
 <template>
 	<EditPatientPopup v-if="showEditPatientPopup" :patient-id="currentPatientId" @close-popup="showEditPatientPopup=false" />
 	<AddPatientPopup v-if="showAddPatientPopup" :area-name="currentArea" :patient-name="newPatientName" @close-popup="showAddPatientPopup=false" />
-	<div id="list">
+	<div class="list">
 		<div
 			v-for="patient in currentAreaData?.patients"
 			:key="patient.patientName"
-			class="listitem"
+			class="listItem"
 		>
-			<button class="patientButton" @click="editPatient(patient.patientId)">
-				<div class="patientId">
+			<button class="listItemButton" @click="editPatient(patient.patientId)">
+				<div class="listItemId">
 					{{ patient.patientId.toString().padStart(3, '0') }}
 				</div>
 				<TriageForListItems :patient-code="patient.patientCode" />
-				<div class="patientName">
+				<div class="listItemName">
 					{{ patient.patientName }}
 				</div>
 			</button>
 			<ToggleSwitchForListItems default="active" />
 		</div>
-		<button v-if="currentAreaData" id="addPatientButton" @click="addPatient()">
+		<button v-if="currentAreaData" class="listItemAddButton" @click="addPatient()">
 			Patient hinzufügen
 		</button>
 	</div>
-</template>
-
-<style scoped>
-	#list {
-		margin-top: 30px;
-		margin-left: 30px;
-		margin-right: 30px;
-	}
-
-	.listitem {
-		position: relative;
-		background-color: #FFFFFF;
-		border: 1px solid rgb(209, 213, 219);
-		display: flex;
-		align-items: center;
-		text-align: left;
-		margin-top: -1px;
-	}
-
-	.patientButton {
-		position: relative;
-		background-color: #FFFFFF;
-		border: none;
-		display: flex;
-		align-items: center;
-		font-size: 1.25rem;
-		padding: .75rem 1rem;
-		padding-left: 0;
-		text-align: left;
-		height: 50px;
-		width: 100%;
-	}
-
-	#addPatientButton {
-		text-align: center;
-		position: relative;
-		background-color: #FFFFFF;
-		border: 1px solid rgb(209, 213, 219);
-		box-sizing: border-box;
-		width: 100%;
-		font-size: 1.25rem;
-		line-height: 1.25rem;
-		padding: .75rem 1rem;
-		margin-top: -1px;
-	}
-
-	.patientId, .patientName {
-		padding: .75rem 1rem;
-	}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
index 5703321b..26ef2a72 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-	import {computed} from 'vue'
+	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
+	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
+	import socketTrainer from '@/sockets/SocketTrainer'
+	import DeleteItemPopup from '@/components/widgets/DeleteItemPopup.vue'
 
-	const props = defineProps({
+    const props = defineProps({
 		currentArea: {
 			type: String,
 			default: "Kein Bereich ausgewählt"
@@ -12,12 +15,47 @@
 	const exerciseStore = useExerciseStore()
 
 	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+
+	const currentPersonnel = ref(Number.NEGATIVE_INFINITY)
+
+	const showPopup = ref(false)
+
+	function openPopup(personnelId: number) {
+		currentPersonnel.value = personnelId
+		showPopup.value = true
+	}
+
+	function addPersonnel() {
+		socketTrainer.personnelAdd(props.currentArea)
+	}
+
+	function deletePersonnel(){
+		socketTrainer.personnelDelete(currentPersonnel.value)
+	}
 </script>
 
 <template>
-	<h1>Patienten</h1>
-	{{ currentAreaData?.personnel }}
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
+	<DeleteItemPopup
+		v-if="showPopup"
+		:name="exerciseStore.getPersonnel(currentPersonnel)?.personnelName"
+		@close-popup="showPopup=false"
+		@delete="deletePersonnel"
+	/>
+	<div class="list">
+		<div
+			v-for="personnel in currentAreaData?.personnel"
+			:key="personnel.personnelName"
+			class="listItem"
+		>
+			<button class="listItemButton" @click="openPopup(personnel.personnelId)">
+				<div class="listItemName">
+					{{ personnel.personnelName }}
+				</div>
+			</button>
+			<ToggleSwitchForListItems default="active" />
+		</div>
+		<button v-if="currentAreaData" class="listItemAddButton" @click="addPersonnel()">
+			Personal hinzufügen
+		</button>
+	</div>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/AddMaterialPopup.vue b/frontend/src/components/widgets/AddMaterialPopup.vue
new file mode 100644
index 00000000..30c512ce
--- /dev/null
+++ b/frontend/src/components/widgets/AddMaterialPopup.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+	import socketTrainer from "@/sockets/SocketTrainer"
+	import { useAvailablesStore } from "@/stores/Availables"
+	import { computed ,ref } from "vue"
+
+	const emit = defineEmits(['close-popup'])
+
+	const props = defineProps({
+		materialType: {
+			type: String,
+			default: 'Kein Materialtyp ausgewählt'
+		},
+		currentArea: {
+			type: String,
+			default: 'Kein Bereich ausgewählt'
+		}
+	})
+
+	const title = computed(() => {
+		switch (props.materialType) {
+			case 'device':
+				return 'Gerät hinzufügen'
+			case 'blood':
+				return 'Blut hinzufügen'
+			default:
+				return 'Kein Materialtyp ausgewählt'
+		}
+	})
+
+	const availablesStore = useAvailablesStore()
+	const availableMaterialList = ref(availablesStore.material)
+
+	const availableMaterial = computed(() => {
+		return availableMaterialList.value.filter(availableMaterial => availableMaterial.materialType === props.materialType)
+	})
+
+	function addMaterial(materialName: string){
+		socketTrainer.materialAdd(props.currentArea, materialName)
+		emit('close-popup')
+	}
+</script>
+
+<template>
+	<div class="popup-overlay" @click="emit('close-popup')">
+		<div class="popup" @click.stop="">
+			<h2>{{ title }}</h2>
+			<div class="list">
+				<div
+					v-for="material in availableMaterial"
+					:key="material.materialName"
+					class="listItem"
+				>
+					<button class="listItemButton" @click="addMaterial(material.materialName)">
+						<div class="listItemName">
+							{{ material.materialName }}
+						</div>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style scoped>
+	.popup {
+		background-color: white;
+		padding: 20px;
+		border-radius: 8px;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/AddPatientPopup.vue b/frontend/src/components/widgets/AddPatientPopup.vue
index dcc7d45e..2b265e82 100644
--- a/frontend/src/components/widgets/AddPatientPopup.vue
+++ b/frontend/src/components/widgets/AddPatientPopup.vue
@@ -82,20 +82,6 @@
 </template>
 
 <style scoped>
-	.popup-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		z-index: 1;
-	}
-
 	.popup {
 		background-color: white;
 		padding: 20px;
@@ -119,6 +105,7 @@
 		display: flex;
 	}
 
+
 	#saveButton {
 		position: relative;
 		color: white;
diff --git a/frontend/src/components/widgets/AreaPopup.vue b/frontend/src/components/widgets/AreaPopup.vue
deleted file mode 100644
index 2c148a54..00000000
--- a/frontend/src/components/widgets/AreaPopup.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-	import socketTrainer from "@/sockets/SocketTrainer"
-
-	const emit = defineEmits(['close-popup'])
-
-	const props = defineProps({
-		areaName: {
-			type: String,
-			default: "Kein Bereich ausgewählt"
-		}
-	})
-
-	function deleteArea(){
-		socketTrainer.areaDelete(props.areaName as string)
-	}
-</script>
-
-<template>
-	<div class="popup-overlay" @click="emit('close-popup')">
-		<div class="popup">
-			<h2>{{ props.areaName }}</h2>
-			<button id="deleteButton" @click="deleteArea()">
-				Bereich löschen
-			</button>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-	.popup-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		z-index: 1;
-	}
-
-	.popup {
-		background-color: white;
-		padding: 20px;
-		border-radius: 8px;
-	}
-
-	#deleteButton {
-		position: relative;
-		background-color: #ee4035;
-		color: white;
-		border: 1px solid rgb(209, 213, 219);
-		border-radius: .5rem;
-		width: 100%;
-		font-size: 1.25rem;
-		padding: .75rem 1rem;
-		text-align: center;
-		margin-top: 10px;
-	}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/DeleteItemPopup.vue b/frontend/src/components/widgets/DeleteItemPopup.vue
new file mode 100644
index 00000000..af4e3c71
--- /dev/null
+++ b/frontend/src/components/widgets/DeleteItemPopup.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+	const emit = defineEmits(['close-popup','delete'])
+
+	const props = defineProps({
+		name: {
+			type: String,
+			default: "Kein Name angegeben"
+		},
+        deleteText: {
+            type: String,
+            default: "Löschen"
+        }
+	})
+</script>
+
+<template>
+	<div class="popup-overlay" @click="emit('close-popup')">
+		<div class="popup">
+			<h2>{{ props.name }}</h2>
+			<button id="deleteButton" @click="emit('delete')">
+				{{ props.deleteText }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+	.popup {
+		background-color: white;
+		padding: 20px;
+		border-radius: 8px;
+	}
+
+	#deleteButton {
+		position: relative;
+		background-color: #ee4035;
+		color: white;
+		border: 1px solid rgb(209, 213, 219);
+		border-radius: .5rem;
+		width: 180px;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: center;
+		margin-top: 10px;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/EditPatientPopup.vue b/frontend/src/components/widgets/EditPatientPopup.vue
index 15a4db03..ff966d00 100644
--- a/frontend/src/components/widgets/EditPatientPopup.vue
+++ b/frontend/src/components/widgets/EditPatientPopup.vue
@@ -83,20 +83,6 @@
 </template>
 
 <style scoped>
-	.popup-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		z-index: 1;
-	}
-
 	.popup {
 		background-color: white;
 		padding: 20px;
diff --git a/frontend/src/components/widgets/ToggleSwitchForListItems.vue b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
index bd3f2b14..ffe63214 100644
--- a/frontend/src/components/widgets/ToggleSwitchForListItems.vue
+++ b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
@@ -61,6 +61,6 @@ input:checked + .slider {
 }
 
 input:checked + .slider:before {
-	transform: translateX(22px);
+	transform: translateX(23px);
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/TriagePopup.vue b/frontend/src/components/widgets/TriagePopup.vue
index 6a5b44a0..692ec024 100644
--- a/frontend/src/components/widgets/TriagePopup.vue
+++ b/frontend/src/components/widgets/TriagePopup.vue
@@ -45,20 +45,6 @@
 </template>
 
 <style scoped>
-	.popup-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		z-index: 1;
-	}
-
 	.popup {
 		background-color: white;
 		padding: 20px;
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index d94c7666..04844f48 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -14,14 +14,13 @@ interface MessageData {
 	patientId?: number
 	personnelName?: string
 	personnelId?: number
-	deviceName?: string
-	deviceId?: number
+	materialName?: string
 	exercise?: Exercise
 	state?: State
 	logEntry?: LogEntry
 	availablePatients: AvailablePatients
 	availableActions: AvailableActions
-	availableMaterial: AvailableMaterial
+	availableMaterialList: AvailableMaterial
 }
 
 interface Exercise {
@@ -33,7 +32,7 @@ interface Area {
 	areaName: string
 	patients: Patient[]
 	personnel: Personnel[]
-	devices: Device[]
+	material: Material[]
 }
 
 interface Patient {
@@ -48,9 +47,9 @@ interface Personnel {
 	personnelName: string
 }
 
-interface Device {
-	deviceId: number
-	deviceName: string
+interface Material {
+	materialName: string
+	materialType: string
 }
 
 interface State {
@@ -70,32 +69,42 @@ interface LogEntry {
 	areaName: string
 	patientId: number
 	personnelId: number
-	deviceId: number
-}
-
-interface AvailablePatient {
-	patientCode: number
-	triage: string
-	patientInjury: string
-	patientHistory: string
-	patientPersonalDetails: string
-	patientBiometrics: string
 }
 
 interface Availables {
-	actions: [],
+	actions: AvailableAction[],
 	patients: AvailablePatient[],
-	material: [],
+	material: AvailableMaterial[],
 }
 
 interface AvailableActions {
-	actions: [],
+	availableActions: AvailableAction[],
+}
+
+interface AvailableAction {
+	actionName: string
+	actionDescription: string
+	actionType: string
 }
 
 interface AvailablePatients {
 	availablePatients: AvailablePatient[],
 }
 
+interface AvailablePatient {
+	patientCode: number
+	triage: string
+	patientInjury: string
+	patientHistory: string
+	patientPersonalDetails: string
+	patientBiometrics: string
+}
+
+interface AvailableMaterialList {
+	availableMaterialList: AvailableMaterial[],
+}
+
 interface AvailableMaterial {
-	material: [],
+	materialName: string
+	materialType: string
 }
\ No newline at end of file
diff --git a/frontend/src/sockets/SocketPatient.ts b/frontend/src/sockets/SocketPatient.ts
index 7fcfa314..4e680347 100644
--- a/frontend/src/sockets/SocketPatient.ts
+++ b/frontend/src/sockets/SocketPatient.ts
@@ -123,14 +123,14 @@ export const serverMockEvents = [
 			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1,"triage":"Y"},'+
 			'{"patientId":3,"patientName":"Frank Huber",' +
 			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"devices":' +
-			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
+			'[{"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
 			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3,"triage":"R"},' + 
 			'{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4,"triage":"Y"}],'+
-			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
+			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceName":"Dumbbells"}]},' +
 			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5,"triage":"G"},' +
 			'{"patientId":4,"patientName":"Jasper Park","patientCode":6,"triage":"Y"}],' +
 			'"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
-			'"devices":[{"deviceId":3,"deviceName":"Beatmungsgerät"}]}]}}'
+			'"devices":[{"deviceName":"Beatmungsgerät"}]}]}}'
 	},
 	{id: 'exercise-start', data: '{"messageType":"exercise-start"}'},
 	{id: 'exercise-stop', data: '{"messageType":"exercise-stop"}'},
diff --git a/frontend/src/sockets/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index a0bd4593..beb2a072 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -51,7 +51,7 @@ class SocketTrainer {
 					useAvailablesStore().loadAvailableActions(data.availableActions as AvailableActions)
 					break
 				case 'available-material':
-					useAvailablesStore().loadAvailableMaterial(data.availableMaterial as AvailableMaterial)
+					useAvailablesStore().loadAvailableMaterial(data.availableMaterialList as unknown as AvailableMaterialList)
 					break
 				case 'available-patients':
 					useAvailablesStore().loadAvailablePatients(data.availablePatients as AvailablePatients)
@@ -142,6 +142,35 @@ class SocketTrainer {
 			'patientId': patientId
 		}))
 	}
+
+	personnelAdd(areaName: string) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'personnel-add',
+			'areaName': areaName
+		}))
+	}
+
+	personnelDelete(personnelId: number) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'personnel-delete',
+			'personnelId': personnelId
+		}))
+	}
+
+	materialAdd(areaName: string, materialName: string) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'material-add',
+			'areaName': areaName,
+			'materialName': materialName
+		}))
+	}
+
+	materialDelete(materialName: string) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'material-delete',
+			'materialName': materialName
+		}))
+	}
 }
 
 const socketTrainer = new SocketTrainer('ws://localhost:8000/ws/trainer/?token=')
@@ -154,35 +183,53 @@ export const serverMockEvents = [
 		id: "available-patients",
 		data: '{"messageType":"available-patients","availablePatients":{"availablePatients":['+
 			'{"patientCode":1,'+
-			'"triage":"Y","patientInjury":"broken arm","patientHistory":"Asthma",'+
-			'"patientPersonalDetails":"Female, 30 years old","patientBiometrics":"Height:196cm, Weight: 76kg"},'+
+			'"triage":"Y","patientInjury":"Gebrochener Arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 30 Jahre alt","patientBiometrics":"Größe: 196cm, Gewicht: 76kg"},'+
 			'{"patientCode":2,'+
-			'"triage":"G","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
-			'"patientPersonalDetails":"Male, 47 years old","patientBiometrics":"Height:164cm, Weight: 65kg"},'+
+			'"triage":"G","patientInjury":"Verdrehter Knöchel","patientHistory":"Keine Allergien",'+
+			'"patientPersonalDetails":"männlich, 47 Jahre alt","patientBiometrics":"Größe: 164cm, Gewicht: 65kg"},'+
 			'{"patientCode":3,'+
-			'"triage":"R","patientInjury":"head injury","patientHistory":"Diabetes",'+
-			'"patientPersonalDetails":"Female, 20 years old","patientBiometrics":"Height:192cm, Weight: 77kg"},'+
+			'"triage":"R","patientInjury":"Kopfverletzung","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"weiblich, 20 Jahre alt","patientBiometrics":"Größe: 192cm, Gewicht: 77kg"},'+
 			'{"patientCode":4,'+
-			'"triage":"Y","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
-			'"patientPersonalDetails":"Male, 13 years old","patientBiometrics":"Height:165cm, Weight: 54kg"},'+
+			'"triage":"Y","patientInjury":"Gebprelltes Bein","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"männlich, 13 Jahre alt","patientBiometrics":"Größe: 165cm, Gewicht: 54kg"},'+
 			'{"patientCode":5,'+
-			'"triage":"G","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
-			'"patientPersonalDetails":"Female, 53 years old","patientBiometrics":"Height:180cm, Weight: 71kg"},'+
+			'"triage":"G","patientInjury":"Butender Arm","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 53 Jahre alt","patientBiometrics":"Größe: 180cm, Gewicht: 71kg"},'+
 			'{"patientCode":6,'+
-			'"triage":"Y","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
-			'"patientPersonalDetails":"Male, 49 years old","patientBiometrics":"Height:170cm, Weight: 67kg"},'+
+			'"triage":"Y","patientInjury":"Verschobene Schulter","patientHistory":"Gehbehindert",'+
+			'"patientPersonalDetails":"männlich, 49 Jahre alt","patientBiometrics":"Größe: 170cm, Gewicht: 67kg"},'+
 			'{"patientCode":7,'+
-			'"triage":"R","patientInjury":"head trauma","patientHistory":"Asthma",'+
-			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:162cm, Weight: 67kg"},'+
+			'"triage":"R","patientInjury":"Kopfverletzung","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"weiblich, 23 Jahre alt","patientBiometrics":"Größe: 162cm, Gewicht: 67kg"},'+
 			'{"patientCode":8,'+
-			'"triage":"Y","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
-			'"patientPersonalDetails":"Male, 43 years old","patientBiometrics":"Height:161cm, Weight: 56kg"},'+
+			'"triage":"Y","patientInjury":"Verlorener Finger","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"männlich, 43 Jahre alt","patientBiometrics":"Größe: 161cm, Gewicht: 56kg"},'+
 			'{"patientCode":9,'+
-			'"triage":"G","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
-			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:182cm, Weight: 75kg"},'+
+			'"triage":"G","patientInjury":"Aufgschürfter Ellenbogen","patientHistory":"Bluthochdruck",'+
+			'"patientPersonalDetails":"weiblich, 23 Jahre alt","patientBiometrics":"Größe: 182cm, Gewicht: 75kg"},'+
 			'{"patientCode":10,'+
-			'"triage":"Y","patientInjury":"shoulder broken","patientHistory":"illness",'+
-			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
+			'"triage":"Y","patientInjury":"Gebrochene Nase","patientHistory":"Grippe",'+
+			'"patientPersonalDetails":"männlich, 39 Jahre alt","patientBiometrics":"Größe: 173cm, Gewicht: 61kg"}'+
+			']}}'
+	},
+	{
+		id: "available-material",
+		data: '{"messageType":"available-material","availableMaterialList":{"availableMaterialList":['+
+			'{"materialName":"Beatmungsgerät","materialType":"device"},'+
+			'{"materialName":"Blutdruckmessgerät","materialType":"device"},'+
+			'{"materialName":"Defibrillator","materialType":"device"},'+
+			'{"materialName":"Endoskop","materialType":"device"},'+
+			'{"materialName":"Herz-Lungen-Maschine","materialType":"device"},'+
+			'{"materialName":"Blut 0 negativ","materialType":"blood"},'+
+			'{"materialName":"Blut 0 positiv","materialType":"blood"},'+
+			'{"materialName":"Blut A negativ","materialType":"blood"},'+
+			'{"materialName":"Blut A positiv","materialType":"blood"},'+
+			'{"materialName":"Blut B negativ","materialType":"blood"},'+
+			'{"materialName":"Blut B positiv","materialType":"blood"},'+
+			'{"materialName":"Blut AB negativ","materialType":"blood"},'+
+			'{"materialName":"Blut AB positiv","materialType":"blood"}'+
 			']}}'
 	},
 	{
@@ -190,15 +237,17 @@ export const serverMockEvents = [
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
 			'{"areaName":"Intensiv","patients":[{"patientId":5,"patientName":"Anna Müller","patientCode":1,"triage":"Y"},'+
 			'{"patientId":3,"patientName":"Frank Huber",' +
-			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"devices":' +
-			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"ZNA","patients":' +
+			'"patientCode":2,"triage":"G"}],"personnel":[{"personnelId":1,"personnelName":"Sebastian Lieb"}],"material":' +
+			'[{"materialName":"Beatmungsgerät","materialType":"device"},{"materialName":"Blut 0 positiv","materialType":"blood"}]},'+
+			'{"areaName":"ZNA","patients":' +
 			'[{"patientId":2,"patientName":"Luna Patel","patientCode":3,"triage":"R"},' + 
 			'{"patientId":6,"patientName":"Friedrich Gerhard","patientCode":4,"triage":"Y"}],'+
-			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
+			'"personnel":[{"personnelId":2,"personnelName":"Hannah Mayer"}],'+
+			'"material":[{"materialName":"Defibillator","materialType":"device"},{"materialName":"Blut A positiv","materialType":"blood"}]},' +
 			'{"areaName":"Wagenhalle","patients":[{"patientId":1,"patientName":"Isabelle Busch","patientCode":5,"triage":"G"},' +
 			'{"patientId":4,"patientName":"Jasper Park","patientCode":6,"triage":"Y"}],' +
-			'"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
-			'"devices":[{"deviceId":3,"deviceName":"Beatmungsgerät"}]}]}}'
+			'"personnel":[{"personnelId":3,"personnelName":"Antonio Wilhelm David Fleiker"}],' +
+			'"material":[{"materialName":"Beatmungsgerät","materialType":"device"},{"materialName":"Blut 0 negativ","materialType":"blood"}]}]}}'
 	},
 	{id: 'exercise-start', data: '{"messageType":"exercise-start"}'},
 	{id: 'exercise-stop', data: '{"messageType":"exercise-stop"}'},
@@ -206,10 +255,10 @@ export const serverMockEvents = [
 		id: 'log-update',
 		data: '{"messageType":"log-update","logEntry":[' +
 			'{"logMessage":"Patient admitted","logTime":' + Date.UTC(2024, 2, 20, 14, 32, 20, 0) +
-			',"areaName":"EmergencyRoom","patientId":123,"personnelId":456,"deviceId":789},' +
+			',"areaName":"EmergencyRoom","patientId":123,"personnelId":456},' +
 			'{"logMessage":"Treatment started","logTime":' + Date.UTC(2024, 2, 20, 14, 32, 46, 0) +
-			',"areaName":"Operating Theater","patientId":123,"personnelId":456,"deviceId":789},' +
+			',"areaName":"Operating Theater","patientId":123,"personnelId":456},' +
 			'{"logMessage":"Patient stabilized","logTime":' + Date.UTC(2024, 2, 20, 14, 33, 8, 0) +
-			',"areaName":"ICU","patientId":123,"personnelId":456,"deviceId":789}]}'
+			',"areaName":"ICU","patientId":123,"personnelId":456}]}'
 	}
 ]
diff --git a/frontend/src/stores/Availables.ts b/frontend/src/stores/Availables.ts
index 377fe3de..c5fd4eba 100644
--- a/frontend/src/stores/Availables.ts
+++ b/frontend/src/stores/Availables.ts
@@ -19,13 +19,13 @@ export const useAvailablesStore = defineStore('availables', {
 	},
 	actions: {
 		loadAvailableActions(json: AvailableActions) {
-			this.actions = json.actions
+			this.actions = json.availableActions
 		},
 		loadAvailablePatients(json: AvailablePatients) {
 			this.patients = json.availablePatients
 		},
-		loadAvailableMaterial(json: AvailableMaterial) {
-			this.material = json.material
+		loadAvailableMaterial(json: AvailableMaterialList) {
+			this.material = json.availableMaterialList
 		}
 	}
 })
\ No newline at end of file
diff --git a/frontend/src/stores/Exercise.ts b/frontend/src/stores/Exercise.ts
index 23ed34b1..dbfe26cf 100644
--- a/frontend/src/stores/Exercise.ts
+++ b/frontend/src/stores/Exercise.ts
@@ -37,6 +37,17 @@ export const useExerciseStore = defineStore('exercise', {
 				})
 				return foundPatient
 			}
+		},
+		getPersonnel: (state) => {
+			return (personnelId: number): Personnel | null => {
+				let foundPersonnel: Personnel | null = null
+				state.areas.forEach((area) => {
+					area.personnel.forEach((personnel) => {
+						if (personnel.personnelId == personnelId) foundPersonnel = personnel
+					})
+				})
+				return foundPersonnel
+			}
 		}
 	},
 	actions: {