diff --git a/package-lock.json b/package-lock.json
index cd28c11..838552e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4218,7 +4218,8 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -4227,7 +4228,8 @@
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4330,7 +4332,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4340,6 +4343,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4365,6 +4369,7 @@
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4381,6 +4386,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4453,7 +4459,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4463,6 +4470,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4568,6 +4576,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -10210,9 +10219,9 @@
       "integrity": "sha1-Wn+KIKcRiM+edaLP6OsYLekNrzs="
     },
     "sweetalert2": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.0.1.tgz",
-      "integrity": "sha512-N88+meCLt1t/5dQEAvBs31j6qcEVucE/bwMj8JiuPsMRvXhnWKMbvLAFPGNO7a/LECRVjT6o0/mccmIVZqQZSQ=="
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.2.6.tgz",
+      "integrity": "sha512-F14KlRBBJr7Hl+WWCYnBZR8heUNTBQY9nfhNWlrocnj5equ7lkWZC8BfxHXX699D8tb/LrHaEWtpIhWVMgoacA=="
     },
     "symbol-observable": {
       "version": "1.2.0",
diff --git a/src/app/services/user/user.service.ts b/src/app/services/user/user.service.ts
index 08e0858..67d7d84 100644
--- a/src/app/services/user/user.service.ts
+++ b/src/app/services/user/user.service.ts
@@ -27,4 +27,10 @@ export class UserService {
     return this.http.get(id);
   }
 
+
+  getUsers() {
+    return this.http.get(this.API_URLs.users);
+  }
+
+
 }
diff --git a/src/app/users/create/create.component.css b/src/app/users/create-user/create-user.component.css
similarity index 100%
rename from src/app/users/create/create.component.css
rename to src/app/users/create-user/create-user.component.css
diff --git a/src/app/users/create/create.component.html b/src/app/users/create-user/create-user.component.html
similarity index 100%
rename from src/app/users/create/create.component.html
rename to src/app/users/create-user/create-user.component.html
diff --git a/src/app/users/edit/edit.component.spec.ts b/src/app/users/create-user/create-user.component.spec.ts
similarity index 54%
rename from src/app/users/edit/edit.component.spec.ts
rename to src/app/users/create-user/create-user.component.spec.ts
index 34ef921..0489eff 100644
--- a/src/app/users/edit/edit.component.spec.ts
+++ b/src/app/users/create-user/create-user.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { EditComponent } from './edit.component';
+import { CreateUserComponent } from './create-user.component';
 
-describe('EditComponent', () => {
-  let component: EditComponent;
-  let fixture: ComponentFixture<EditComponent>;
+describe('CreateUserComponent', () => {
+  let component: CreateUserComponent;
+  let fixture: ComponentFixture<CreateUserComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ EditComponent ]
+      declarations: [ CreateUserComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(EditComponent);
+    fixture = TestBed.createComponent(CreateUserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/users/create/create.component.ts b/src/app/users/create-user/create-user.component.ts
similarity index 52%
rename from src/app/users/create/create.component.ts
rename to src/app/users/create-user/create-user.component.ts
index 3fca5d8..dc8bd32 100644
--- a/src/app/users/create/create.component.ts
+++ b/src/app/users/create-user/create-user.component.ts
@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { ProfileService } from '../../services/profile/profile.service';
+import { ProfileService } from 'src/app/services/profile/profile.service';
 
 @Component({
-  selector: 'app-create',
-  templateUrl: './create.component.html',
-  styleUrls: ['./create.component.css']
+  selector: 'app-create-user',
+  templateUrl: './create-user.component.html',
+  styleUrls: ['./create-user.component.css']
 })
-export class CreateComponent implements OnInit {
+export class CreateUserComponent implements OnInit {
 
   constructor(
     private profileServ: ProfileService
@@ -18,4 +18,5 @@ export class CreateComponent implements OnInit {
     const data = form.value;
     const profileRes = await this.profileServ.newUser(data);
   }
+
 }
diff --git a/src/app/users/edit/edit.component.css b/src/app/users/edit-user/edit-user.component.css
similarity index 100%
rename from src/app/users/edit/edit.component.css
rename to src/app/users/edit-user/edit-user.component.css
diff --git a/src/app/users/edit/edit.component.html b/src/app/users/edit-user/edit-user.component.html
similarity index 100%
rename from src/app/users/edit/edit.component.html
rename to src/app/users/edit-user/edit-user.component.html
diff --git a/src/app/users/create/create.component.spec.ts b/src/app/users/edit-user/edit-user.component.spec.ts
similarity index 55%
rename from src/app/users/create/create.component.spec.ts
rename to src/app/users/edit-user/edit-user.component.spec.ts
index 6413b6a..3702bd7 100644
--- a/src/app/users/create/create.component.spec.ts
+++ b/src/app/users/edit-user/edit-user.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CreateComponent } from './create.component';
+import { EditUserComponent } from './edit-user.component';
 
-describe('CreateComponent', () => {
-  let component: CreateComponent;
-  let fixture: ComponentFixture<CreateComponent>;
+describe('EditUserComponent', () => {
+  let component: EditUserComponent;
+  let fixture: ComponentFixture<EditUserComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CreateComponent ]
+      declarations: [ EditUserComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CreateComponent);
+    fixture = TestBed.createComponent(EditUserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/users/edit/edit.component.ts b/src/app/users/edit-user/edit-user.component.ts
similarity index 70%
rename from src/app/users/edit/edit.component.ts
rename to src/app/users/edit-user/edit-user.component.ts
index f1cbddd..2e4328f 100644
--- a/src/app/users/edit/edit.component.ts
+++ b/src/app/users/edit-user/edit-user.component.ts
@@ -1,13 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { ProfileService } from '../../services/profile/profile.service';
+import { ProfileService } from 'src/app/services/profile/profile.service';
 
 @Component({
-  selector: 'app-edit',
-  templateUrl: './edit.component.html',
-  styleUrls: ['./edit.component.css']
+  selector: 'app-edit-user',
+  templateUrl: './edit-user.component.html',
+  styleUrls: ['./edit-user.component.css']
 })
-export class EditComponent implements OnInit {
+export class EditUserComponent implements OnInit {
+
   EditProfile: any;
 
   constructor(
@@ -31,5 +32,4 @@ export class EditComponent implements OnInit {
   }
   ngOnInit() {
   }
-
 }
diff --git a/src/app/users/list/list.component.html b/src/app/users/list/list.component.html
deleted file mode 100644
index 2335143..0000000
--- a/src/app/users/list/list.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<div fxLayout="column" fxFlex="100%" style="margin-top: 50px;">
-  <section fxLayout="column" fxFlexfill>
-    <mat-form-field class="filter-field">
-      <input matInput [formControl]="searchCtrl" placeholder="Filter">
-    </mat-form-field>
-    <table mat-table [dataSource]="categoryList" class="mat-elevation-z8">
-      <!-- S No Column -->
-      <ng-container matColumnDef="sno">
-        <th mat-header-cell *matHeaderCellDef> S No </th>
-        <td mat-cell *matCellDef="let element; let i = index;">{{i + 1}}</td>
-      </ng-container>
-
-      <!-- Name Column -->
-      <ng-container matColumnDef="title">
-        <th mat-header-cell *matHeaderCellDef> Email-Id </th>
-        <td mat-cell *matCellDef="let element">{{element.title}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="caseType">
-        <th mat-header-cell *matHeaderCellDef> Role </th>
-        <td mat-cell *matCellDef="let element">{{element.caseType}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="caseSeverity">
-        <th mat-header-cell *matHeaderCellDef> Status </th>
-        <td mat-cell *matCellDef="let element">{{element.caseSeverity}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef> Action </th>
-        <td mat-cell *matCellDef="let element">
-          <button  mat-icon-button color="primary">
-            <mat-icon [routerLink]="[element._id, 'edit' ]">create</mat-icon>
-          </button>
-          <button  mat-icon-button color="danger">
-            <mat-icon (click)="deleteUser($event)" >Delete</mat-icon>
-          </button>
-        </td>
-      </ng-container>
-
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-
-    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
-
-  </section>
-
-<div class="bottom-create-button">
-    <button mat-fab color="accent" routerLink="new">
-      <mat-icon>add</mat-icon>
-    </button>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/users/list/list.component.ts b/src/app/users/list/list.component.ts
deleted file mode 100644
index 9c9741f..0000000
--- a/src/app/users/list/list.component.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
-import { FormControl } from '@angular/forms';
-import Swal from 'sweetalert2';
-import { ProfileService } from '../../services/profile/profile.service';
-
-@Component({
-  selector: 'app-list',
-  templateUrl: './list.component.html',
-  styleUrls: ['./list.component.css']
-})
-export class ListComponent implements OnInit {
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
-  dataLength: any;
-  data: any;
-  searchCtrl = new FormControl('');
-  categoryList: MatTableDataSource<any>;
-  displayedColumns: string[] = ['sno', 'title', 'caseType', 'caseSeverity', 'action'];
-
-  async getCategories() {
-    try {
-      this.data = await this.profileServ.getUser();
-      this.categoryList = new MatTableDataSource(this.data);
-      this.categoryList.paginator = this.paginator;
-      this.categoryList.sort = this.sort;
-      this.dataLength = this.categoryList.data.length;
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  constructor(
-    private profileServ: ProfileService,
-  ) {
-
-    this.searchCtrl.valueChanges.subscribe(this.applyFilter.bind(this));
-    this.getCategories();
-
-  }
-
-  applyFilter(value = '') {
-    const filterValue = value.trim().toLowerCase();
-    this.categoryList.filter = filterValue;
-  }
-
-  async deleteUser(inputEle) {
-    const id = inputEle._id;
-    const isOk = await Swal.fire({
-      title: 'Are you sure?',
-      text: 'You won\'t be able to revert this!',
-      type: 'warning',
-      showCancelButton: true,
-      confirmButtonColor: '#3085d6',
-      cancelButtonColor: '#d33',
-      confirmButtonText: 'Yes, delete it!'
-    });
-
-    if (!isOk.value) {
-      return;
-    }
-    // await this.ticketlistServ.deleteCategory(id);
-    const index = this.categoryList.data.indexOf(inputEle);
-    this.categoryList.data.splice(index, 1);
-    this.categoryList = new MatTableDataSource<any>(this.categoryList.filteredData);
-    this.categoryList.paginator = this.paginator;
-  }
-
-  ngOnInit() {
-
-  }
-}
diff --git a/src/app/users/users-routing.module.ts b/src/app/users/users-routing.module.ts
index 7d62180..40fb862 100644
--- a/src/app/users/users-routing.module.ts
+++ b/src/app/users/users-routing.module.ts
@@ -1,21 +1,21 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { CreateComponent } from './create/create.component';
-import { EditComponent } from './edit/edit.component';
-import { ListComponent } from './list/list.component';
+import { UsersComponent } from './users/users.component';
+import { CreateUserComponent } from './create-user/create-user.component';
+import { EditUserComponent } from './edit-user/edit-user.component';
 
 const routes: Routes = [
     {
-        path: 'new',
-        component: CreateComponent
+        path: '',
+        component: UsersComponent
     },
     {
-        path: ':id/edit',
-        component: EditComponent
+        path: 'new',
+        component: CreateUserComponent
     },
     {
-        path: '',
-        component: ListComponent
+        path: ':id/edit',
+        component: EditUserComponent
     }
 ];
 
diff --git a/src/app/users/users.module.ts b/src/app/users/users.module.ts
index 59a90f7..0834d00 100644
--- a/src/app/users/users.module.ts
+++ b/src/app/users/users.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CreateComponent } from './create/create.component';
-import { ListComponent } from './list/list.component';
-import { EditComponent } from './edit/edit.component';
 import { UsersRoutingModule } from './users-routing.module';
 import { MatComponentsModule } from '../mat-components/mat-components.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { UsersComponent } from './users/users.component';
+import { EditUserComponent } from './edit-user/edit-user.component';
+import { CreateUserComponent } from './create-user/create-user.component';
 
 @NgModule({
   imports: [
@@ -18,9 +18,9 @@ import { FlexLayoutModule } from '@angular/flex-layout';
     FlexLayoutModule
   ],
   declarations: [
-    CreateComponent,
-    ListComponent,
-    EditComponent
+    UsersComponent,
+    EditUserComponent,
+    CreateUserComponent
   ]
 })
 export class UsersModule { }
diff --git a/src/app/users/list/list.component.css b/src/app/users/users/users.component.css
similarity index 78%
rename from src/app/users/list/list.component.css
rename to src/app/users/users/users.component.css
index 050a452..dfbf762 100644
--- a/src/app/users/list/list.component.css
+++ b/src/app/users/users/users.component.css
@@ -5,4 +5,8 @@
     position: fixed;
     bottom: 1em;
     right: 1em;
+}
+
+.mat-table {
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/app/users/users/users.component.html b/src/app/users/users/users.component.html
new file mode 100644
index 0000000..d548124
--- /dev/null
+++ b/src/app/users/users/users.component.html
@@ -0,0 +1,49 @@
+<div fxLayout="column" fxFlex="100%" style="margin-top: 50px;">
+  <section fxLayout="column" fxFlexfill>
+    <!-- <mat-form-field class="filter-field">
+      <input matInput [formControl]="searchCtrl" placeholder="Filter">
+    </mat-form-field> -->
+
+    <!-- <table mat-table class="mat-elevation-z8">
+    </table> -->
+    <mat-table style="display: none">
+      <mat-header-row *matHeaderRowDef="[]"></mat-header-row>
+    </mat-table>
+
+    <p *ngIf="users.length === 0">No Users Found</p>
+
+    <table class="mat-elevation-z2 mat-table" *ngIf="users.length > 0">
+      <thead>
+        <tr class="mat-header-row">
+          <th class="mat-header-cell">S No</th>
+          <th class="mat-header-cell">Name</th>
+          <th class="mat-header-cell">Email</th>
+          <th class="mat-header-cell">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="mat-row" *ngFor="let user of users; index as i; trackBy: trackByFn">
+          <td class="mat-cell">{{i + 1}}</td>
+          <td class="mat-cell">{{user.firstName + ' ' + user.lastName}}</td>
+          <td class="mat-cell">{{user.email}}</td>
+          <td class="mat-cell">
+            <button color="primary" mat-icon-button>
+              <mat-icon aria-label="Edit">edit</mat-icon>
+            </button>
+            <button color="warn" mat-icon-button>
+              <mat-icon aria-label="Delete">delete</mat-icon>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+
+  </section>
+
+  <div class="bottom-create-button">
+    <button mat-fab color="accent" routerLink="new">
+      <mat-icon>add</mat-icon>
+    </button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/users/list/list.component.spec.ts b/src/app/users/users/users.component.spec.ts
similarity index 57%
rename from src/app/users/list/list.component.spec.ts
rename to src/app/users/users/users.component.spec.ts
index beacd15..909b5ba 100644
--- a/src/app/users/list/list.component.spec.ts
+++ b/src/app/users/users/users.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ListComponent } from './list.component';
+import { UsersComponent } from './users.component';
 
-describe('ListComponent', () => {
-  let component: ListComponent;
-  let fixture: ComponentFixture<ListComponent>;
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ListComponent ]
+      declarations: [ UsersComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ListComponent);
+    fixture = TestBed.createComponent(UsersComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/users/users/users.component.ts b/src/app/users/users/users.component.ts
new file mode 100644
index 0000000..38c6dab
--- /dev/null
+++ b/src/app/users/users/users.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { UserService } from 'src/app/services/user/user.service';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.css']
+})
+export class UsersComponent implements OnInit {
+
+  users: any = [];
+
+  constructor(
+    private userServ: UserService
+  ) {
+    this.getUserList();
+  }
+
+  trackByFn(index, item) {
+    return item.id; // unique id corresponding to the item
+  }
+
+  getUserList() {
+    this.userServ.getUsers()
+      .subscribe(
+        data => {
+          this.users = data;
+        }
+      )
+  }
+
+  ngOnInit() {
+
+  }
+
+}