diff --git a/backend/service/db/dbRooms.go b/backend/service/db/dbRooms.go
index 34c5d94..6d6aebe 100644
--- a/backend/service/db/dbRooms.go
+++ b/backend/service/db/dbRooms.go
@@ -27,7 +27,9 @@ func GetRooms(app *pocketbase.PocketBase) []string {
 	var roomArray []string
 
 	for _, event := range events {
-		var room = strings.Split(event.Rooms, " ")
+		var room = strings.FieldsFunc(event.Rooms, functions.IsSeparator(
+			[]rune{',', ' ', '\t', '\n', '\r', '\u00A0'},
+		))
 		//split functions room by space and add each room to array if it is not already in there
 		for _, r := range room {
 			var text = strings.TrimSpace(r)
diff --git a/backend/service/functions/string.go b/backend/service/functions/string.go
index 83b228b..8f71850 100644
--- a/backend/service/functions/string.go
+++ b/backend/service/functions/string.go
@@ -8,10 +8,19 @@ import (
 
 // check if string is empty or contains only whitespaces
 func OnlyWhitespace(word string) bool {
-	if len(strings.TrimSpace(word)) == 0 {
-		return true
+	return len(strings.TrimSpace(word)) == 0
+}
+
+// return function to check if rune is a separator
+func IsSeparator(separator []rune) func(rune) bool {
+	return func(character rune) bool {
+		for _, sep := range separator {
+			if sep == character {
+				return true
+			}
+		}
+		return false
 	}
-	return false
 }
 
 func Contains(s []string, e string) bool {
diff --git a/backend/service/functions/string_test.go b/backend/service/functions/string_test.go
index e097015..39310e0 100644
--- a/backend/service/functions/string_test.go
+++ b/backend/service/functions/string_test.go
@@ -1,6 +1,8 @@
 package functions
 
-import "testing"
+import (
+	"testing"
+)
 
 func TestOnlyWhitespace(t *testing.T) {
 	type args struct {
@@ -52,3 +54,29 @@ func TestHashString(t *testing.T) {
 		})
 	}
 }
+
+func TestIsSeparator(t *testing.T) {
+	type args struct {
+		separator []rune
+		character rune
+	}
+	tests := []struct {
+		name string
+		args args
+		want bool
+	}{
+		{"empty separator", args{[]rune{}, 'a'}, false},
+		{"separator with one rune equal", args{[]rune{'a'}, 'a'}, true},
+		{"separator with one rune different", args{[]rune{'a'}, 'b'}, false},
+		{"separator with two runes equal", args{[]rune{'a', 'b'}, 'a'}, true},
+		{"separator with two runes equal second", args{[]rune{'a', 'b'}, 'b'}, true},
+		{"separator with two runes different", args{[]rune{'a', 'b'}, 'c'}, false},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := IsSeparator(tt.args.separator)(tt.args.character); got != tt.want {
+				t.Errorf("IsSeparator()() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
diff --git a/frontend/src/api/fetchRoom.ts b/frontend/src/api/fetchRoom.ts
index 21566f9..1ca7caa 100644
--- a/frontend/src/api/fetchRoom.ts
+++ b/frontend/src/api/fetchRoom.ts
@@ -31,7 +31,7 @@ export async function fetchEventsByRoomAndDuration(
     })
     .catch((error) => {
       console.log("Error fetching events: ", error);
-      return null;
+      return Promise.reject(error);
     });
   console.log("occupations: ", events);
   return events;
diff --git a/frontend/src/components/RoomOccupation.vue b/frontend/src/components/RoomOccupation.vue
index 207bc79..06e801f 100644
--- a/frontend/src/components/RoomOccupation.vue
+++ b/frontend/src/components/RoomOccupation.vue
@@ -20,6 +20,7 @@ type CalenderEvent = {
   id: number;
   start: string;
   end: string;
+  showFree: boolean;
 };
 
 const currentDateFrom: Ref<string> = ref("");
@@ -38,21 +39,27 @@ async function getOccupation() {
   if (selectedRoom.value === "") {
     return;
   }
-  const events = await fetchEventsByRoomAndDuration(
+  fetchEventsByRoomAndDuration(
     selectedRoom.value,
     currentDateFrom.value,
     currentDateTo.value,
-  );
-  occupations.value = events.map((event, index) => {
-    return {
-      id: index,
-      start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-      end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
-    };
-  });
+  )
+  .then((events) => {
+    occupations.value = events.map((event, index) => {
+      return {
+        id: index,
+        start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+        end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
+        showFree: event.name.toLowerCase().includes("zur freien verfügung"),
+      };
+    });
 
-  const calendar = fullCalendar.value?.getApi();
-  calendar?.refetchEvents();
+    const calendar = fullCalendar.value?.getApi();
+    calendar?.refetchEvents();
+  })
+  .catch((error) => {
+    console.log(error);
+  });
 }
 
 import allLocales from "@fullcalendar/core/locales-all";
@@ -124,20 +131,19 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
       currentDateTo.value = endDate.toISOString().split("T")[0];
       getOccupation();
     },
-    events: function (_info: any, successCallback: any, failureCallback: any) {
-      if (occupations.value.length === 0) {
-        failureCallback(new Error("no events"));
-      } else {
-        successCallback(
-          occupations.value.map((event) => {
-            return {
-              id: event.id.toString(),
-              start: event.start,
-              end: event.end,
-            } as EventInput;
-          }),
-        );
-      }
+    events: function (_info: any, successCallback: any, _: any) {
+      successCallback(
+        occupations.value.map((event) => {
+          return {
+            id: event.id.toString(),
+            start: event.start,
+            end: event.end,
+            color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
+            textColor: event.showFree ? "var(--green-50)" : "var(--primary-text-color)",
+            title: event.showFree ? t("roomFinderPage.available") : t("roomFinderPage.occupied"),
+          } as EventInput;
+        }),
+      );
     },
   };
 });
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index bd84f6e..a96dcdc 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -21,7 +21,9 @@
     "headline": "Raumfinder",
     "detail": "Bitte wähle einen Raum aus, um die Belegung einzusehen",
     "dropDownSelect": "Bitte wähle einen Raum aus",
-    "noRoomsAvailable": "Keine Räume verfügbar"
+    "noRoomsAvailable": "Keine Räume verfügbar",
+    "available": "verfügbar",
+    "occupied": "belegt"
   },
   "moduleSelection": {
     "nextStep": "Weiter",
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index 2e76316..e68bc81 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -21,7 +21,9 @@
     "headline": "room finder",
     "detail": "Please select a room to view the occupancy",
     "dropDownSelect": "Please select a room",
-    "noRoomsAvailable": "No rooms listed"
+    "noRoomsAvailable": "No rooms listed",
+    "available": "available",
+    "occupied": "occupied"
   },
   "moduleSelection": {
     "nextStep": "next step",