diff --git a/frontend/src/app/components/create-group/create-group.component.css b/frontend/src/app/components/create-group/create-group.component.css
index 19c646a2b0ee0358adc411bec3a62bf3b08347fd..8ec04346bc6ceec1ac24274edaebc50501f320bd 100644
--- a/frontend/src/app/components/create-group/create-group.component.css
+++ b/frontend/src/app/components/create-group/create-group.component.css
@@ -3,3 +3,50 @@
   margin-bottom: -4%;
   font: 13px Helvetica;
 }
+
+#faculties, #modules, #groups {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+
+#faculties li, #modules li, #groups li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+#faculties li:hover, #modules li:hover, #groups li:hover {
+  background-color: palegreen;
+  left: .1em;
+}
+
+#faculties li.selected, #modules li.selected , #groups li.selected {
+  background-color: darkseagreen;
+}
+
+#faculties li.selected:hover, #modules li.selected.hover , #groups li.selected:hover {
+  background-color: darkseagreen;
+}
+
+#faculties .badge, #modules .badge, #groups .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: darkseagreen;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
diff --git a/frontend/src/app/components/create-group/create-group.component.html b/frontend/src/app/components/create-group/create-group.component.html
index fccbf2b4a45d3dfe7ea02085bfdd2160601943d8..868d30f433e533501a895194af0dc2e678832b83 100644
--- a/frontend/src/app/components/create-group/create-group.component.html
+++ b/frontend/src/app/components/create-group/create-group.component.html
@@ -1,3 +1,29 @@
 <div id="createGroup" >
   <h1>Gruppe erstellen</h1>
+  <p></p>
+  <ul id="faculties" >Fakultäten
+    <li *ngFor="let faculty of faculties"
+        [class.selected]="faculty === selectedFaculty"
+        (click)="onSelectFac(faculty)">
+      <span class="badge">{{faculty.id}}</span> {{faculty.titel}}
+    </li>
+  </ul>
+  <div *ngIf="selectedFaculty">
+    <ul id="modules">Module
+      <li *ngFor="let module of modules"
+          [class.selected]="module === selectedModule"
+          (click)="onSelectMod(module)">
+        <span class="badge">{{module.id}}</span> {{module.titel}}
+      </li>
+    </ul>
+  </div>
+  <div *ngIf="selectedModule">
+    <ul id="groups">Gruppen
+      <li *ngFor="let group of groups"
+          [class.selected]="group === selectedGroup"
+          (click)="onSelectGroup(group)">
+        <span class="badge">{{group.id}}</span> {{'Gruppe'}}
+      </li>
+    </ul>
+  </div>
 </div>
diff --git a/frontend/src/app/components/create-group/create-group.component.ts b/frontend/src/app/components/create-group/create-group.component.ts
index 774ffea9228be0a42a883e35f69eef5c2a1a1c25..cdbb1feab7d9158c0078ebc67083add4cb1e6247 100644
--- a/frontend/src/app/components/create-group/create-group.component.ts
+++ b/frontend/src/app/components/create-group/create-group.component.ts
@@ -1,4 +1,9 @@
 import {Component, Input, OnInit} from '@angular/core';
+import {FacultyDO} from "../../types/facultyDO";
+import {ModulesDO} from "../../types/modulesDO";
+import {GroupDO} from "../../types/groupDO";
+import {ActivatedRoute} from "@angular/router";
+import {DataProviderService} from "../../services/data-provider.service";
 
 @Component({
   selector: 'app-create-group-page',
@@ -8,10 +13,54 @@ import {Component, Input, OnInit} from '@angular/core';
 export class CreateGroupComponent implements OnInit {
 
 
+  faculties: FacultyDO[];
+  modules: ModulesDO[];
+  groups: GroupDO[];
+  selectedModule:ModulesDO;
+  selectedFaculty:FacultyDO;
+  selectedGroup: GroupDO;
 
-  constructor() { }
+  constructor(private route: ActivatedRoute,private dataService: DataProviderService) {}
 
   ngOnInit(): void {
+    this.getAllFaculties();
   }
 
+  onSelectFac(faculty: FacultyDO): void {
+    this.selectedFaculty = faculty;
+    this.getAllModules();
+  }
+
+  onSelectMod(module: ModulesDO): void {
+    this.selectedModule = module;
+    this.getAllGroups();
+  }
+
+  onSelectGroup(groups: GroupDO): void {
+    this.selectedGroup = groups;
+  }
+
+  getAllFaculties() {
+    this.route.params.subscribe((params)=> {
+      this.dataService.getFacultyData().then((response) => {
+        this.faculties = response.payload;
+      })
+    })
+  }
+
+  getAllModules() {
+    this.route.params.subscribe((params)=> {
+      this.dataService.getModulesData().then((response) => {
+        this.modules = response.payload;
+      })
+    })
+  }
+
+  getAllGroups() {
+    this.route.params.subscribe((params)=> {
+      this.dataService.getGroupData().then((response) => {
+        this.groups = response.payload;
+      })
+    })
+  }
 }
diff --git a/frontend/src/app/components/group-search/group-search.component.html b/frontend/src/app/components/group-search/group-search.component.html
index b5c6b6aee6e77019c3ef4b910fb9c71640a5592c..c96af522bc966da4b600a159ae46a5b5d544a2cb 100644
--- a/frontend/src/app/components/group-search/group-search.component.html
+++ b/frontend/src/app/components/group-search/group-search.component.html
@@ -5,7 +5,7 @@
     <li *ngFor="let faculty of faculties"
         [class.selected]="faculty === selectedFaculty"
         (click)="onSelectFac(faculty)">
-        <span class="badge">{{faculty.fakultaet_ID}}</span> {{faculty.title}}
+        <span class="badge">{{faculty.id}}</span> {{faculty.titel}}
     </li>
   </ul>
   <div *ngIf="selectedFaculty">
diff --git a/frontend/src/app/components/group-search/group-search.component.ts b/frontend/src/app/components/group-search/group-search.component.ts
index 90864ae55d2464df40981481bef03fe7a557879f..b82ad98b12c9fa2872cc4bcbaf1b8f0a8ccc4953 100644
--- a/frontend/src/app/components/group-search/group-search.component.ts
+++ b/frontend/src/app/components/group-search/group-search.component.ts
@@ -12,22 +12,17 @@ import {GroupDO} from "../../types/groupDO";
 })
 export class GroupSearchComponent implements OnInit {
 
-  faculties: FacultyDO[] = [
-  { fakultaet_ID: 1, title: 'Informatik' },
-  { fakultaet_ID: 1, title: 'Informatik' },
-  { fakultaet_ID: 1, title: 'Informatik' },
-  { fakultaet_ID: 1, title: 'Informatik' }
-  ];
+  faculties: FacultyDO[];
   modules: ModulesDO[];
   groups: GroupDO[];
   selectedModule:ModulesDO;
   selectedFaculty:FacultyDO;
   selectedGroup: GroupDO;
 
-
   constructor(private route: ActivatedRoute,private dataService: DataProviderService) {}
 
   ngOnInit(): void {
+    this.getAllFaculties();
   }
 
   onSelectFac(faculty: FacultyDO): void {
@@ -45,7 +40,11 @@ export class GroupSearchComponent implements OnInit {
   }
 
   getAllFaculties() {
-
+    this.route.params.subscribe((params)=> {
+      this.dataService.getFacultyData().then((response) => {
+        this.faculties = response.payload;
+      })
+    })
   }
 
   getAllModules() {
diff --git a/frontend/src/app/components/user-own-groups/user-own-groups.component.css b/frontend/src/app/components/user-own-groups/user-own-groups.component.css
index 9dfaa3f028979d9664a2b9d32a2cc0c99c8c9b15..c70cc310fde5576488045aadd59d8c1186d99e96 100644
--- a/frontend/src/app/components/user-own-groups/user-own-groups.component.css
+++ b/frontend/src/app/components/user-own-groups/user-own-groups.component.css
@@ -3,3 +3,50 @@
   margin-bottom: -4%;
   font: 13px Helvetica;
 }
+
+#groups {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+
+#groups li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+#groups li:hover {
+  background-color: palegreen;
+  left: .1em;
+}
+
+#groups li.selected {
+  background-color: darkseagreen;
+}
+
+#groups li.selected:hover {
+  background-color: darkseagreen;
+}
+
+#groups .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: darkseagreen;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
diff --git a/frontend/src/app/components/user-own-groups/user-own-groups.component.html b/frontend/src/app/components/user-own-groups/user-own-groups.component.html
index d88abaa84746cf1f98a566c790fed05e77cd2a92..afb663d514972766899f281ddd7b5c0c2cbb5370 100644
--- a/frontend/src/app/components/user-own-groups/user-own-groups.component.html
+++ b/frontend/src/app/components/user-own-groups/user-own-groups.component.html
@@ -1,3 +1,9 @@
 <div id="myGroups" >
   <h1>Meine Gruppen</h1>
+  <p></p>
+  <ul id="groups">
+    <li *ngFor="let group of groups">
+    <span class="badge">{{group.id}}</span> {{'Gruppe'}}
+    </li>
+  </ul>
 </div>
diff --git a/frontend/src/app/components/user-own-groups/user-own-groups.component.ts b/frontend/src/app/components/user-own-groups/user-own-groups.component.ts
index 7ac1beaa7ad0c4479174d4e6dc974524530e5fb0..b26bbba55910701d65966740c55b08ba3907a518 100644
--- a/frontend/src/app/components/user-own-groups/user-own-groups.component.ts
+++ b/frontend/src/app/components/user-own-groups/user-own-groups.component.ts
@@ -1,4 +1,9 @@
 import {Component, OnInit} from '@angular/core';
+import {FacultyDO} from "../../types/facultyDO";
+import {ModulesDO} from "../../types/modulesDO";
+import {GroupDO} from "../../types/groupDO";
+import {ActivatedRoute} from "@angular/router";
+import {DataProviderService} from "../../services/data-provider.service";
 
 @Component({
   selector: 'app-user-own-groups-page',
@@ -7,10 +12,20 @@ import {Component, OnInit} from '@angular/core';
 })
 export class UserOwnGroupsComponent implements OnInit {
 
-  constructor() { }
+  groups: GroupDO[];
+
+  constructor(private route: ActivatedRoute,private dataService: DataProviderService) {}
 
   ngOnInit(): void {
+    this.getAllGroups();
+  }
 
+  getAllGroups() {
+    this.route.params.subscribe((params)=> {
+      this.dataService.getGroupData().then((response) => {
+        this.groups = response.payload;
+      })
+    })
   }
 
 }
diff --git a/frontend/src/app/types/facultyDO.ts b/frontend/src/app/types/facultyDO.ts
index bd5f81c9d1b05af25fc1f2aba2aaaa362c304e36..437c374b9d2a72d277abde6cdd445e44abb00a5d 100644
--- a/frontend/src/app/types/facultyDO.ts
+++ b/frontend/src/app/types/facultyDO.ts
@@ -1,4 +1,4 @@
 export class FacultyDO {
-  fakultaet_ID: number;
-  title: string;
+  id: number;
+  titel: string;
 }
diff --git a/frontend/manifest.yml b/frontend/src/manifest.yml
similarity index 100%
rename from frontend/manifest.yml
rename to frontend/src/manifest.yml
diff --git a/groupManagement/src/main/java/thinkTogether/groupManagement/controller/FakultaetRestController.java b/groupManagement/src/main/java/thinkTogether/groupManagement/controller/FakultaetRestController.java
index f991465c920a45ffe0b09c0b450379372c74ed99..58beb6d68710ffc1dfef7c68b7a71033ae265fe0 100644
--- a/groupManagement/src/main/java/thinkTogether/groupManagement/controller/FakultaetRestController.java
+++ b/groupManagement/src/main/java/thinkTogether/groupManagement/controller/FakultaetRestController.java
@@ -1,11 +1,15 @@
 package thinkTogether.groupManagement.controller;
 
+import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RestController;
 import thinkTogether.groupManagement.model.Fakultaet;
 import thinkTogether.groupManagement.repo.FakultaetRepository;
 
 import java.util.List;
 
+@RestController
+@CrossOrigin(origins = "*", allowedHeaders = "*")
 public class FakultaetRestController {
 
     private final FakultaetRepository fakultaetRepository;