diff --git a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
index 79e6a174..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,11 +32,15 @@
 		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 class="list">
 		<div
@@ -83,7 +87,7 @@
 		background-color: rgb(243, 244, 246);
 	}
 
-	.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..037b352f 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"
+			: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"
+			: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/PagePersonnel.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
index 5726920f..26ef2a72 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
@@ -2,8 +2,8 @@
 	import {computed, ref} from 'vue'
 	import {useExerciseStore} from '@/stores/Exercise'
 	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
-	import PersonnelPopup from '@/components/widgets/PersonnelPopup.vue'
 	import socketTrainer from '@/sockets/SocketTrainer'
+	import DeleteItemPopup from '@/components/widgets/DeleteItemPopup.vue'
 
     const props = defineProps({
 		currentArea: {
@@ -28,10 +28,19 @@
 	function addPersonnel() {
 		socketTrainer.personnelAdd(props.currentArea)
 	}
+
+	function deletePersonnel(){
+		socketTrainer.personnelDelete(currentPersonnel.value)
+	}
 </script>
 
 <template>
-	<PersonnelPopup v-if="showPopup" :personnel-id="currentPersonnel" @close-popup="showPopup=false" />
+	<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"
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/AreaPopup.vue b/frontend/src/components/widgets/DeleteItemPopup.vue
similarity index 61%
rename from frontend/src/components/widgets/AreaPopup.vue
rename to frontend/src/components/widgets/DeleteItemPopup.vue
index 1229f610..af4e3c71 100644
--- a/frontend/src/components/widgets/AreaPopup.vue
+++ b/frontend/src/components/widgets/DeleteItemPopup.vue
@@ -1,26 +1,24 @@
 <script setup lang="ts">
-	import socketTrainer from "@/sockets/SocketTrainer"
-
-	const emit = defineEmits(['close-popup'])
+	const emit = defineEmits(['close-popup','delete'])
 
 	const props = defineProps({
-		areaName: {
+		name: {
 			type: String,
-			default: "Kein Bereich ausgewählt"
-		}
+			default: "Kein Name angegeben"
+		},
+        deleteText: {
+            type: String,
+            default: "Löschen"
+        }
 	})
-
-	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
+			<h2>{{ props.name }}</h2>
+			<button id="deleteButton" @click="emit('delete')">
+				{{ props.deleteText }}
 			</button>
 		</div>
 	</div>
@@ -39,7 +37,7 @@
 		color: white;
 		border: 1px solid rgb(209, 213, 219);
 		border-radius: .5rem;
-		width: 100%;
+		width: 180px;
 		font-size: 1.25rem;
 		padding: .75rem 1rem;
 		text-align: center;
diff --git a/frontend/src/components/widgets/PersonnelPopup.vue b/frontend/src/components/widgets/PersonnelPopup.vue
deleted file mode 100644
index 7d76b13c..00000000
--- a/frontend/src/components/widgets/PersonnelPopup.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-	import socketTrainer from "@/sockets/SocketTrainer"
-	import { useExerciseStore } from "@/stores/Exercise"
-
-	const emit = defineEmits(['close-popup'])
-
-	const props = defineProps({
-		personnelId: {
-			type: Number,
-			default: Number.NEGATIVE_INFINITY
-		}
-	})
-
-	const exerciseStore = useExerciseStore()
-
-	function deletePersonnel(){
-		socketTrainer.personnelDelete(props.personnelId)
-	}
-</script>
-
-<template>
-	<div class="popup-overlay" @click="emit('close-popup')">
-		<div class="popup">
-			<h2>{{ exerciseStore.getPersonnel(props.personnelId)?.personnelName }}</h2>
-			<button id="deleteButton" @click="deletePersonnel()">
-				Personal löschen
-			</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: 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/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index d94c7666..eed98063 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -14,14 +14,14 @@ interface MessageData {
 	patientId?: number
 	personnelName?: string
 	personnelId?: number
-	deviceName?: string
-	deviceId?: number
+	materialName?: string
+	materialId?: number
 	exercise?: Exercise
 	state?: State
 	logEntry?: LogEntry
 	availablePatients: AvailablePatients
 	availableActions: AvailableActions
-	availableMaterial: AvailableMaterial
+	availableMaterialList: AvailableMaterial
 }
 
 interface Exercise {
@@ -33,7 +33,7 @@ interface Area {
 	areaName: string
 	patients: Patient[]
 	personnel: Personnel[]
-	devices: Device[]
+	material: Material[]
 }
 
 interface Patient {
@@ -48,9 +48,9 @@ interface Personnel {
 	personnelName: string
 }
 
-interface Device {
-	deviceId: number
-	deviceName: string
+interface Material {
+	materialName: string
+	materialType: string
 }
 
 interface State {
@@ -70,32 +70,43 @@ interface LogEntry {
 	areaName: string
 	patientId: number
 	personnelId: number
-	deviceId: number
-}
-
-interface AvailablePatient {
-	patientCode: number
-	triage: string
-	patientInjury: string
-	patientHistory: string
-	patientPersonalDetails: string
-	patientBiometrics: string
+	materialId: number
 }
 
 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/SocketTrainer.ts b/frontend/src/sockets/SocketTrainer.ts
index 1c5ec95d..d526823b 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)
@@ -156,6 +156,21 @@ class SocketTrainer {
 			'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=')
@@ -199,20 +214,40 @@ export const serverMockEvents = [
 			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 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"}'+
+			']}}'
+	},
 	{
 		id: 'exercise',
 		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":"Treadmill","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":"Dumbbells","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":"Antonio Fleiker"}],' +
-			'"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"}'},
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