diff --git a/backend/dps_training_k/configuration/config.py b/backend/dps_training_k/configuration/config.py
index 67a1bf33..d49928da 100644
--- a/backend/dps_training_k/configuration/config.py
+++ b/backend/dps_training_k/configuration/config.py
@@ -4,3 +4,4 @@
 CODE_LENGTH = 6
 INVITATION_LOGIC = LevenshteinCode(CODE_LENGTH)
 CURRENT_TIME = lambda: timezone.now()
+DEFAULT_STATE_ID = 101
diff --git a/backend/dps_training_k/configuration/settings.py b/backend/dps_training_k/configuration/settings.py
index d731ab07..c3bf5de5 100644
--- a/backend/dps_training_k/configuration/settings.py
+++ b/backend/dps_training_k/configuration/settings.py
@@ -50,7 +50,7 @@
     "corsheaders",
     "game.apps.GameConfig",
     "helpers.apps.GameConfig",
-    "templates.apps.GameConfig",
+    "template.apps.TemplateConfig",
     "rest_framework",
     "rest_framework.authtoken",
     "django_celery_beat",
diff --git a/backend/dps_training_k/game/consumers/abstract_consumer.py b/backend/dps_training_k/game/consumers/abstract_consumer.py
index dda2147a..279aaa08 100644
--- a/backend/dps_training_k/game/consumers/abstract_consumer.py
+++ b/backend/dps_training_k/game/consumers/abstract_consumer.py
@@ -155,17 +155,17 @@ def authenticate(self, token):
     def _send_exercise(self):
         exercise = Exercise.createExercise()
         patient = Patient.objects.create(
-            name="Max Mustermann", exercise=exercise, patientCode=123456
+            name="Max Mustermann", exercise=exercise, patientId=123456
         )
         exercise_object = {
             "exercise": {
-                "exerciseId": exercise.invitation_code,
+                "exerciseId": exercise.exerciseId,
                 "areas": [
                     {
                         "areaName": "X",
                         "patients": [
                             {
-                                "patientId": patient.patientCode,
+                                "patientId": patient.patientId,
                                 "patientName": patient.name,
                                 "patientCode": 0
                             }
@@ -176,10 +176,10 @@ def _send_exercise(self):
                                 "personnelName": "X"
                             }
                         ],
-                        "devices": [
+                        "material": [
                             {
-                                "deviceId": 0,
-                                "deviceName": "X"
+                                "materialId": 0,
+                                "materialName": "X"
                             }
                         ]
                     }
diff --git a/backend/dps_training_k/game/consumers/patient_consumer.py b/backend/dps_training_k/game/consumers/patient_consumer.py
index caabfc4a..67a26b29 100644
--- a/backend/dps_training_k/game/consumers/patient_consumer.py
+++ b/backend/dps_training_k/game/consumers/patient_consumer.py
@@ -1,15 +1,16 @@
 from .abstract_consumer import AbstractConsumer
 from urllib.parse import parse_qs
-from game.models import Exercise, Patient
 
 
 class PatientConsumer(AbstractConsumer):
     class PatientIncomingMessageTypes:
         EXAMPLE = "example"
+        TEST_PASSTHROUGH = "test-passthrough"
 
     class PatientOutgoingMessageTypes:
         RESPONSE = "response"
         EXERCISE = "exercise"
+        TEST_PASSTHROUGH = "test-passthrough"
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -19,7 +20,10 @@ def __init__(self, *args, **kwargs):
                 self.handle_example,
                 "exercise_code",
                 "patient_code",
-            )
+            ),
+            self.PatientIncomingMessageTypes.TEST_PASSTHROUGH: (
+                self.handle_test_passthrough,
+            ),
         }
 
     def connect(self):
@@ -36,3 +40,9 @@ def handle_example(self, exercise_code, patient_code):
             self.PatientOutgoingMessageTypes.RESPONSE,
             content=f"exercise_code {self.exercise_code} & patient_code {self.patient_code}",
         )
+
+    def handle_test_passthrough(self):
+        self.send_event(
+            self.PatientOutgoingMessageTypes.TEST_PASSTHROUGH,
+            message="received test event",
+        )
diff --git a/backend/dps_training_k/game/consumers/trainer_consumer.py b/backend/dps_training_k/game/consumers/trainer_consumer.py
index 6a594b7d..8c165f10 100644
--- a/backend/dps_training_k/game/consumers/trainer_consumer.py
+++ b/backend/dps_training_k/game/consumers/trainer_consumer.py
@@ -1,6 +1,4 @@
 from .abstract_consumer import AbstractConsumer
-from game.models import Exercise, Patient
-from django.conf import settings
 
 
 class TrainerConsumer(AbstractConsumer):
diff --git a/backend/dps_training_k/game/migrations/0005_rename_invitation_code_exercise_exerciseid_and_more.py b/backend/dps_training_k/game/migrations/0005_rename_invitation_code_exercise_exerciseid_and_more.py
new file mode 100644
index 00000000..89e6b354
--- /dev/null
+++ b/backend/dps_training_k/game/migrations/0005_rename_invitation_code_exercise_exerciseid_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 5.0.1 on 2024-03-22 10:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game', '0004_remove_scheduledevent_owner_owner_event'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='exercise',
+            old_name='invitation_code',
+            new_name='exerciseId',
+        ),
+        migrations.RemoveField(
+            model_name='patient',
+            name='patientCode',
+        ),
+        migrations.AddField(
+            model_name='patient',
+            name='patientId',
+            field=models.IntegerField(default=1, help_text='patientId used to log into patient - therefore part of authentication'),
+            preserve_default=False,
+        ),
+    ]
diff --git a/backend/dps_training_k/game/migrations/0007_merge_20240325_1625.py b/backend/dps_training_k/game/migrations/0007_merge_20240325_1625.py
new file mode 100644
index 00000000..386388be
--- /dev/null
+++ b/backend/dps_training_k/game/migrations/0007_merge_20240325_1625.py
@@ -0,0 +1,14 @@
+# Generated by Django 5.0.1 on 2024-03-25 16:25
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game', '0005_rename_invitation_code_exercise_exerciseid_and_more'),
+        ('game', '0006_patient_stateid_delete_patientstate'),
+    ]
+
+    operations = [
+    ]
diff --git a/backend/dps_training_k/game/models/exercise.py b/backend/dps_training_k/game/models/exercise.py
index b27c3b7a..a989b97a 100644
--- a/backend/dps_training_k/game/models/exercise.py
+++ b/backend/dps_training_k/game/models/exercise.py
@@ -20,7 +20,7 @@ class ExerciseStateTypes(models.TextChoices):
         to="Trainer",
         on_delete=models.CASCADE,
     ) """
-    invitation_code = models.CharField(
+    exerciseId = models.CharField(
         unique=True,
         editable=settings.DEBUG,
         max_length=settings.INVITATION_LOGIC.code_length,
@@ -35,7 +35,7 @@ def createExercise(cls):
         new_Exercise = cls.objects.create(
             # config=settings.DEFAULT_EXCERCISE_CONFIG,
             # trainer=trainer
-            invitation_code=settings.INVITATION_LOGIC.get_invitation_code(),
+            exerciseId=settings.INVITATION_LOGIC.get_exerciseId(),
             state=cls.ExerciseStateTypes.CONFIGURATION,
         )
         return new_Exercise
diff --git a/backend/dps_training_k/game/models/patient.py b/backend/dps_training_k/game/models/patient.py
index d6ea7295..19b72385 100644
--- a/backend/dps_training_k/game/models/patient.py
+++ b/backend/dps_training_k/game/models/patient.py
@@ -10,7 +10,7 @@ class Patient(Eventable, models.Model):
     name = models.CharField(
         max_length=100, default="Max Mustermann"
     )  # technically patientData but kept here for simplicity for now
-    # patientID = models.ForeignKey()  # currently called "SensenID"
+    # patientCode = models.ForeignKey()  # currently called "SensenID"
     exercise = models.ForeignKey("Exercise", on_delete=models.CASCADE)
     stateID = models.OneToOneField(
         "template.PatientState",
@@ -19,12 +19,12 @@ class Patient(Eventable, models.Model):
         default=settings.DEFAULT_STATE_ID,
     )
     # measureID = models.ManyToManyField()
-    patientCode = models.IntegerField(
-        help_text="patientCode used to log into patient - therefore part of authentication"
+    patientId = models.IntegerField(
+        help_text="patientId used to log into patient - therefore part of authentication"
     )
 
     def __str__(self):
-        return f"Patient #{self.id} called {self.name} with code {self.patientCode}"
+        return f"Patient #{self.id} called {self.name} with ID {self.patientId}"
 
     # ToDo remove when actual method is implemented
     def schedule_temporary_event(self):
diff --git a/backend/dps_training_k/game/tests/test_authentication_views.py b/backend/dps_training_k/game/tests/test_authentication_views.py
index 148d6739..c5591586 100644
--- a/backend/dps_training_k/game/tests/test_authentication_views.py
+++ b/backend/dps_training_k/game/tests/test_authentication_views.py
@@ -17,7 +17,7 @@ def test_access_success(self):
         """
         Test the access with correct credentials.
         """
-        data = {"exerciseCode": "testuser", "patientCode": "testpassword"}
+        data = {"exerciseId": "testuser", "patientId": "testpassword"}
         response = self.client.post(self.access_url, data)
         self.assertEqual(response.status_code, status.HTTP_200_OK)
         # Check if the response contains a token
@@ -27,7 +27,7 @@ def test_access_fail_wrong_credentials(self):
         """
         Test the access with wrong credentials.
         """
-        data = {"exerciseCode": "wronguser", "patientCode": "wrongpassword"}
+        data = {"exerciseId": "wronguser", "patientId": "wrongpassword"}
         response = self.client.post(self.access_url, data)
         self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
         # Check that the response indicates a failure
@@ -39,8 +39,8 @@ def test_access_fail_missing_fields(self):
         Test the access with missing fields.
         """
         data = {
-            "exerciseCode": "testuser"
-            # Missing "patientCode"
+            "exerciseId": "testuser"
+            # Missing "patientId"
         }
         response = self.client.post(self.access_url, data)
         self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
diff --git a/backend/dps_training_k/game/views.py b/backend/dps_training_k/game/views.py
index 2af3de95..5c8335d7 100644
--- a/backend/dps_training_k/game/views.py
+++ b/backend/dps_training_k/game/views.py
@@ -7,13 +7,13 @@
 
 class PatientAccessView(APIView):
     def post(self, request, *args, **kwargs):
-        if not (request.data.get("exerciseCode") and request.data.get("patientCode")):
+        if not (request.data.get("exerciseId") and request.data.get("patientId")):
             return Response(
                 status=status.HTTP_400_BAD_REQUEST,
                 data="Some required fields are missing",
             )
-        exercise_code = request.data.get("exerciseCode")
-        patient_code = request.data.get("patientCode")
+        exercise_code = request.data.get("exerciseId")
+        patient_code = request.data.get("patientId")
         user = authenticate(username=exercise_code, password=patient_code)
         if user:
             token, created = Token.objects.get_or_create(user=user)
diff --git a/backend/dps_training_k/helpers/invitation_logic.py b/backend/dps_training_k/helpers/invitation_logic.py
index d2fe9dc9..8aa46da0 100644
--- a/backend/dps_training_k/helpers/invitation_logic.py
+++ b/backend/dps_training_k/helpers/invitation_logic.py
@@ -8,11 +8,11 @@ def __init__(self, code_length):
         self.code_length = code_length
         self.codes_taken = []
 
-    def get_invitation_code(self):
+    def get_exerciseId(self):
         """
-        Generates an unique alphabetic invitation_code of length self.code_length,
+        Generates an unique alphabetic exerciseId of length self.code_length,
         that is also distinctive from other non-finished excercises (levenshtein distance >= 3).
-        :return: a string, the invitation_code
+        :return: a string, the exerciseId
         """
         new_code = None
         letters = string.ascii_lowercase
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 80f2b099..3219db32 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,5 +1,12 @@
 @import './base.css';
 
+:root {
+  --red: #ee4035;
+  --yellow: #e6cf00;
+  --green: #269f42;
+  --gray: gray;
+}
+
 #app {
   height: 100vh;
   font-weight: normal;
@@ -20,4 +27,21 @@ button:hover {
 button:active {
   cursor: pointer;
   filter: brightness(90%);
-}
\ No newline at end of file
+}
+
+.gray {
+  background-color: var(--gray);
+}
+
+.red {
+  background-color: var(--red);
+}
+
+.yellow {
+  background-color: var(--yellow);
+}
+
+.green {
+  background-color: var(--green);
+}
+
diff --git a/frontend/src/components/screensPatient/ScreenInactive.vue b/frontend/src/components/screensPatient/ScreenInactive.vue
index 5fa2bf33..91d173ee 100644
--- a/frontend/src/components/screensPatient/ScreenInactive.vue
+++ b/frontend/src/components/screensPatient/ScreenInactive.vue
@@ -11,7 +11,7 @@
 				Patient inaktiv
 			</div>
 			<div class="inactive-patient-details">
-				<div>Patient: {{ patientStore.patientName }} | {{ patientStore.patientID }}</div>
+				<div>Patient: {{ patientStore.patientName }} | {{ patientStore.patientId }}</div>
 				<div>Bereich: {{ patientStore.areaName }}</div>
 			</div>
 		</div>
diff --git a/frontend/src/components/screensPatient/ScreenStatus.vue b/frontend/src/components/screensPatient/ScreenStatus.vue
index a027f733..31a0f76e 100644
--- a/frontend/src/components/screensPatient/ScreenStatus.vue
+++ b/frontend/src/components/screensPatient/ScreenStatus.vue
@@ -1,37 +1,25 @@
 <script setup lang="ts">
-	import {computed, ref} from 'vue'
+	import {ref} from 'vue'
 	import {usePatientStore} from '@/stores/Patient'
 	import TriagePopup from '@/components/widgets/TriagePopup.vue'
 	import PatientStatus from '@/components/widgets/PatientStatus.vue'
+	import { triageToColor } from '@/utils'
 
 	const patientStore = usePatientStore()
 
-	const triageColor = ref(computed(() => {
-		switch (patientStore.triage) {
-			case 'G':
-				return 'green'
-			case 'Y':
-				return 'yellow'
-			case 'A':
-			case 'B':
-			case 'C':
-			case 'D':
-			case 'E':
-				return 'red'
-			default:
-				return 'gray'
-		}
-	}))
-
 	const showPopup = ref(false)
 </script>
 
 <template>
 	<nav>
 		<button id="nav-trainer">
-			{{ patientStore.patientID }}
+			{{ patientStore.patientId }}
 		</button>
-		<button id="nav-triage" :class="triageColor" @click="showPopup = true">
+		<button
+			id="nav-triage"
+			:style="{backgroundColor: triageToColor(patientStore.triage)}"
+			@click="showPopup = true"
+		>
 			{{ patientStore.triage }}
 		</button>
 		<button id="nav-exercise-code">
@@ -70,30 +58,11 @@
 		width: 20%;
 		border-left: 4px solid black;
 		border-right: 4px solid black;
+		color: white;
 	}
 
 	#nav-exercise-code {
 		width: 40%;
 		border-left: 4px solid black;
 	}
-
-	/*noinspection CssUnusedSymbol*/
-	.gray {
-		background-color: lightgray;
-	}
-
-	/*noinspection CssUnusedSymbol*/
-	.green {
-		background-color: green;
-	}
-
-	/*noinspection CssUnusedSymbol*/
-	.yellow {
-		background-color: yellow;
-	}
-
-	/*noinspection CssUnusedSymbol*/
-	.red {
-		background-color: red;
-	}
-</style>
\ No newline at end of file
+</style>@/utils
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
index d94bd6ae..9fbe19f8 100644
--- a/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenExerciseCreation.vue
@@ -23,6 +23,11 @@
 		currentArea.value = areaName
 	}
 
+	function openPopup(areaName: string) {
+		openArea(areaName)
+		showPopup.value = true
+	}
+
 	function addArea(){
 		socketTrainer.areaAdd()
 	}
@@ -38,12 +43,12 @@
 			v-for="area in areas"
 			:key="area.areaName"
 			class="listitem"
-			@click="openArea(area.areaName)"
+			:class="{ 'selected': currentArea === area.areaName }"
 		>
-			<button class="areaButton">
+			<button class="areaButton" @click="openArea(area.areaName)">
 				{{ area.areaName }}
 			</button>
-			<button class="settingsButton" @click="showPopup = true">
+			<button class="settingsButton" @click="openPopup(area.areaName)">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					height="24"
@@ -113,4 +118,8 @@
 		padding: .75rem 1rem;
 		margin-top: -1px;
 	}
+
+	.selected .areaButton {
+		filter: brightness(90%);
+	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/screensTrainer/ScreenResourceCreation.vue b/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
index 2c545ca6..b37e947a 100644
--- a/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
+++ b/frontend/src/components/screensTrainer/ScreenResourceCreation.vue
@@ -3,7 +3,6 @@
 	import PagePersonnel from './pagesResourceCreation/PagePersonnel.vue'
 	import PageMaterial from './pagesResourceCreation/PageMaterial.vue'
 	import {computed, ref} from 'vue'
-	import {useExerciseStore} from '@/stores/Exercise'
 
 	enum Pages {
 		PATIENTS = "PagePatients",
@@ -28,10 +27,6 @@
 	const setPage = (newPage: Pages) => {
 		currentPage.value = newPage
 	}
-
-	const exerciseStore = useExerciseStore()
-
-	const currentAreaData = computed(() => exerciseStore.getArea(currentArea.value))
 </script>
 
 <script lang="ts">
@@ -43,9 +38,10 @@
 </script>
 
 <template>
-	<h1>ResourceCreation</h1>
-	{{ currentAreaData }}
-	<component :is="currentPageComponent" />
+	<p v-if="!currentArea" id="noAreaText">
+		Wähle einen Bereich aus
+	</p>
+	<component :is="currentPageComponent" :current-area="currentArea" />
 	<nav>
 		<button id="nav-patients" :class="{ 'selected': currentPage === Pages.PATIENTS }" @click="setPage(Pages.PATIENTS)">
 			Patienten
@@ -60,6 +56,12 @@
 </template>
 
 <style scoped>
+	#noAreaText {
+		text-align: center;
+		font-size: 1.8em;
+		margin-top: 40px;
+	}
+
 	nav {
 		width: 100%;
 		height: 60px;
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
index 0a19d6e6..cdcaac3c 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PageMaterial.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+	import {computed} from 'vue'
+	import {useExerciseStore} from '@/stores/Exercise'
+
+    const props = defineProps({
+		currentArea: {
+			type: String,
+			default: "Kein Bereich ausgewählt"
+		}
+	})
+
+	const exerciseStore = useExerciseStore()
+
+	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+</script>
+
 <template>
-    <h1>Material</h1>
-</template>
\ No newline at end of file
+	<h1>Patienten</h1>
+	{{ currentAreaData?.devices }}
+</template>
+
+<style scoped>
+</style>
\ 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 99d30288..96bf9826 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePatients.vue
@@ -1,3 +1,120 @@
+<script setup lang="ts">
+	import {computed, ref} from 'vue'
+	import {useExerciseStore} from '@/stores/Exercise'
+	import ToggleSwitchForListItems from '@/components/widgets/ToggleSwitchForListItems.vue'
+	import EditPatientPopup from '@/components/widgets/EditPatientPopup.vue'
+	import AddPatientPopup from '@/components/widgets/AddPatientPopup.vue'
+	import TriageForListItems from '@/components/widgets/TriageForListItems.vue'
+
+    const props = defineProps({
+		currentArea: {
+			type: String,
+			default: "Kein Bereich ausgewählt"
+		}
+	})
+
+	const exerciseStore = useExerciseStore()
+
+	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+
+	const showEditPatientPopup = ref(false)
+	const showAddPatientPopup = ref(false)
+
+	const currentPatientId = ref(Number.NEGATIVE_INFINITY)
+
+	function editPatient(patientId: number) {
+		currentPatientId.value = patientId
+		showEditPatientPopup.value = true
+	}
+
+	const firstNameList =  ['John', 'Jane', 'Michael', 'Emily', 'David', 'Sarah']
+    const surnameList = ['Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis']
+
+	function generateName(){
+		const firstName = firstNameList[Math.floor(Math.random() * firstNameList.length)]
+		const surname = surnameList[Math.floor(Math.random() * surnameList.length)]
+		return `${firstName} ${surname}`
+	}
+
+	const newPatientName = ref('No Name')
+
+	function addPatient() {
+		newPatientName.value = generateName()
+		showAddPatientPopup.value = true
+	}
+</script>
+
 <template>
-    <h1>Patients</h1>
-</template>
\ No newline at end of file
+	<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
+			v-for="patient in currentAreaData?.patients"
+			:key="patient.patientName"
+			class="listitem"
+		>
+			<button class="patientButton" @click="editPatient(patient.patientId)">
+				<div class="patientId">
+					{{ patient.patientId.toString().padStart(3, '0') }}
+				</div>
+				<TriageForListItems :patient-code="patient.patientCode" />
+				<div class="patientName">
+					{{ patient.patientName }}
+				</div>
+			</button>
+			<ToggleSwitchForListItems default="active" />
+		</div>
+		<button v-if="currentAreaData" id="addPatientButton" @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
diff --git a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
index 7ce39729..5703321b 100644
--- a/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
+++ b/frontend/src/components/screensTrainer/pagesResourceCreation/PagePersonnel.vue
@@ -1,3 +1,23 @@
+<script setup lang="ts">
+	import {computed} from 'vue'
+	import {useExerciseStore} from '@/stores/Exercise'
+
+	const props = defineProps({
+		currentArea: {
+			type: String,
+			default: "Kein Bereich ausgewählt"
+		}
+	})
+
+	const exerciseStore = useExerciseStore()
+
+	const currentAreaData = computed(() => exerciseStore.getArea(props.currentArea))
+</script>
+
 <template>
-    <h1>Personnel</h1>
-</template>
\ No newline at end of file
+	<h1>Patienten</h1>
+	{{ currentAreaData?.personnel }}
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/AddPatientPopup.vue b/frontend/src/components/widgets/AddPatientPopup.vue
new file mode 100644
index 00000000..dcc7d45e
--- /dev/null
+++ b/frontend/src/components/widgets/AddPatientPopup.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+	import { useAvailablesStore } from "@/stores/Availables"
+	import PatientInfo from "./PatientInfo.vue"
+	import { computed, ref } from "vue"
+	import TriageForListItems from "./TriageForListItems.vue"
+	import socketTrainer from "@/sockets/SocketTrainer"
+	import PatientCodeList from "./PatientCodeList.vue"
+	import {showErrorToast} from "@/App.vue"
+
+	const emit = defineEmits(['close-popup'])
+
+	const props = defineProps({
+		areaName: {
+			type: String,
+			default: 'No Area'
+		},
+		patientName: {
+			type: String,
+			default: 'No Name'
+		}
+	})
+
+	function addPatient(){
+		if(!patientCodeChanged) {
+			showErrorToast('Es wurde kein Patientencode ausgewählt')
+			return
+		}
+		socketTrainer.patientAdd(props.areaName, props.patientName, currentPatientCode.value)
+	}
+
+	const currentPatientCode = ref()
+
+	const availablesStore = useAvailablesStore()
+
+	const currentPatient = computed(() => {
+		if (currentPatientCode.value !== undefined) {
+			return availablesStore.getPatient(currentPatientCode.value)
+		}
+		return null
+	})
+
+	let patientCodeChanged = false
+	
+	function changePatientCode(patientCode: number){
+		currentPatientCode.value = patientCode
+		patientCodeChanged = true
+	}
+
+</script>
+
+<template>
+	<div class="popup-overlay" @click="emit('close-popup')">
+		<div class="popup" @click.stop="">
+			<div id="leftSide">
+				<h2>Patienten-Datensätze</h2>
+				<PatientCodeList @change-patient="changePatientCode" />
+			</div>
+			<div id="rightSide">
+				<div class="listitem">
+					<TriageForListItems :patient-code="currentPatient?.patientCode" />
+					<div class="patientName">
+						{{ props.patientName }}
+					</div>
+				</div>
+				<PatientInfo
+					:injury="currentPatient?.patientInjury"
+					:history="currentPatient?.patientHistory"
+					:biometrics="currentPatient?.patientBiometrics"
+					:personal-details="currentPatient?.patientPersonalDetails"
+				/>
+				<div id="buttonRow">
+					<button
+						id="saveButton"
+						@click="addPatient()"
+					>
+						Patient hinzufügen
+					</button>
+				</div>
+			</div>
+		</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;
+		width: 80vw;
+		display: flex;
+	}
+
+	#leftSide {
+		float: left;
+		width: 50%;
+		padding: 10px;
+	}
+
+	#rightSide {
+		width: 50%;
+		padding: 10px;
+	}
+
+	#buttonRow {
+		display: flex;
+	}
+
+	#saveButton {
+		position: relative;
+		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;
+		background-color: var(--green);
+	}
+
+	.listitem {
+		position: relative;
+		background-color: #FFFFFF;
+		border: 1px solid rgb(209, 213, 219);
+		display: flex;
+		align-items: center;
+		margin-top: -1px;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: left;
+		height: 50px;
+		width: 100%;
+	}
+
+	.listitem {
+		padding-left: 0;
+	}
+
+	.patientId, .patientName {
+		padding: .75rem 1rem;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/ButtonMainAction.vue b/frontend/src/components/widgets/ButtonMainAction.vue
index 26f42b2d..3915d95c 100644
--- a/frontend/src/components/widgets/ButtonMainAction.vue
+++ b/frontend/src/components/widgets/ButtonMainAction.vue
@@ -24,17 +24,12 @@
 		background-color: #FFFFFF;
 		border: 1px solid rgb(209, 213, 219);
 		border-radius: .5rem;
-		box-sizing: border-box;
-		display: block;
 		width: calc(100% - 2rem);
-		color: #111827;
 		font-size: 1.25rem;
 		line-height: 1.25rem;
 		padding: .75rem 1rem;
 		margin: 1rem;
 		text-align: center;
 		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-		cursor: pointer;
-		vertical-align: bottom;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/EditPatientPopup.vue b/frontend/src/components/widgets/EditPatientPopup.vue
new file mode 100644
index 00000000..15a4db03
--- /dev/null
+++ b/frontend/src/components/widgets/EditPatientPopup.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+	import { useAvailablesStore } from "@/stores/Availables"
+	import PatientInfo from "./PatientInfo.vue"
+	import { computed, ref } from "vue"
+	import TriageForListItems from "./TriageForListItems.vue"
+	import { useExerciseStore } from "@/stores/Exercise"
+	import socketTrainer from "@/sockets/SocketTrainer"
+	import PatientCodeList from "./PatientCodeList.vue"
+
+	const emit = defineEmits(['close-popup'])
+
+	const props = defineProps({
+		patientId: {
+			type: Number,
+			default: Number.NEGATIVE_INFINITY
+		}
+	})
+
+	function deletePatient(patientId: number){
+		socketTrainer.patientDelete(patientId)
+	}
+
+	function updatePatient(patientId: number, patientName: string, patientCode: number){
+		socketTrainer.patientUpdate(patientId, patientName, patientCode)
+	}
+
+	const exerciseStore = useExerciseStore()
+	const currentPatientName = computed(() => exerciseStore.getPatient(props.patientId)?.patientName)
+	const currentPatientCode = ref(exerciseStore.getPatient(props.patientId)?.patientCode)
+
+	const availablesStore = useAvailablesStore()
+
+	const currentPatient = computed(() => {
+		if (currentPatientCode.value !== undefined) {
+			return availablesStore.getPatient(currentPatientCode.value)
+		}
+		return null
+	})
+	
+	function changePatientCode(patientCode: number){
+		currentPatientCode.value = patientCode
+	}
+
+</script>
+
+<template>
+	<div class="popup-overlay" @click="emit('close-popup')">
+		<div class="popup" @click.stop="">
+			<div id="leftSide">
+				<h2>Patienten-Datensätze</h2>
+				<PatientCodeList @change-patient="changePatientCode" />
+			</div>
+			<div id="rightSide">
+				<div class="listitem">
+					<div class="patientId">
+						{{ props.patientId.toString().padStart(3, '0') }}
+					</div>
+					<TriageForListItems :patient-code="currentPatient?.patientCode" />
+					<div class="patientName">
+						{{ currentPatientName }}
+					</div>
+				</div>
+				<PatientInfo
+					:injury="currentPatient?.patientInjury"
+					:history="currentPatient?.patientHistory"
+					:biometrics="currentPatient?.patientBiometrics"
+					:personal-details="currentPatient?.patientPersonalDetails"
+				/>
+				<div id="buttonRow">
+					<button id="deleteButton" @click="deletePatient(props.patientId)">
+						Löschen
+					</button>
+					<button
+						id="saveButton"
+						@click="updatePatient(props.patientId, currentPatientName || '', currentPatient?.patientCode || Number.NEGATIVE_INFINITY)"
+					>
+						Speichern
+					</button>
+				</div>
+			</div>
+		</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;
+		width: 80vw;
+		display: flex;
+	}
+
+	#leftSide {
+		float: left;
+		width: 50%;
+		padding: 10px;
+	}
+
+	#rightSide {
+		width: 50%;
+		padding: 10px;
+	}
+
+	#buttonRow {
+		display: flex;
+	}
+
+	#deleteButton, #saveButton {
+		position: relative;
+		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;
+	}
+
+	#deleteButton {
+		background-color: var(--red);
+	}
+
+	#saveButton {
+		background-color: var(--green);
+	}
+
+	.listitem {
+		position: relative;
+		background-color: #FFFFFF;
+		border: 1px solid rgb(209, 213, 219);
+		display: flex;
+		align-items: center;
+		margin-top: -1px;
+		font-size: 1.25rem;
+		padding: .75rem 1rem;
+		text-align: left;
+		height: 50px;
+		width: 100%;
+	}
+
+	.listitem {
+		padding-left: 0;
+	}
+
+	.patientId, .patientName {
+		padding: .75rem 1rem;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/LoginPatient.vue b/frontend/src/components/widgets/LoginPatient.vue
index 0ed78f77..e3d49c01 100644
--- a/frontend/src/components/widgets/LoginPatient.vue
+++ b/frontend/src/components/widgets/LoginPatient.vue
@@ -18,7 +18,7 @@
 			return
 		}
 
-		patientStore.patientID = patientIdNumber
+		patientStore.patientId = patientIdNumber
 
 		const requestBody = {
 			"exerciseId": exerciseIdNumber,
diff --git a/frontend/src/components/widgets/PatientCodeList.vue b/frontend/src/components/widgets/PatientCodeList.vue
new file mode 100644
index 00000000..d20c8334
--- /dev/null
+++ b/frontend/src/components/widgets/PatientCodeList.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+    import { useAvailablesStore } from "@/stores/Availables"
+	import '@/assets/main.css'
+	import TriageForListItems from "./TriageForListItems.vue"
+  
+    const availablesStore = useAvailablesStore()
+    const availablePatients = availablesStore.patients
+  
+    const emit = defineEmits(['change-patient'])
+  
+    function changePatient(patientCode: number) {
+      emit('change-patient', patientCode)
+    }
+</script>
+
+<template>
+	<div id="list">
+		<button
+			v-for="patient in availablePatients"
+			:key="patient.patientCode"
+			class="availablePatientButton"
+			@click="changePatient(patient.patientCode)"
+		>
+			<TriageForListItems :patient-code="patient.patientCode" />
+		</button>
+	</div>
+</template>
+  
+<style scoped>
+    #list {
+        display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+    }
+
+    .availablePatientButton {
+        position: relative;
+        border: none;
+		padding: 0px;
+		margin-right: 5px;
+		margin-bottom: 5px;
+		align-items: center;
+		font-size: 1.25rem;
+		height: 50px;
+	}
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/components/widgets/PatientInfo.vue b/frontend/src/components/widgets/PatientInfo.vue
new file mode 100644
index 00000000..eb289c53
--- /dev/null
+++ b/frontend/src/components/widgets/PatientInfo.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+	const props = defineProps({
+		injury: {
+			type: String,
+			default: 'No Injury'
+		},
+		history: {
+			type: String,
+			default: 'No History'
+		},
+		personalDetails: {
+			type: String,
+			default: 'No Personal Details'
+		},
+		biometrics: {
+			type: String,
+			default: 'No Biometrics'
+		}
+
+	})
+</script>
+
+<template>
+	<p class="key">
+		Verletzung
+	</p>{{ props.injury }}
+	<br>
+	<p class="key">
+		Vorerkrankungen
+	</p>{{ props.history }}
+	<br>
+	<p class="key">
+		Personalien
+	</p>{{ props.personalDetails }}
+	<br>
+	<p class="key">
+		Biometrie
+	</p>{{ props.biometrics }}
+	<br>
+</template>
+
+<style scoped>
+	.key {
+		font-weight: bold;
+	}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/ToggleSwitchForListItems.vue b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
new file mode 100644
index 00000000..bd3f2b14
--- /dev/null
+++ b/frontend/src/components/widgets/ToggleSwitchForListItems.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+	const props = defineProps({
+		isChecked: {
+			type: Boolean,
+			default: true
+		}
+	})
+</script>
+
+<template>
+	<div class="toggleSwitch">
+		<label>
+			<input type="checkbox" :checked="props.isChecked">
+			<span class="slider" />
+		</label>
+	</div>
+</template>
+
+<style scoped>
+.toggleSwitch {
+	position: relative;
+	display: inline-block;
+	width: 80px;
+	height: 24px;
+}
+
+.toggleSwitch input { 
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.slider {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 10px;
+	right: 10px;
+	bottom: 0;
+	background-color: #ccc;
+	transition: .1s;
+	border-radius: 34px;
+	margin-right: 5px;
+}
+
+.slider:before {
+	position: absolute;
+	content: "";
+	height: 20px;
+	width: 20px;
+	left: 2px;
+	right: 10px;
+	bottom: 2px;
+	background-color: white;
+	transition: .1s;
+	border-radius: 50%;
+}
+
+input:checked + .slider {
+	background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+	transform: translateX(22px);
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/widgets/TriageForListItems.vue b/frontend/src/components/widgets/TriageForListItems.vue
new file mode 100644
index 00000000..a0ab41e5
--- /dev/null
+++ b/frontend/src/components/widgets/TriageForListItems.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+	import { useAvailablesStore } from '@/stores/Availables'
+	import { triageToColor } from '@/utils'
+
+    const props = defineProps({
+		patientCode: {
+			type: Number,
+			default: Number.NEGATIVE_INFINITY
+		}
+	})
+
+	const availablesStore = useAvailablesStore()
+
+	function getPatientCodeLabel(patientCode: number) {
+		if (patientCode === Number.NEGATIVE_INFINITY) {
+			return ""
+		}
+		return patientCode.toString().padStart(3, '0')
+	}
+</script>
+
+<template>
+	<div class="patientCode" :style="{ backgroundColor: triageToColor(availablesStore.getPatient(patientCode)?.triage) }">
+		{{ getPatientCodeLabel(props.patientCode) }}
+	</div>
+</template>
+
+<style scoped>
+	.patientCode {
+		position: relative;
+		display: inline-block;
+		height: 50px;
+		padding: .75rem 1rem;
+		display: flex;
+		align-items: center;
+		color: white;
+	}
+</style>@/Utils@/utils
\ No newline at end of file
diff --git a/frontend/src/components/widgets/TriagePopup.vue b/frontend/src/components/widgets/TriagePopup.vue
index a0e985f0..6a5b44a0 100644
--- a/frontend/src/components/widgets/TriagePopup.vue
+++ b/frontend/src/components/widgets/TriagePopup.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-	import {usePatientStore} from '@/stores/Patient'
 	import socketPatient from "@/sockets/SocketPatient"
 	import {ref} from 'vue'
 
 	const emit = defineEmits(['close-popup'])
 
-	const setTriage = (triage: string) => {
-		usePatientStore().triage = triage
+	function setTriage(triage: string) {
 		socketPatient.triage(triage)
 	}
 
@@ -21,6 +19,10 @@
 		{char: 'E', color: 'red'},
 	])
 
+	function getTriageColor(color: string) {
+		return "var(--"+color+")"
+	}
+
 </script>
 
 <template>
@@ -31,7 +33,8 @@
 				<button
 					v-for="triageButton in triageButtons"
 					:key="triageButton.char"
-					:style="{backgroundColor: triageButton.color}"
+					class="triageButton"
+					:style="{backgroundColor: getTriageColor(triageButton.color)}"
 					@click="setTriage(triageButton.char)"
 				>
 					{{ triageButton.char }}
@@ -68,9 +71,17 @@
 		justify-content: center;
 	}
 
-	.button-container > button {
+	.triageButton {
 		width: 50px;
 		height: 50px;
+        position: relative;
+        border: none;
+		padding: 0px;
 		margin: 10px;
+		margin-right: 5px;
+		margin-bottom: 5px;
+		align-items: center;
+		font-size: 1.25rem;
+		color: white;
 	}
 </style>
\ No newline at end of file
diff --git a/frontend/src/sockets/MessageData.ts b/frontend/src/sockets/MessageData.ts
index 96caff56..d94c7666 100644
--- a/frontend/src/sockets/MessageData.ts
+++ b/frontend/src/sockets/MessageData.ts
@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+/* eslint-disable @typescript-eslint/no-unused-vars */
 interface MessageData {
 	messageType: string
 	message?: string
@@ -19,6 +19,9 @@ interface MessageData {
 	exercise?: Exercise
 	state?: State
 	logEntry?: LogEntry
+	availablePatients: AvailablePatients
+	availableActions: AvailableActions
+	availableMaterial: AvailableMaterial
 }
 
 interface Exercise {
@@ -37,6 +40,7 @@ interface Patient {
 	patientId: number
 	patientName: string
 	patientCode: number
+	triage: string
 }
 
 interface Personnel {
@@ -68,3 +72,30 @@ interface LogEntry {
 	personnelId: number
 	deviceId: number
 }
+
+interface AvailablePatient {
+	patientCode: number
+	triage: string
+	patientInjury: string
+	patientHistory: string
+	patientPersonalDetails: string
+	patientBiometrics: string
+}
+
+interface Availables {
+	actions: [],
+	patients: AvailablePatient[],
+	material: [],
+}
+
+interface AvailableActions {
+	actions: [],
+}
+
+interface AvailablePatients {
+	availablePatients: AvailablePatient[],
+}
+
+interface AvailableMaterial {
+	material: [],
+}
\ No newline at end of file
diff --git a/frontend/src/sockets/SocketPatient.ts b/frontend/src/sockets/SocketPatient.ts
index c9b1f02f..7fcfa314 100644
--- a/frontend/src/sockets/SocketPatient.ts
+++ b/frontend/src/sockets/SocketPatient.ts
@@ -46,16 +46,14 @@ class SocketPatient {
 				case 'test-passthrough':
 					showWarningToast(data.message || '')
 					break
-				case 'triage':
-					usePatientStore().triage = data.triage || '-'
-					break
 				case 'state':
 					usePatientStore().loadStatusFromJSON(data.state as State)
 					break
 				case 'exercise':
 					useExerciseStore().createFromJSON(data.exercise as Exercise)
-					usePatientStore().patientName = useExerciseStore().getPatient(usePatientStore().patientID)?.patientName || ''
-					usePatientStore().areaName = useExerciseStore().getAreaOfPatient(usePatientStore().patientID)?.areaName || ''
+					usePatientStore().patientName = useExerciseStore().getPatient(usePatientStore().patientId)?.patientName || ''
+					usePatientStore().areaName = useExerciseStore().getAreaOfPatient(usePatientStore().patientId)?.areaName || ''
+					usePatientStore().triage = useExerciseStore().getPatient(usePatientStore().patientId)?.triage || '-'
 					break
 				case 'exercise-start':
 					setScreen(Screens.STATUS, ScreenPosition.LEFT)
@@ -114,7 +112,6 @@ export default socketPatient
 export const serverMockEvents = [
 	{id: 'failure', data: '{"messageType":"failure","message":"Error encountered"}'},
 	{id: 'test-passthrough', data: '{"messageType":"test-passthrough","message":"received test-passthrough event"}'},
-	{id: 'triage', data: '{"messageType":"triage","triage":"A"}'},
 	{
 		id: 'state',
 		data: '{"messageType":"state","state":{"phaseNumber":"123","airway":"Normal","breathing":"Regular","circulation":"Stable",' +
@@ -123,14 +120,17 @@ export const serverMockEvents = [
 	{
 		id: 'exercise',
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
-			'{"areaName":"Cardio","patients":[{"patientId":1,"patientName":"John Doe","patientCode":20},{"patientId":2,"patientName":"Jane Doe",' +
-			'"patientCode":21}],"personnel":[{"personnelId":1,"personnelName":"Coach Carter"}],"devices":' +
-			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"Strength Training","patients":' +
-			'[{"patientId":3,"patientName":"Jim Beam","patientCode":12},{"patientId":4,"patientName":"Jill Wine","patientCode":24}],' +
-			'"personnel":[{"personnelId":2,"personnelName":"Coach Taylor"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
-			'{"areaName":"Flexibility","patients":[{"patientId":5,"patientName":"Yoga Mats","patientCode":32},' +
-			'{"patientId":6,"patientName":"Flexi Rods","patientCode":8}],"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
-			'"devices":[{"deviceId":3,"deviceName":"Yoga Mats"}]}]}}'
+			'{"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":' +
+			'[{"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"}]},' +
+			'{"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"}]}]}}'
 	},
 	{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 329aff7e..a0bd4593 100644
--- a/frontend/src/sockets/SocketTrainer.ts
+++ b/frontend/src/sockets/SocketTrainer.ts
@@ -3,6 +3,7 @@ import {useTrainerStore} from "@/stores/Trainer"
 import {useExerciseStore} from "@/stores/Exercise"
 import {showErrorToast, showWarningToast} from "@/App.vue"
 import {Screens, setLeftScreen as moduleTrainerSetLeftScreen, setRightScreen as moduleTrainerSetRightScreen} from "@/components/ModuleTrainer.vue"
+import { useAvailablesStore } from "@/stores/Availables"
 
 class SocketTrainer {
 	private readonly url: string
@@ -46,6 +47,15 @@ class SocketTrainer {
 				case 'test-passthrough':
 					showWarningToast(data.message || '')
 					break
+				case 'available-actions':
+					useAvailablesStore().loadAvailableActions(data.availableActions as AvailableActions)
+					break
+				case 'available-material':
+					useAvailablesStore().loadAvailableMaterial(data.availableMaterial as AvailableMaterial)
+					break
+				case 'available-patients':
+					useAvailablesStore().loadAvailablePatients(data.availablePatients as AvailablePatients)
+					break
 				case 'exercise':
 					useExerciseStore().createFromJSON(data.exercise as Exercise)
 					moduleTrainerSetLeftScreen(Screens.EXERCISE_CREATION)
@@ -107,6 +117,31 @@ class SocketTrainer {
 			'areaName': areaName
 		}))
 	}
+
+	patientAdd(areaName: string, patientName: string, patientCode: number) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'patient-add',
+			'areaName': areaName,
+			'patientName': patientName,
+			'patientCode': patientCode
+		}))
+	}
+
+	patientUpdate(patientId: number, patientName: string, patientCode: number) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'patient-update',
+			'patientId': patientId,
+			'patientName': patientName,
+			'patientCode': patientCode
+		}))
+	}
+
+	patientDelete(patientId: number) {
+		this.#sendMessage(JSON.stringify({
+			'messageType': 'patient-delete',
+			'patientId': patientId
+		}))
+	}
 }
 
 const socketTrainer = new SocketTrainer('ws://localhost:8000/ws/trainer/?token=')
@@ -115,17 +150,55 @@ export default socketTrainer
 export const serverMockEvents = [
 	{id: 'failure', data: '{"messageType":"failure","message":"Error encountered"}'},
 	{id: 'test-passthrough', data: '{"messageType":"test-passthrough","message":"received test-passthrough event"}'},
+	{
+		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"},'+
+			'{"patientCode":2,'+
+			'"triage":"G","patientInjury":"twisted ankle","patientHistory":"No known allergies",'+
+			'"patientPersonalDetails":"Male, 47 years old","patientBiometrics":"Height:164cm, Weight: 65kg"},'+
+			'{"patientCode":3,'+
+			'"triage":"R","patientInjury":"head injury","patientHistory":"Diabetes",'+
+			'"patientPersonalDetails":"Female, 20 years old","patientBiometrics":"Height:192cm, Weight: 77kg"},'+
+			'{"patientCode":4,'+
+			'"triage":"Y","patientInjury":"sprained wrist","patientHistory":"gastroesophageal reflux disease",'+
+			'"patientPersonalDetails":"Male, 13 years old","patientBiometrics":"Height:165cm, Weight: 54kg"},'+
+			'{"patientCode":5,'+
+			'"triage":"G","patientInjury":"bruised ribs","patientHistory":"No known allergies",'+
+			'"patientPersonalDetails":"Female, 53 years old","patientBiometrics":"Height:180cm, Weight: 71kg"},'+
+			'{"patientCode":6,'+
+			'"triage":"Y","patientInjury":"shoulder dislocation","patientHistory":"paralyzed",'+
+			'"patientPersonalDetails":"Male, 49 years old","patientBiometrics":"Height:170cm, Weight: 67kg"},'+
+			'{"patientCode":7,'+
+			'"triage":"R","patientInjury":"head trauma","patientHistory":"Asthma",'+
+			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:162cm, Weight: 67kg"},'+
+			'{"patientCode":8,'+
+			'"triage":"Y","patientInjury":"bruised ribs","patientHistory":"reflux disease",'+
+			'"patientPersonalDetails":"Male, 43 years old","patientBiometrics":"Height:161cm, Weight: 56kg"},'+
+			'{"patientCode":9,'+
+			'"triage":"G","patientInjury":"sprained wrist","patientHistory":"hearth disease",'+
+			'"patientPersonalDetails":"Female, 23 years old","patientBiometrics":"Height:182cm, Weight: 75kg"},'+
+			'{"patientCode":10,'+
+			'"triage":"Y","patientInjury":"shoulder broken","patientHistory":"illness",'+
+			'"patientPersonalDetails":"Male, 39 years old","patientBiometrics":"Height:173cm, Weight: 61kg"}'+
+			']}}'
+	},
 	{
 		id: 'exercise',
 		data: '{"messageType":"exercise","exercise":{"exerciseId":123456,"areas":[' +
-			'{"areaName":"Cardio","patients":[{"patientId":1,"patientName":"John Doe","patientCode":101},{"patientId":2,"patientName":"Jane Doe",' +
-			'"patientCode":102}],"personnel":[{"personnelId":1,"personnelName":"Coach Carter"}],"devices":' +
-			'[{"deviceId":1,"deviceName":"Treadmill"}]},{"areaName":"Strength Training","patients":' +
-			'[{"patientId":3,"patientName":"Jim Beam","patientCode":201},{"patientId":4,"patientName":"Jill Wine","patientCode":202}],' +
-			'"personnel":[{"personnelId":2,"personnelName":"Coach Taylor"}],"devices":[{"deviceId":2,"deviceName":"Dumbbells"}]},' +
-			'{"areaName":"Flexibility","patients":[{"patientId":5,"patientName":"Yoga Mats","patientCode":301},' +
-			'{"patientId":6,"patientName":"Flexi Rods","patientCode":302}],"personnel":[{"personnelId":3,"personnelName":"Coach Flex"}],' +
-			'"devices":[{"deviceId":3,"deviceName":"Yoga Mats"}]}]}}'
+			'{"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":' +
+			'[{"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"}]},' +
+			'{"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"}]}]}}'
 	},
 	{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
new file mode 100644
index 00000000..377fe3de
--- /dev/null
+++ b/frontend/src/stores/Availables.ts
@@ -0,0 +1,31 @@
+import {defineStore} from 'pinia'
+
+export const useAvailablesStore = defineStore('availables', {
+	state: (): Availables => ({
+		actions: [],
+		patients: [],
+		material: [],
+	}),
+	getters: {
+		getPatient: (state) => {
+			return (patientCode: number): AvailablePatient | null => {
+				let foundPatient: AvailablePatient | null = null
+				state.patients.forEach((patient) => {
+					if (patient.patientCode == patientCode) foundPatient = patient
+				})
+				return foundPatient
+			}
+		}
+	},
+	actions: {
+		loadAvailableActions(json: AvailableActions) {
+			this.actions = json.actions
+		},
+		loadAvailablePatients(json: AvailablePatients) {
+			this.patients = json.availablePatients
+		},
+		loadAvailableMaterial(json: AvailableMaterial) {
+			this.material = json.material
+		}
+	}
+})
\ No newline at end of file
diff --git a/frontend/src/stores/Patient.ts b/frontend/src/stores/Patient.ts
index 6880e719..197c9105 100644
--- a/frontend/src/stores/Patient.ts
+++ b/frontend/src/stores/Patient.ts
@@ -3,7 +3,7 @@ import {defineStore} from "pinia"
 export const usePatientStore = defineStore('patient', {
 	state: () => ({
 		token: '',
-		patientID: Number.NEGATIVE_INFINITY,
+		patientId: Number.NEGATIVE_INFINITY,
 		patientName: '',
 		triage: '-',
 		areaName: '',
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
new file mode 100644
index 00000000..f73a3739
--- /dev/null
+++ b/frontend/src/utils.ts
@@ -0,0 +1,20 @@
+export function triageToColor(triage?: string): string {
+    let color = 'gray'
+    switch (triage) {
+        case 'R':
+        case 'A':
+        case 'B':
+        case 'C':
+        case 'D':
+        case 'E':
+            color = 'red'
+            break
+        case 'Y':
+            color = 'yellow'
+            break
+        case 'G':
+            color = 'green'
+            break
+    }
+    return "var(--" + color + ")"
+}
\ No newline at end of file