diff --git a/srv/src/entities/label.entity.ts b/srv/src/entities/label.entity.ts
index 381134d..d4021c4 100644
--- a/srv/src/entities/label.entity.ts
+++ b/srv/src/entities/label.entity.ts
@@ -17,9 +17,13 @@ export class Label {
   @Column()
   authorId: ObjectID;
 
-  constructor(projectId: ObjectID, authorId: ObjectID, name: string) {
+  @Column()
+  authorClass: string;
+
+  constructor(projectId: ObjectID, authorId: ObjectID, name: string, authorClass: string) {
     this.projectId = projectId;
     this.authorId = authorId;
     this.name = name;
+    this.authorClass = authorClass;
   }
 }
diff --git a/srv/src/entities/labelcategory.entity.ts b/srv/src/entities/labelcategory.entity.ts
index 045c3c0..4568755 100644
--- a/srv/src/entities/labelcategory.entity.ts
+++ b/srv/src/entities/labelcategory.entity.ts
@@ -20,10 +20,14 @@ export class LabelCategory {
   @Column()
   labels: Label[];
 
-  constructor(projectId: ObjectID, authorId: ObjectID, name: string, labels: Label[]) {
+  @Column()
+  authorClass: string;
+
+  constructor(projectId: ObjectID, authorId: ObjectID, name: string, labels: Label[], authorClass: string) {
     this.projectId = projectId;
     this.authorId = authorId;
     this.name = name;
     this.labels = labels;
+    this.authorClass = authorClass;
   }
 }
diff --git a/srv/src/entities/project.entity.ts b/srv/src/entities/project.entity.ts
index 93d5efe..9c0a40d 100644
--- a/srv/src/entities/project.entity.ts
+++ b/srv/src/entities/project.entity.ts
@@ -1,6 +1,7 @@
 import { Column, Entity, ObjectIdColumn } from 'typeorm';
 import { Directory } from './directory.entity';
 import { ObjectID } from 'mongodb';
+import { User } from './user.entity';
 
 @Entity()
 export class Project {
@@ -12,10 +13,13 @@ export class Project {
   title: string;
 
   @Column()
-  ownerId: ObjectID;
+  ownerId: User;
 
   @Column()
-  memberIds: ObjectID[];
+  supervisorIds: User[];
+
+  @Column()
+  contributorIds: User[];
 
   @Column()
   description: string;
diff --git a/srv/src/entities/segment.entity.ts b/srv/src/entities/segment.entity.ts
index 65cee28..2f2147a 100644
--- a/srv/src/entities/segment.entity.ts
+++ b/srv/src/entities/segment.entity.ts
@@ -18,10 +18,14 @@ export class Segment {
   @Column()
   labelId: ObjectID;
 
-  constructor(labelId: ObjectID, authorId: ObjectID, start: number, end: number) {
+  @Column()
+  authorClass: string;
+
+  constructor(labelId: ObjectID, authorId: ObjectID, start: number, end: number, authorClass: string) {
     this.labelId = labelId;
     this.authorId = authorId;
     this.start = start;
     this.end = end;
+    this.authorClass = authorClass;
   }
 }
diff --git a/srv/src/labels/labels.gateway.ts b/srv/src/labels/labels.gateway.ts
index ae7e948..d950e64 100644
--- a/srv/src/labels/labels.gateway.ts
+++ b/srv/src/labels/labels.gateway.ts
@@ -62,19 +62,18 @@ export class LabelsGateway  {
   @SubscribeMessage('addLabel')
   async addLabel(socket: SocketIO.Socket, data) {
     const room = LabelsGateway.getProjectRoom(socket);
-    return await this.labelsService.createLabel(room, data.aid, data.cid)
-      .then(async (value: InsertResult) => {
-        const id = value.identifiers[0].id;
-        const newLabel: Label = await this.labelsService.getLabel(id);
-        socket.to(room).broadcast.emit('newLabels', newLabel);
-        return newLabel;
+    return await this.labelsService.createLabel(room, data.aid, data.cid, data.authorClass)
+      .then(async (value: Label) => {
+        value['categoryId'] = data.cid;
+        socket.to(room).broadcast.emit('newLabels', value);
+        return value;
       });
   }
 
   @SubscribeMessage('addLabelCategory')
   async addLabelCategory(socket: SocketIO.Socket, data) {
     const room = LabelsGateway.getProjectRoom(socket);
-    return await this.labelsService.createLabelCategory(room, data.aid)
+    return await this.labelsService.createLabelCategory(room, data.aid, data.authorClass)
       .then(async (value: InsertResult) => {
         const id = value.identifiers[0].id;
         const newLabelCategory: LabelCategory = await this.labelsService.getLabelCategory(id);
@@ -157,9 +156,10 @@ export class LabelsGateway  {
     const authorId = '';
     const start = data.start;
     const end = data.end;
+    const authorClass = data.authorClass;
     const hyperid = data.hyperid;
     return await this.segmentService
-      .createSegment(labelId, authorId, start, end)
+      .createSegment(labelId, authorId, start, end, authorClass)
       .then(() => {
         return false;
       }, () => {
diff --git a/srv/src/labels/labels.service.ts b/srv/src/labels/labels.service.ts
index 37cb6be..36aba14 100644
--- a/srv/src/labels/labels.service.ts
+++ b/srv/src/labels/labels.service.ts
@@ -12,18 +12,21 @@ export class LabelsService {
               private readonly labelCategoryRepository: MongoRepository<LabelCategory>) {
   }
 
-  async createLabel(projectId: string, authorId: string, categoryId: string): Promise<InsertResult> {
-    let labelCategory = await this.labelCategoryRepository.findOne(categoryId);
-    const label = new Label(projectId, authorId, labelCategory.name+'_'+(labelCategory.labels.length + 1));
-    return await this.labelRepository.insert(label);
+  async createLabel(projectId: string, authorId: string, categoryId: string, authorClass: string): Promise<Label> {
+    let labelCategory: LabelCategory = await this.labelCategoryRepository.findOne(categoryId);
+    const label = new Label(projectId, authorId, labelCategory.name+'_'+(labelCategory.labels.length + 1), authorClass);
+    await this.labelRepository.insert(label);
+    labelCategory.labels.push(label);
+    await this.labelCategoryRepository.update(labelCategory.id.toString(), {labels: labelCategory.labels});
+    return await this.labelRepository.findOne(label);
   }
 
-  async createLabelCategory(projectId: string, authorId: string): Promise<InsertResult> {
-    let label = new Label(projectId, authorId, 'LabelCategory_1');
+  async createLabelCategory(projectId: string, authorId: string, authorClass: string): Promise<InsertResult> {
+    let label = new Label(projectId, authorId, 'LabelInstance_1', authorClass);
     await this.labelRepository.insert(label);
     let labels: Label[] = [];
     labels.push(label);
-    const labelCategory = new LabelCategory(projectId, authorId, 'LabelCategory', labels);
+    const labelCategory = new LabelCategory(projectId, authorId, 'LabelCategory', labels, authorClass);
     return await this.labelCategoryRepository.insert(labelCategory);
   }
 
diff --git a/srv/src/labels/segment/segment.service.ts b/srv/src/labels/segment/segment.service.ts
index fbe96a2..fa9b83a 100644
--- a/srv/src/labels/segment/segment.service.ts
+++ b/srv/src/labels/segment/segment.service.ts
@@ -10,8 +10,8 @@ export class SegmentService {
               private readonly segmentRepository: MongoRepository<Segment>) {
   }
 
-  async createSegment(labelId: string, authorId: string, start: number, end: number) {
-    const segment = new Segment(labelId, authorId, start, end);
+  async createSegment(labelId: string, authorId: string, start: number, end: number, authorClass: string) {
+    const segment = new Segment(labelId, authorId, start, end, authorClass);
     return await this.segmentRepository.insert(segment);
   }
 
diff --git a/srv/src/project/project.controller.ts b/srv/src/project/project.controller.ts
index bed0127..296e769 100644
--- a/srv/src/project/project.controller.ts
+++ b/srv/src/project/project.controller.ts
@@ -29,6 +29,7 @@ import { Segment } from '../entities/segment.entity';
 import { ObjectID } from 'mongodb';
 import { config } from '../../config';
  import { LabelCategory } from '../entities/labelcategory.entity';
+ import { User } from '../entities/user.entity';
 
 interface FileUpload {
   readonly fieldname: string;
@@ -57,9 +58,17 @@ export class ProjectController {
     project.description = body.description;
     project.singleMedia = body.singleMedia;
     project.modified = new Date();
-    project.ownerId = req.user.id;
-    project.memberIds = [];
-    project.memberIds.push(project.ownerId);
+    project.ownerId = req.user;
+    project.contributorIds = [];
+    project.supervisorIds = [];
+
+    body.supervisorIds.map( userdetails => {
+      project.supervisorIds.push(userdetails);
+    });
+
+    body.contributorIds.map( userdetails => {
+      project.contributorIds.push(userdetails);
+    });
 
     project.fileTree = new Directory();
     project.fileTree.parent = null;
@@ -73,8 +82,8 @@ export class ProjectController {
   @UseGuards(AuthGuard())
   async inviteMembers(@Param('id') id, @Req() req, @Body() body) {
     const project: Project = await this.projectService.findOne(id);
-    const members: ObjectID[] = project.memberIds;
-    project.memberIds = req.project.memberIds;
+    project.supervisorIds = req.project.supervisorIds;
+    project.contributorIds = req.project.contributorIds;
     return await this.projectService.update(project.id.toHexString(), project);
   }
 
@@ -156,11 +165,17 @@ export class ProjectController {
     const project = await this.projectService.findOne(id);
     let memberIds = [];
     if (body) {
-      let members:string[] = body['memberIds'];
+      let members:User[] = body['contributorIds'];
+      for (var member of members) {
+        memberIds.push(ObjectID.createFromHexString(member));
+      }
+      project.contributorIds = memberIds;
+      memberIds = [];
+      members = body['supervisorIds'];
       for (var member of members) {
         memberIds.push(ObjectID.createFromHexString(member));
       }
-      project.memberIds = memberIds;
+      project.supervisorIds = memberIds;
       return await this.projectService.update(id, project);
     }
   }
diff --git a/srv/src/project/project.service.ts b/srv/src/project/project.service.ts
index f492edf..613b84b 100644
--- a/srv/src/project/project.service.ts
+++ b/srv/src/project/project.service.ts
@@ -16,7 +16,7 @@ export class ProjectService {
      const y = ObjectID.createFromHexString(userId);
     const allProjects = await this.projectRepository.find();
      return allProjects.filter(x => {
-       return x.ownerId.equals(y) || x.memberIds.find(value => y.equals(value));
+       return x.ownerId.id.equals(y) || x.contributorIds.find((value) => value.id == y) != null || x.supervisorIds.find((value) => value.id == y) != null;
      });
     //return allProjects;
   }
diff --git a/srv/src/users/users.controller.ts b/srv/src/users/users.controller.ts
index 9c4a95a..9809b25 100644
--- a/srv/src/users/users.controller.ts
+++ b/srv/src/users/users.controller.ts
@@ -49,6 +49,12 @@ export class UsersController {
     return await this.usersService.findUsersByIds(req.headers.ids.toString().split(','));
   }
 
+  @Get(':username')
+  @UseGuards(AuthGuard())
+  async getUsersByUsername(@Param('username') username): Promise<UserModel[]> {
+    return await this.usersService.findByUsername(username);
+  }
+
   private static isValidUserDto(userDto: UserRegistrationDto) {
     if (userDto) {
       if (userDto.username) {
diff --git a/srv/src/users/users.service.ts b/srv/src/users/users.service.ts
index 3e37942..bfc8aba 100644
--- a/srv/src/users/users.service.ts
+++ b/srv/src/users/users.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common';
 import { User } from '../entities/user.entity';
-import { MongoRepository } from 'typeorm';
+import { MongoRepository, Like } from 'typeorm';
 import { InjectRepository } from '@nestjs/typeorm';
 import { UserModel } from './user.model';
 
@@ -45,4 +45,11 @@ export class UsersService {
   async findOneById(id: string) {
     return await this.userRepository.findOne(id);
   }
+
+  async findByUsername(username: string) {
+    const users = await this.userRepository.find();
+    return users.filter(x => {
+      return x.username.startsWith(username);
+    });
+  }
 }
diff --git a/web/src/app/auth/auth.service.ts b/web/src/app/auth/auth.service.ts
index 24a93e0..dfcd1b7 100644
--- a/web/src/app/auth/auth.service.ts
+++ b/web/src/app/auth/auth.service.ts
@@ -102,6 +102,13 @@ export class AuthService {
       .pipe(catchError(this.handleError<UserModel[]>(`fetch users for ids: ${id}`)));
   }
 
+  getUsersByUsername(username: string): Observable<UserModel[]> {
+    const headers = new HttpHeaders({'username': username});
+    const url = `${this.userUrl}/${username}`;
+    return this.http.get<UserModel[]>(url, {headers: headers})
+      .pipe(catchError(this.handleError<UserModel[]>(`fetch users for username: ${username}`)));
+  }
+
   /**
    * Handle Http operation that failed.
    * Let the app continue.
diff --git a/web/src/app/editor/current-project.service.ts b/web/src/app/editor/current-project.service.ts
index 96500e7..fbf9715 100644
--- a/web/src/app/editor/current-project.service.ts
+++ b/web/src/app/editor/current-project.service.ts
@@ -42,4 +42,16 @@ export class CurrentProjectService {
   exportCsv(projectId: string): Observable<any> {
     return this.projectsService.exportCsv(projectId);
   }
+
+  findUserRole(project: ProjectModel, userId: string): string {
+    if(project.ownerId.id === userId) return 'owner';
+    let role = '';
+    project.contributorIds.map(value => {
+      if (value.id === userId) role =  'contributor';
+    });
+    project.supervisorIds.map(value => {
+      if (value.id === userId) role = 'supervisor';
+    });
+    return  role;
+  }
 }
diff --git a/web/src/app/editor/timeline/timeline.component.ts b/web/src/app/editor/timeline/timeline.component.ts
index 7a0bf79..8a120f3 100644
--- a/web/src/app/editor/timeline/timeline.component.ts
+++ b/web/src/app/editor/timeline/timeline.component.ts
@@ -108,7 +108,7 @@ export class TimelineComponent implements OnInit, AfterViewInit, OnDestroy {
         const categoryLabel = document.createElement('label');
         categoryLabel.innerHTML = group['category'];
         categoryLabel.addEventListener('click', () => {
-          this.labelsService.addLabel(JSON.parse(localStorage.getItem('currentSession$'))['user']['id'],group['categoryId']);
+          this.labelsService.addLabel(JSON.parse(localStorage.getItem('currentSession$'))['user']['id'],group['categoryId'], this.userRole);
         });
 
         //categoryContainer.prepend(categoryInput);
@@ -184,6 +184,7 @@ export class TimelineComponent implements OnInit, AfterViewInit, OnDestroy {
   private currentTime = 0;
 
   private checkboxChange = new EventEmitter<{ id: IdType, checked: boolean }>();
+  private userRole: string;
 
   constructor(private projectService: CurrentProjectService,
               private labelsService: LabelsService,
@@ -197,6 +198,7 @@ export class TimelineComponent implements OnInit, AfterViewInit, OnDestroy {
       .subscribe(project => {
         if (project) {
           this.project = project;
+          this.userRole = this.projectService.findUserRole(project, JSON.parse(localStorage.getItem('currentSession$'))['user']['id']);
 
           /*this.labelsService.getLabels()
             .then((labels: LabelModel[]) => {
@@ -264,7 +266,8 @@ export class TimelineComponent implements OnInit, AfterViewInit, OnDestroy {
                   hyperid: item.id,
                   group: item.group,
                   start: item.start,
-                  end: item.end
+                  end: item.end,
+                  userRole: this.userRole
                 };
                 this.labelsService.addSegment(segment).then(() => {
                   console.log('segment added');
@@ -345,14 +348,19 @@ export class TimelineComponent implements OnInit, AfterViewInit, OnDestroy {
   private observeLabels() {
     this.subscription.add(this.labelsService.newLabels$().subscribe(newLabel => {
       if (newLabel) {
-        const group = {id: newLabel.id, content: newLabel.name};
-        this.timelineData.addGroup(group);
+        let category: LabelCategoryModel = this.labelCategories.find(value => value.id == newLabel['categoryId'] );
+        if(category!= null) {
+          category.labels.push(newLabel);
+          const group = {id: newLabel.id, content: newLabel.name, category: category.name, categoryId: category.id};
+          this.timelineData.addGroup(group);
+          this.timelineData.sortByCategories();
+        }
       }
     }));
 
     this.subscription.add(this.labelsService.newLabelCategories$().subscribe(newLabelCategories => {
       if (newLabelCategories) {
-        const group = {id: newLabelCategories["labels"][0]["_id"], content: newLabelCategories["labels"][0]["name"], category: newLabelCategories.name};
+        const group = {id: newLabelCategories["labels"][0]["_id"], content: newLabelCategories["labels"][0]["name"], category: newLabelCategories.name, categoryId: newLabelCategories.id};
         this.timelineData.addGroup(group);
         this.labelCategories.push(newLabelCategories);
       }
@@ -367,6 +375,7 @@ export class TimelineComponent implements OnInit, AfterViewInit, OnDestroy {
     this.subscription.add(this.labelsService.removedLabelCategories$().subscribe(removed => {
       if (removed) {
         let removedCategory: LabelCategoryModel = this.labelCategories.find((labelCategory) => { return labelCategory.id === removed.id;});
+        this.timelineData.deleteGroupCategory(removedCategory.id);
         removedCategory.labels.map( label => this.timelineData.removeGroup(label["_id"]));
         this.labelCategories.filter(item => item !== removedCategory);
       }
@@ -385,6 +394,7 @@ export class TimelineComponent implements OnInit, AfterViewInit, OnDestroy {
           let category: LabelCategoryModel = this.labelCategories.find( item => item.id === changed.id);
           category.name = changed.change;
           category.labels.map( label => label.name = changed.change + '_' + label.name.split('_')[1]);
+          this.timeline.redraw();
         }
       })
     );
diff --git a/web/src/app/editor/timeline/timeline.data.ts b/web/src/app/editor/timeline/timeline.data.ts
index 066b3ec..9511c7a 100644
--- a/web/src/app/editor/timeline/timeline.data.ts
+++ b/web/src/app/editor/timeline/timeline.data.ts
@@ -1,6 +1,8 @@
 import * as vis from 'vis';
 import { DataGroup, DataItem, DataSet, IdType } from 'vis';
 import * as hyperid from 'hyperid';
+
+import _ from "lodash";
 import { Time } from './time';
 
 export class TimelineData {
@@ -129,4 +131,16 @@ export class TimelineData {
       }
     });
   }
+
+  deleteGroupCategory(categoryId: string) {
+    this._groups.forEach((group, id) => {
+      if(group['categoryId'] === categoryId) {
+        this.removeGroup(id.toString());
+      }
+    });
+  }
+
+  sortByCategories() {
+    console.log(this._groups);
+  }
 }
diff --git a/web/src/app/labels/labels.service.ts b/web/src/app/labels/labels.service.ts
index b9e05fe..f7f62f6 100644
--- a/web/src/app/labels/labels.service.ts
+++ b/web/src/app/labels/labels.service.ts
@@ -93,9 +93,9 @@ export class LabelsService {
    * Add a label to this project
    * @param authorId - the ID of the author
    */
-  addLabel(authorId: string = '', categoryId: string) {
+  addLabel(authorId: string = '', categoryId: string, authorClass: string) {
     return new Promise(resolve => {
-      this.socket.emit('addLabel', {aid: authorId, cid: categoryId}, (label: LabelModel) => {
+      this.socket.emit('addLabel', {aid: authorId, cid: categoryId, authorClass: authorClass}, (label: LabelModel) => {
         resolve(label);
         this.newLabelSubject.next(label);
       });
@@ -106,9 +106,9 @@ export class LabelsService {
    * Add a label to this project
    * @param authorId - the ID of the author
    */
-  addLabelCategory(authorId: string = '') {
+  addLabelCategory(authorId: string = '', authorClass: string) {
     return new Promise(resolve => {
-      this.socket.emit('addLabelCategory', {aid: authorId}, (label: LabelCategoryModel) => {
+      this.socket.emit('addLabelCategory', {aid: authorId, authorClass: authorClass}, (label: LabelCategoryModel) => {
         resolve(label);
         this.newLabelCategorySubject.next(label);
       });
@@ -134,7 +134,7 @@ export class LabelsService {
   }
 
   /**
-   * Update the name of a label
+   * Update the name of a label Category
    * @param id of this label
    * @param newName - a new name to be assigned to this label
    */
@@ -196,7 +196,7 @@ export class LabelsService {
     return this.socket.fromEvent('getSegments');
   }
 
-  addSegment(p: { hyperid: IdType; group: string; start: DateType; end: DateType }) {
+  addSegment(p: { hyperid: IdType; group: string; start: DateType; end: DateType, userRole: string }) {
     console.log(p);
     return new Promise(((resolve, reject) => {
       this.socket.emit('addSegment', p, (err) => {
diff --git a/web/src/app/layout/labeltree/label-tree.component.ts b/web/src/app/layout/labeltree/label-tree.component.ts
index 86d80be..c363c29 100644
--- a/web/src/app/layout/labeltree/label-tree.component.ts
+++ b/web/src/app/layout/labeltree/label-tree.component.ts
@@ -20,6 +20,7 @@ export class LabelTreeComponent implements OnInit, OnDestroy {
   };
 
   private project: ProjectModel;
+  private userRole: string;
   private subscription: Subscription;
 
   constructor(private projectService: CurrentProjectService, private labelsService: LabelsService) {
@@ -30,19 +31,18 @@ export class LabelTreeComponent implements OnInit, OnDestroy {
       .subscribe(project => {
         if (project) {
           this.project = project;
-          /*this.labelsService.getLabels().then(value =>
-            this.annotationsFolder.files = value.map(label => ({id: label.id, name: label.name, icon: 'tag', active: false}))
-          );*/
+          this.userRole = this.projectService.findUserRole(project, JSON.parse(localStorage.getItem('currentSession$'))['user']['id']);
           this.labelsService.getLabelCategories().then(value =>
             this.annotationsFolder.files = value.map(label => ({id: label.id, name: label.name, icon: 'tag', active: false}))
           );
         }
       });
 
+    //TODO: Remove this section
     this.subscription.add(this.labelsService.newLabels$().subscribe(label => {
-      if (label) {
+      /*if (label) {
         this.annotationsFolder.files.push({id: label.id, name: label.name, icon: 'tag', active: false});
-      }
+      }*/
     }));
 
     this.subscription.add(this.labelsService.newLabelCategories$().subscribe(labelCategory => {
@@ -81,11 +81,11 @@ export class LabelTreeComponent implements OnInit, OnDestroy {
   }
 
   addNewLabel() {
-    this.labelsService.addLabel(JSON.parse(localStorage.getItem('currentSession$'))['user']['id'],'');
+    this.labelsService.addLabel(JSON.parse(localStorage.getItem('currentSession$'))['user']['id'],'', '');
   }
 
   addNewLabelCategory() {
-    this.labelsService.addLabelCategory(JSON.parse(localStorage.getItem('currentSession$'))['user']['id']);
+    this.labelsService.addLabelCategory(JSON.parse(localStorage.getItem('currentSession$'))['user']['id'], this.userRole);
     //TODO Remove this section
     //this.labelsService.addLabel('');
   }
diff --git a/web/src/app/models/label.model.ts b/web/src/app/models/label.model.ts
index 3b18803..127fdd7 100644
--- a/web/src/app/models/label.model.ts
+++ b/web/src/app/models/label.model.ts
@@ -5,5 +5,6 @@ export class LabelModel {
   name: string;
   projectId: string;
   authorId: string;
+  authorClass: string;
   series: SegmentModel[];
 }
diff --git a/web/src/app/models/labelcategory.model.ts b/web/src/app/models/labelcategory.model.ts
index c9294dd..ed1b601 100644
--- a/web/src/app/models/labelcategory.model.ts
+++ b/web/src/app/models/labelcategory.model.ts
@@ -6,5 +6,6 @@ export class LabelCategoryModel {
   name: string;
   projectId: string;
   authorId: string;
+  authorClass: string;
   labels: LabelModel[];
 }
diff --git a/web/src/app/models/member.model.ts b/web/src/app/models/member.model.ts
new file mode 100644
index 0000000..9603a90
--- /dev/null
+++ b/web/src/app/models/member.model.ts
@@ -0,0 +1,19 @@
+import { UserModel } from './user.model';
+
+export class MemberModel {
+  public name: string;
+  public status: boolean;
+  public members: UserModel[];
+  public searchStatus: boolean;
+  public emptyMemberStatus: boolean;
+  public type: string;
+
+  constructor(name: string, status: boolean, members: UserModel[], searchStatus: boolean, emptyMemberStatus: boolean, type: string) {
+    this.name = name;
+    this.status = status;
+    this.members = members;
+    this.searchStatus = searchStatus;
+    this.emptyMemberStatus = emptyMemberStatus;
+    this.type = type;
+  }
+}
diff --git a/web/src/app/models/project.model.ts b/web/src/app/models/project.model.ts
index 3223fd0..b7c3d6b 100644
--- a/web/src/app/models/project.model.ts
+++ b/web/src/app/models/project.model.ts
@@ -1,4 +1,5 @@
 import { DirectoryModel } from './directory.model';
+import { UserModel } from './user.model';
 
 export class ProjectModel {
   constructor(
@@ -6,7 +7,9 @@ export class ProjectModel {
     public title: string,
     public modified: Date,
     public singleMedia: boolean,
-    public ownerId?: string,
+    public supervisorIds: UserModel[],
+    public contributorIds: UserModel[],
+    public ownerId?: UserModel,
     public memberIds?: string[],
     public description?: string,
     public fileTree?: DirectoryModel,
diff --git a/web/src/app/models/segmentModel.ts b/web/src/app/models/segmentModel.ts
index 2fd0e63..b6bca6a 100644
--- a/web/src/app/models/segmentModel.ts
+++ b/web/src/app/models/segmentModel.ts
@@ -3,5 +3,6 @@ export class SegmentModel {
   start: number;
   end: number;
   authorId: string;
+  authorClass: string;
   labelId: string;
 }
diff --git a/web/src/app/projects/project-modal/project-modal.component.html b/web/src/app/projects/project-modal/project-modal.component.html
index 7293a0a..c430469 100644
--- a/web/src/app/projects/project-modal/project-modal.component.html
+++ b/web/src/app/projects/project-modal/project-modal.component.html
@@ -37,6 +37,69 @@ <h3 class="modal-title">New Project</h3>
         </clr-toggle-container>
       </div>
 
+      <div class="form-group">
+        <label for="members">Project Members</label>
+        <clr-control-helper>Add members to supervisor and contribute to the project</clr-control-helper>
+      </div>
+
+      <clr-tree-node>
+        <div>
+          <clr-icon [attr.shape]='supervisorModel.status ? "folder-open" : "folder"'></clr-icon>
+          <label>Supervisors</label>
+        </div>
+        <ng-template [(clrIfExpanded)]="supervisorModel.status">
+          <div>
+            <a *ngFor="let user of model.supervisorIds" class="label label-light-blue clickable" (click)="deselectUser(user, supervisorModel)">
+              {{user.username}}
+              <span class="badge">x</span>
+            </a>
+          </div>
+          <form class="search">
+            <label for="search_supervisor" class="width-max">
+              <input class="width-90" id="search_supervisor" type="text" placeholder="Search for users by username" [(ngModel)]="supervisorModel.name" [ngModelOptions]="{standalone: true}" (ngModelChange)="onSupervisorChange($event)">
+              <clr-icon shape="search"></clr-icon>
+            </label>
+          </form>
+          <div class="dropdown open overflow width-90"  *ngIf="supervisorModel.searchStatus !== undefined && !supervisorModel.searchStatus" [hidden]="supervisorModel.searchStatus">
+            <div class="dropdown-menu relative-position width-max">
+              <div *ngFor="let user of supervisorModel.members">
+                <div aria-label="Dropdown header" class="dropdown-item" (click)="selectUser(user, supervisorModel)">{{user.username}}</div>
+              </div>
+              <div class="dropdown-item" [hidden]="supervisorModel.emptyMemberStatus">No Users Found</div>
+            </div>
+          </div>
+        </ng-template>
+      </clr-tree-node>
+
+      <clr-tree-node>
+      <div>
+        <clr-icon [attr.shape]='contributorModel.status ? "folder-open" : "folder"'></clr-icon>
+        <label>Contributors</label>
+      </div>
+      <ng-template [(clrIfExpanded)]="contributorModel.status">
+        <div>
+          <a *ngFor="let user of model.contributorIds" class="label label-light-blue clickable" (click)="deselectUser(user, contributorModel)">
+            {{user.username}}
+            <span class="badge">x</span>
+          </a>
+        </div>
+        <form class="search">
+          <label for="search_contributor" class="width-max">
+            <input class="width-90" id="search_contributor" type="text" placeholder="Search for users by username" [(ngModel)]="contributorModel.name" [ngModelOptions]="{standalone: true}" (ngModelChange)="onContributorChange(this)">
+            <clr-icon shape="search"></clr-icon>
+          </label>
+        </form>
+        <div class="dropdown open overflow width-90"  *ngIf="contributorModel.searchStatus !== undefined && !contributorModel.searchStatus" [hidden]="contributorModel.searchStatus">
+          <div class="dropdown-menu relative-position width-max">
+            <div *ngFor="let user of contributorModel.members">
+              <div aria-label="Dropdown header" class="dropdown-item" (click)="selectUser(user, contributorModel)">{{user.username}}</div>
+            </div>
+            <div class="dropdown-item" [hidden]="contributorModel.emptyMemberStatus">No Users Found</div>
+          </div>
+        </div>
+      </ng-template>
+    </clr-tree-node>
+
       <div class="modal-footer">
         <button type="button" class="btn btn-outline" (click)="modalOpen = false">Cancel</button>
         <button type="submit" class="btn btn-success"  [disabled]="!projectForm.form.valid">Create</button>
diff --git a/web/src/app/projects/project-modal/project-modal.component.scss b/web/src/app/projects/project-modal/project-modal.component.scss
index 9f64c88..5200d8c 100644
--- a/web/src/app/projects/project-modal/project-modal.component.scss
+++ b/web/src/app/projects/project-modal/project-modal.component.scss
@@ -6,6 +6,26 @@
   margin-top: 1rem !important;
 }
 
+.width-max {
+  width: 100%;
+  max-width: 100%;
+}
+.relative-position {
+  position: relative;
+}
+
+.overflow {
+  overflow-y: visible;
+}
+
+.width-90 {
+  width: 94%;
+}
+
+.width-inherit {
+  width: inherit;
+}
+
 .ng-invalid:not(form)  {
   border-left: 5px solid #a94442; /* red */
 }
diff --git a/web/src/app/projects/project-modal/project-modal.component.ts b/web/src/app/projects/project-modal/project-modal.component.ts
index 20ad27b..7d0da5a 100644
--- a/web/src/app/projects/project-modal/project-modal.component.ts
+++ b/web/src/app/projects/project-modal/project-modal.component.ts
@@ -1,10 +1,13 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
-
+import _ from "lodash";
 import { ProjectModel } from '../../models/project.model';
 import { ProjectsService } from '../projects.service';
 import { Subscription } from 'rxjs';
+import { AuthService } from '../../auth/auth.service';
+import { UserModel } from '../../models/user.model';
+import { MemberModel } from '../../models/member.model';
 
 
 @Component({
@@ -14,7 +17,9 @@ import { Subscription } from 'rxjs';
 })
 export class ProjectModalComponent implements OnInit, OnDestroy {
   model;
-  singleMedia = true;
+  supervisorModel: MemberModel;
+  contributorModel: MemberModel;
+  singleMedia: boolean;
 
   modalOpen = false;
   private submitted = false;
@@ -22,11 +27,15 @@ export class ProjectModalComponent implements OnInit, OnDestroy {
 
   constructor(
     private projectsService: ProjectsService,
-    private router: Router) {
+    private router: Router,
+    private authService: AuthService) {
   }
 
   ngOnInit() {
-    this.model = new ProjectModel('', '', new Date(), true);
+    this.model = new ProjectModel('', '', new Date(), true, [], []);
+    this.supervisorModel = new MemberModel('', false, [], true, true, 'supervisor');
+    this.contributorModel = new MemberModel('', false, [], true, true, 'contributor');
+    this.singleMedia = true;
   }
 
   onSubmit(form: FormGroup) {
@@ -51,4 +60,49 @@ export class ProjectModalComponent implements OnInit, OnDestroy {
       this.subscription.unsubscribe();
     }
   }
+
+  onSupervisorChange(temp) {
+    console.log(this);
+    this.handleUserQuery(this.supervisorModel);
+  }
+
+  handleUserQuery(model: MemberModel) {
+    if(model.name === '') {
+      model.members = [];
+      model.searchStatus = true;
+      model.emptyMemberStatus = true;
+    } else {
+      this.authService.getUsersByUsername(model.name).subscribe( members => {
+        model.members = members;
+        model.searchStatus = false;
+        model.emptyMemberStatus = !(members.length === 0);
+      });
+    }
+  }
+
+
+  onContributorChange(temp) {
+    this.handleUserQuery(this.contributorModel);
+  }
+
+  selectUser(user: UserModel, memberModel: MemberModel) {
+    if(memberModel.type === 'supervisor') {
+      if(!_.find(this.model.supervisorIds, { id : user.id}))
+        this.model.supervisorIds.push(user);
+    } else {
+      if(!_.find(this.model.contributorIds, { id : user.id}))
+        this.model.contributorIds.push(user);
+    }
+    memberModel.name = '';
+    memberModel.searchStatus = true;
+    memberModel.emptyMemberStatus = true;
+  }
+
+  deselectUser(user: UserModel, memberModel: MemberModel) {
+    if(memberModel.type === 'supervisor') {
+      this.model.supervisorIds = this.model.supervisorIds.filter(function(e) { return e !== user });
+    } else {
+      this.model.contributorIds = this.model.contributorIds.filter(function(e) { return e !== user });
+    }
+  }
 }
diff --git a/web/src/app/projects/projects.component.html b/web/src/app/projects/projects.component.html
index 90b05b3..5cc3e10 100644
--- a/web/src/app/projects/projects.component.html
+++ b/web/src/app/projects/projects.component.html
@@ -4,8 +4,8 @@
 <!--<span class="spinner spinner-md">Loading...</span>-->
 <!--</div>-->
 <div *ngIf="!inviteMembers">
-  <button class="btn btn-outline" (click)="isDatagridView = !isDatagridView">Toggle
-    view: {{isDatagridView ? 'Datagrid' : 'Cards'}}</button>
+  <!--<button class="btn btn-outline" (click)="isDatagridView = !isDatagridView">Toggle
+    view: {{isDatagridView ? 'Datagrid' : 'Cards'}}</button>-->
 
   <clr-datagrid *ngIf="isDatagridView">
     <clr-dg-column>Title</clr-dg-column>
@@ -33,7 +33,7 @@
 
   <div *ngIf="!isDatagridView">
     <div class="clr-row">
-      <div class="clr-col" *ngFor="let project of projects">
+      <div class="clr-col max-width-35" *ngFor="let project of projects">
         <div class="card">
           <div class="card-header">
             <span>{{project.title}}</span><span><button (click)="onDelete(project.id)" class="btn btn-link right"><clr-icon shape="trash"></clr-icon></button></span>
@@ -45,13 +45,16 @@
             <div class="card-text">
               <strong>Description:</strong> {{project.description}} <br>
               <strong>Modified:</strong> {{project.modified}} <br>
-              <strong>OwnerId:</strong> {{project.ownerId}} <br>
-              <strong>MemberIds:</strong> {{project.memberIds.join(", ")}}
+              <strong>OwnerId:</strong> <span class="label label-info left-margin-1">{{project.ownerId.username}}</span><br>
+              <strong>SupervisorIds:</strong> <span *ngFor="let user of project.supervisorIds; let i = index" [attr.data-index]="i" [ngClass]="i == 0? 'label label-info left-margin-1': 'label label-info'">{{user.username}}</span><br>
+              <strong>ContributorIds:</strong><span *ngFor="let user of project.contributorIds; let i = index" [attr.data-index]="i" [ngClass]="i == 0? 'label label-info left-margin-1': 'label label-info'">{{user.username}}</span>
+              <!--<strong>SupervisorIds:</strong> {{project.supervisorIds.join(", ")}} <br>
+              <strong>ContributorIds:</strong> {{project.contributorIds.join(", ")}}-->
             </div>
           </div>
           <div class="card-footer">
             <button class="btn btn-sm btn-primary-outline" routerLink="/editor/{{project.id}}">Open Project</button>
-            <button class="btn btn-sm btn-link" (click)="onInvite(project.id)">Invite Users</button>
+            <button disabled class="btn btn-sm btn-link" (click)="onInvite(project.id)">Invite Users</button>
           </div>
         </div>
       </div>
diff --git a/web/src/app/projects/projects.component.scss b/web/src/app/projects/projects.component.scss
index 317e406..0546b99 100644
--- a/web/src/app/projects/projects.component.scss
+++ b/web/src/app/projects/projects.component.scss
@@ -24,3 +24,11 @@
 .top-margin {
   margin-top: 1em;
 }
+
+.max-width-35 {
+  max-width: 35%;
+}
+
+.left-margin-1 {
+  margin-left: 1em;
+}
diff --git a/web/src/app/projects/projects.component.ts b/web/src/app/projects/projects.component.ts
index c1f2f78..c72e00a 100644
--- a/web/src/app/projects/projects.component.ts
+++ b/web/src/app/projects/projects.component.ts
@@ -41,7 +41,6 @@ export class ProjectsComponent implements OnInit {
     });
     this.projectsService.getMembers(this.selectedProject).subscribe( members => {
       this.members = members;
-      console.log('Members : ', this.members);
       this.inviteMembers = true;
     });
   }