diff --git a/src/app/components/job-group/job-group.component.html b/src/app/components/job-group/job-group.component.html
index b003d37..bd4e01d 100644
--- a/src/app/components/job-group/job-group.component.html
+++ b/src/app/components/job-group/job-group.component.html
@@ -1,35 +1,66 @@
+<div style="background-color: aliceblue; min-height: 150px;">
+  <div *ngIf="group_count == 0 ">
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          You do not have any group currently
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-button size="small" shape="round" expand="block">Create a group</ion-button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
 
-  <ion-grid>
-    <ion-row>
-      <ion-col>
-        You do not have any group currently
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col>
-       <ion-button size="small" shape="round" expand="block">Create a group</ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <div *ngIf="group_count > 0 ">
+
+      <div style="width: 100%; margin-bottom: 10px; height: 35px;">
+        <div style="float: left; width: 75%; padding-right: 10px; ">
+          <ion-select label="Select Group"
+                      [(ngModel)]='job_group'
+                      (ionChange)="refreshList()"
+                      style=" background-color: #3dc2ff;
+                      border-radius: 10px; font-size: 12px; height: 35px;"
+                      placeholder="Select Group"
+                      label-placement="stacked">
+            <ion-select-option value="" selected="true">Select Group</ion-select-option>
+            <ion-select-option *ngFor="let item of jobGroupDataResult"
+                               value="{{item.group_id}}">{{item.group_name}}</ion-select-option>
+          </ion-select>
+        </div>
+        <div style="float: right; width: 20%;">
+          <ion-button
+                  style="height: 35px;"
+                  size="small" >+Group</ion-button>
+        </div>
+      </div>
+
+      <div *ngIf="job_group> 0 && group_member_count > 0" style="margin-top: 20px; padding: 5px;">
+        <ion-button size="small" shape="round" expand="block">Send Task to Group</ion-button>
+      </div>
+
+      <div>
+        <ion-list>
+
+          <ion-item-sliding *ngFor="let item of jobGroupListFilterdData">
+            <ion-item style="display: inline-flex;">
+              <div>{{item.firstname}} {{item.lastname}}</div>
+              <div>{{item.email}} </div>
+            </ion-item>
+
+            <ion-item-options>
+              <ion-item-option color="danger">Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+        </ion-list>
+      </div>
+
+  </div>
 
 
-  <ion-list>
-    <ion-item>
-      <ion-select label="Select Group" [(ngModel)]='job_group' (ionChange)="refreshList()" placeholder="Select Group"  label-placement="stacked">
-        <ion-select-option value="" selected="true">Select Group</ion-select-option>
-        <ion-select-option *ngFor="let item of jobGroupDataResult" value="{{item.group_id}}">{{item.group_name}}</ion-select-option>
-      </ion-select>
-    </ion-item>
+</div>
 
-      <ion-item-sliding *ngFor="let item of jobGroupListFilterdData">
-        <ion-item style="display: inline-flex;">
-          <div>{{item.firstname}} {{item.lastname}}</div>
-          <div>{{item.email}} </div>
-        </ion-item>
 
-        <ion-item-options>
-          <ion-item-option color="danger">Delete</ion-item-option>
-        </ion-item-options>
-      </ion-item-sliding>
-
-  </ion-list>
diff --git a/src/app/components/job-group/job-group.component.ts b/src/app/components/job-group/job-group.component.ts
index eb6cb0f..9386723 100644
--- a/src/app/components/job-group/job-group.component.ts
+++ b/src/app/components/job-group/job-group.component.ts
@@ -21,23 +21,30 @@ export class JobGroupComponent implements OnInit {
   jobGroupDataResult: any;
   jobGroupListDataResult: any;
 
+  group_count:number = 0;
+    group_member_count:number = 0;
+
   ngOnInit() {
     this.jobgroupDataService.getjobGroupData();
-    this.jobGroupDataTotalResult =   this.jobgroupDataService.jobGroupDataTotalResult;
-    this.jobGroupDataResult =   this.jobgroupDataService.jobGroupDataResult;
-    this.jobGroupListDataResult =   this.jobgroupDataService.jobGroupListDataResult;
+    this.refreshData();
     setInterval(()=>{
-          this.jobGroupDataTotalResult =   this.jobgroupDataService.jobGroupDataTotalResult;
-          this.jobGroupDataResult =   this.jobgroupDataService.jobGroupDataResult;
-          this.jobGroupListDataResult =   this.jobgroupDataService.jobGroupListDataResult;
-          //debugger;
+         this.refreshData();
         },
         3000
         );
   }
+
+  refreshData(){
+      this.jobGroupDataTotalResult =   this.jobgroupDataService.jobGroupDataTotalResult;
+      this.jobGroupDataResult =   this.jobgroupDataService.jobGroupDataResult;
+      this.jobGroupListDataResult =   this.jobgroupDataService.jobGroupListDataResult;
+      this.group_count =  this.jobGroupDataResult?.length;
+  }
     jobGroupListFilterdData:any;
     refreshList(){
+        this.group_member_count= 0;
         this.jobGroupListFilterdData = this.jobGroupListDataResult.filter(k=>  k.group_id ==  this.job_group);
+        this.group_member_count= this.jobGroupListFilterdData.length;
     }
 
 }