diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html
index 17f7e62..7d0788c 100644
--- a/src/app/components/search/search.component.html
+++ b/src/app/components/search/search.component.html
@@ -10,21 +10,16 @@
         <mat-icon>search </mat-icon>
       </button>
     </mat-form-field>
-    <!--<mat-form-field id="category-chooser">
-      <mat-label>category</mat-label>
-      <mat-select value="user" #field (selectionChange)="changeCategory($event.value)">
-        <mat-option value="user">user</mat-option>
-        <mat-option value="group" disabled>group</mat-option>
-      </mat-select>
-    </mat-form-field>-->
   </mat-toolbar>
-      <div id="friendlist">
-        <!--<div class="frienditem" *ngFor="let friend of friends"
-        [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"> 
-          <div class="picture">Pic</div>
-          <div class="name"><span>{{friend.name}}</span></div>
-        </div>-->
-        <mat-card class="friend-card" *ngFor="let user of foundUsers" 
+  <mat-accordion>
+    <mat-expansion-panel *ngIf="foundUsers.length > 0" expanded>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Users
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <div class="list">
+        <mat-card class="card" *ngFor="let user of foundUsers" 
         [class.selected]="user === selectedUser"
         tabindex="0">
           <mat-card-header>
@@ -36,7 +31,28 @@
             </div>
           </mat-card-header>
         </mat-card>
-        <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
-        
-    </div>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel *ngIf="foundGroups.length > 0" [expanded]="foundUsers.length < 1">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Groups  
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <div class="list">
+        <mat-card class="card" *ngFor="let group of foundGroups" 
+        [class.selected]="group === selectedGroup"
+        tabindex="0">
+          <mat-card-header>
+            <div mat-card-avatar class="profile-picture" (click)="showGroupProfile(group)"></div>
+            <mat-card-title class="pointer" (click)="showGroupProfile(group)">{{group.name}}</mat-card-title>
+            <div class="icon-box">
+              <button mat-icon-button class="request-button" (click)="joinGroup(group)" [disabled]="!group.allowedToJoinGroup"><mat-icon>group_add</mat-icon></button>
+            </div>
+          </mat-card-header>
+        </mat-card>
+      </div>
+    </mat-expansion-panel>
+  </mat-accordion> 
+  <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
 </div>
\ No newline at end of file
diff --git a/src/app/components/search/search.component.sass b/src/app/components/search/search.component.sass
index 5a06e35..d26f7b8 100644
--- a/src/app/components/search/search.component.sass
+++ b/src/app/components/search/search.component.sass
@@ -13,10 +13,10 @@
   padding-left: 0.5em
   padding-right: 0.5em
 
-#friendlist
+#list
   padding: 0.5em
 
-.friend-card
+.card
   box-sizing: border-box
   width: 100%
   margin-top: 0.5em
@@ -48,3 +48,9 @@
 .icon-box
   text-align: right
   width: 100%
+
+/deep/ .mat-expansion-panel
+  background: #e6e6e6
+/deep/.dark-theme .mat-expansion-panel
+  background: #121212
+
diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts
index b927242..85bcf32 100644
--- a/src/app/components/search/search.component.ts
+++ b/src/app/components/search/search.component.ts
@@ -6,6 +6,7 @@ import { User } from 'src/app/models/user';
 import {environment} from 'src/environments/environment';
 import { Router } from '@angular/router';
 import { DatasharingService } from '../../services/datasharing.service';
+import { GroupInfo } from 'src/app/models/groupinfo';
 
 @Component({
   selector: 'home-search',
@@ -17,7 +18,8 @@ export class SearchComponent implements OnInit {
   searchValue = ' ';
   category = 'user';
   user: User;
-  foundUsers: Array<User>;
+  foundUsers: Array<User> = new Array();
+  foundGroups: Array<GroupInfo> = new Array();
 
   constructor(
     private searchService: SearchService,
@@ -56,9 +58,13 @@ export class SearchComponent implements OnInit {
     this.http.post(environment.graphQLUrl, this.searchService.buildJsonUser(name))
       .subscribe(response => {
         this.foundUsers = this.searchService.renderUsers(response.json());
+        this.foundGroups = this.searchService.renderGroups(response.json());
         for (const foundUser of this.foundUsers) {
           foundUser.allowedToSendRequest = this.requestService.isAllowedToSendRequest(foundUser.userID, this.user);
         }
+        for (const foundGroup of this.foundGroups) {
+          foundGroup.allowedToJoinGroup = this.requestService.isAllowedToJoinGroup(foundGroup.id, this.user);
+        }
         this.loading = false;
       });
   }
@@ -71,5 +77,10 @@ export class SearchComponent implements OnInit {
     user.allowedToSendRequest = false;
     this.requestService.sendFriendRequest(user);
   }
+
+  public joinGroup(group: GroupInfo) {
+    group.allowedToJoinGroup = false;
+    this.requestService.joinGroup(group);
+  }
 }
 
diff --git a/src/app/models/group.ts b/src/app/models/group.ts
new file mode 100644
index 0000000..963d2ec
--- /dev/null
+++ b/src/app/models/group.ts
@@ -0,0 +1,9 @@
+import { User } from 'src/app/models/user';
+
+export class Group {
+  id: number;
+  name: string;
+  handle: string;
+  creator: User;
+  member: User[] = new Array();
+}
diff --git a/src/app/models/groupinfo.ts b/src/app/models/groupinfo.ts
index a074422..1a39a7c 100644
--- a/src/app/models/groupinfo.ts
+++ b/src/app/models/groupinfo.ts
@@ -1,6 +1,7 @@
 export class GroupInfo {
     id: number;
     name: string;
+    allowedToJoinGroup = false;
 
     constructor(pId: number, pName: string) {
         this.id = pId;
diff --git a/src/app/services/request/request.service.ts b/src/app/services/request/request.service.ts
index 273a823..5c8b632 100644
--- a/src/app/services/request/request.service.ts
+++ b/src/app/services/request/request.service.ts
@@ -4,6 +4,7 @@ import {DatasharingService} from '../datasharing.service';
 import {Router} from '@angular/router';
 import {environment} from 'src/environments/environment';
 import { User } from 'src/app/models/user';
+import { GroupInfo } from 'src/app/models/groupinfo';
 
 
 @Injectable({
@@ -36,6 +37,19 @@ export class RequestService {
     return true;
   }
 
+  public isAllowedToJoinGroup(groupId: number, self: User): boolean {
+    // returns false if user is not logged in or is member of the group(Id)
+    if (!self.loggedIn) {
+      return false;
+    }
+    for (const group of self.groups) {
+      if (group.id === groupId) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   public sendFriendRequest(user: User) {
     this.data.addSentRequestUserID(user.userID);
     const headers = new Headers();
@@ -45,6 +59,14 @@ export class RequestService {
       });
   }
 
+  public joinGroup(group: GroupInfo) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    this.http.post(environment.graphQLUrl, this.buildJsonJoinGroup(group.id))
+      .subscribe(response => {
+      });
+  }
+
   public buildJsonRequest(id_: number, type_: String): any {
     const body = {
       query: `mutation($id: ID!, $type: RequestType) {
@@ -60,6 +82,20 @@ export class RequestService {
     return body;
   }
 
+  public buildJsonJoinGroup(id_: number): any {
+    const body = {
+      query: `mutation($id: ID!) {
+        joinGroup(id: $id) {
+          id
+        }
+      }`
+      , variables: {
+        id: id_
+      }
+    };
+    return body;
+  }
+
   public buildJsonAcceptRequest(id_: number): any {
     const body = {
       query: `mutation($id: ID!) {
diff --git a/src/app/services/search/search.service.ts b/src/app/services/search/search.service.ts
index 565574c..05afd6b 100644
--- a/src/app/services/search/search.service.ts
+++ b/src/app/services/search/search.service.ts
@@ -4,6 +4,7 @@ import {DatasharingService} from '../datasharing.service';
 import {Router} from '@angular/router';
 import {environment} from 'src/environments/environment';
 import { User } from 'src/app/models/user';
+import { GroupInfo } from 'src/app/models/groupinfo';
 
 @Injectable({
   providedIn: 'root'
@@ -30,6 +31,14 @@ export class SearchService {
       return users;
   }
 
+  public renderGroups(pResponse: any): Array<GroupInfo> {
+    const groups = new Array<GroupInfo>();
+      for (const group of pResponse.data.search.groups) {       
+        groups.push(new GroupInfo(group.id, group.name));
+      }
+      return groups;
+  }
+
   public buildJsonUser(name_: String): any {
     const body = {
       query: `query($name: String!) {
@@ -45,6 +54,12 @@ export class SearchService {
             id
             }
           }
+          groups{
+            id
+            name
+            creator{id name handle}
+            members{id name handle}
+          }
         }
       }`
       , variables: {