diff --git a/modules/fbs-core/web/src/app/model/Group.ts b/modules/fbs-core/web/src/app/model/Group.ts
new file mode 100644
index 000000000..641646dfd
--- /dev/null
+++ b/modules/fbs-core/web/src/app/model/Group.ts
@@ -0,0 +1,13 @@
+export interface Group {
+  id: number;
+  courseId: number;
+  name: string;
+  membership: number;
+  visible?: boolean;
+}
+
+export interface GroupInput {
+  name: string;
+  membership: number;
+  visible: boolean;
+}
diff --git a/modules/fbs-core/web/src/app/service/group-registration.sevice.ts b/modules/fbs-core/web/src/app/service/group-registration.sevice.ts
new file mode 100644
index 000000000..6648e3ebe
--- /dev/null
+++ b/modules/fbs-core/web/src/app/service/group-registration.sevice.ts
@@ -0,0 +1,78 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { HttpClient } from "@angular/common/http";
+import { Participant } from "../model/Participant";
+import { Group } from "../model/Group";
+
+@Injectable({
+  providedIn: "root",
+})
+export class GroupRegistrationService {
+  constructor(private http: HttpClient) {}
+
+  /**
+   * @param uid User id
+   * @return All registered groups
+   */
+  getRegisteredGroups(uid: number): Observable<Group[]> {
+    return this.http.get<Group[]>(`/api/v1/users/${uid}/groups`);
+  }
+
+  /**
+   * @param cid Course id
+   * @param gid Group id
+   * @return All participants of the group
+   */
+  getGroupParticipants(cid: number, gid: number): Observable<Participant[]> {
+    return this.http.get<Participant[]>(
+      `/api/v1/courses/${cid}/groups/${gid}/participants`
+    );
+  }
+
+  /**
+   * Register a user into a group
+   * @param cid Course id
+   * @param gid Group id
+   * @param uid User id
+   * @return Observable that succeeds on successful registration
+   */
+  registerGroup(cid: number, gid: number, uid: number): Observable<void> {
+    return this.http.put<void>(
+      `/api/v1/courses/${cid}/groups/${gid}/users/${uid}`,
+      {}
+    );
+  }
+
+  /**
+   * De-register a user from a group
+   * @param cid Course id
+   * @param gid Group id
+   * @param uid User id
+   */
+  deregisterGroup(cid: number, gid: number, uid: number): Observable<void> {
+    return this.http.delete<void>(
+      `/api/v1/courses/${cid}/groups/${gid}/users/${uid}`
+    );
+  }
+
+  /**
+   * De-register all users from a course
+   * @param cid Course id
+   * @param gid Group id
+   */
+  deregisterAll(cid: number, gid: number): Observable<void> {
+    return this.http.delete<void>(`/api/v1/courses/${cid}/groups/${gid}/users`);
+  }
+
+  /**
+   *  Get current number of members of a group
+   *  @param cid Course id
+   *  @param gid Group id
+   *  @return Number of members
+   */
+  getGroupMembership(cid: number, gid: number): Observable<number> {
+    return this.http.get<number>(
+      `/api/v1/courses/${cid}/groups/${gid}/membership`
+    );
+  }
+}
diff --git a/modules/fbs-core/web/src/app/service/group.service.ts b/modules/fbs-core/web/src/app/service/group.service.ts
new file mode 100644
index 000000000..24de40143
--- /dev/null
+++ b/modules/fbs-core/web/src/app/service/group.service.ts
@@ -0,0 +1,74 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { Group, GroupInput } from "../model/Group";
+import { HttpClient } from "@angular/common/http";
+
+@Injectable({
+  providedIn: "root",
+})
+export class GroupService {
+  private cid: number;
+
+  constructor(private http: HttpClient) {}
+  /**
+   * @return Observable with all groups
+   * @param visible Optional filter to filter only for visible groups
+   * @param cid The course id
+   */
+  getGroupList(cid: number, visible?: boolean): Observable<Group[]> {
+    let url = `/api/v1/courses/${cid}/groups`;
+    if (visible !== undefined) {
+      url += `?visible = ${visible}`;
+    }
+    return this.http.get<Group[]>(url);
+  }
+
+  /**
+   * Get a single group by its id, if it exits
+   * @param cid The course id
+   * @param gid The group id
+   */
+  getGroup(cid: number, gid: number): Observable<Group> {
+    return this.http.get<Group>(`/api/v1/courses/${cid}/groups/${gid}`);
+  }
+
+  /**
+   * Create a new group
+   * @param cid The course id
+   * @param postData The necessary input to create a group
+   * @return The created group, adjusted by the system
+   */
+  createGroup(cid: number, postData: GroupInput): Observable<Group> {
+    const groupData = { ...postData, courseId: cid };
+    return this.http.post<Group>(`/api/v1/courses/${cid}/groups`, groupData);
+  }
+
+  /**
+   * Update an existing group
+   * @param cid The course id
+   * @param gid The group id
+   * @param postData The necessary input to create a group
+   */
+  updateGroup(
+    cid: number,
+    gid: number,
+    postData: GroupInput
+  ): Observable<void> {
+    const groupData = { ...postData, courseId: cid };
+    return this.http.put<void>(
+      `/api/v1/courses/${cid}/groups/${gid}`,
+      groupData
+    );
+  }
+
+  /**
+   * Delete a group by its id
+   * @param cid The course id
+   * @param gid The group id
+   * @return Observable that succeeds if the course does not exist after the operation
+   */
+  deleteGroup(cid: number, gid: number): Observable<void> {
+    // returns an Observable<Succeeded>
+    return this.http.delete<void>(`/api/v1/courses/${cid}/groups/${gid}`);
+  }
+}