diff --git a/src/app/components/job-details/job-details.component.html b/src/app/components/job-details/job-details.component.html
new file mode 100644
index 0000000..9534c8c
--- /dev/null
+++ b/src/app/components/job-details/job-details.component.html
@@ -0,0 +1,21 @@
+<div style="padding: 13px; width: 100%;" class="job-detail">
+  <ion-label class="head_text">{{jobData.offer_code}}</ion-label>
+  <div class="mentor">
+    <div class="left">
+      <div class="bg_image men_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+jobData.job_uid+')'"></div>
+      <div style="margin-left: 10px;">
+        <ion-label class="bold" style="color: red;">Expires</ion-label>
+        <ion-label class="grey">{{jobData.delivery_date |date}}</ion-label>
+      </div>
+    </div>
+    <!--        <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>-->
+  </div>
+
+  <ion-label class="head_text">Description</ion-label>
+  <ion-label class="description">{{jobData.job_description}}
+  </ion-label>
+
+  <ion-label class="head_text">Delivery Details</ion-label>
+  <ion-label class="description">{{jobData.description}}
+  </ion-label>
+</div>
diff --git a/src/app/components/job-details/job-details.component.scss b/src/app/components/job-details/job-details.component.scss
new file mode 100644
index 0000000..4160592
--- /dev/null
+++ b/src/app/components/job-details/job-details.component.scss
@@ -0,0 +1,50 @@
+.job-detail {
+  background-color: #f2f6fa;
+  border-radius: 10px;
+
+  margin-top: 10px;
+
+  .head_text {
+    font-size: 16px;
+    font-family: 'semi-bold';
+    margin-bottom: 10px;
+  }
+
+  .mentor {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .left {
+      display: flex;
+      font-size: 14px;
+
+      .men_image {
+        height: 50px;
+        width: 50px;
+        border-radius: 100%;
+      }
+
+      .bold {
+        font-family: 'semi-bold';
+      }
+
+      .grey {
+        color: grey;
+        font-size: 14px;
+      }
+    }
+
+    ion-icon {
+      font-size: 25px;
+    }
+  }
+
+  .description {
+    color: grey;
+    margin-bottom: 5px;
+    margin-left: 10px;
+  }
+}
+
diff --git a/src/app/components/job-details/job-details.component.spec.ts b/src/app/components/job-details/job-details.component.spec.ts
new file mode 100644
index 0000000..9900a99
--- /dev/null
+++ b/src/app/components/job-details/job-details.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { JobDetailsComponent } from './job-details.component';
+
+describe('JobDetailsComponent', () => {
+  let component: JobDetailsComponent;
+  let fixture: ComponentFixture<JobDetailsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ JobDetailsComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(JobDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/job-details/job-details.component.ts b/src/app/components/job-details/job-details.component.ts
new file mode 100644
index 0000000..5850248
--- /dev/null
+++ b/src/app/components/job-details/job-details.component.ts
@@ -0,0 +1,28 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Router} from "@angular/router";
+import {SessionDataProviderService} from "../../store/session-data-provider.service";
+
+@Component({
+  selector: 'app-job-details',
+  templateUrl: './job-details.component.html',
+  styleUrls: ['./job-details.component.scss'],
+})
+export class JobDetailsComponent implements OnInit {
+  @Input('jobData') jobData:any;
+  session_image_server:string='';
+  curr_session:string='';
+  constructor(private router: Router, public sessionDataProviderService: SessionDataProviderService) {
+   // debugger;
+    //this.jobData  =  this.router.getCurrentNavigation().extras.state;
+   // if (this.jobData==undefined){
+   //   return;
+   // }
+  }
+
+  ngOnInit() {
+    console.log("jobData => ", this.jobData);
+    this.session_image_server = this.sessionDataProviderService.session_image_server;
+    this.curr_session=this.sessionDataProviderService.session;
+  }
+
+}
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index c4ed679..2a98abc 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -28,7 +28,7 @@
         </div>
         <div class="right">
 <!--          <ion-icon name="notifications-outline" (click)="onNotification()"></ion-icon>-->
-          <ion-icon name="help-circle-outline"  (click)="onHelp()"></ion-icon>
+          <ion-icon name="help-circle-outline" size="medium" (click)="onHelp()"></ion-icon>
         </div>
       </div>
     </ion-toolbar>
diff --git a/src/app/pages/jobactive/jobactive.module.ts b/src/app/pages/jobactive/jobactive.module.ts
index 1e338d5..b49b87e 100644
--- a/src/app/pages/jobactive/jobactive.module.ts
+++ b/src/app/pages/jobactive/jobactive.module.ts
@@ -8,6 +8,7 @@ import { JobactivePageRoutingModule } from './jobactive-routing.module';
 
 import { JobactivePage } from './jobactive.page';
 import {TaskactivitiesComponent} from "../../components/taskactivities/taskactivities.component";
+import {JobDetailsComponent} from "../../components/job-details/job-details.component";
 
 @NgModule({
   imports: [
@@ -16,6 +17,6 @@ import {TaskactivitiesComponent} from "../../components/taskactivities/taskactiv
     IonicModule,
     JobactivePageRoutingModule
   ],
-  declarations: [JobactivePage,TaskactivitiesComponent]
+  declarations: [JobactivePage,TaskactivitiesComponent,JobDetailsComponent]
 })
 export class JobactivePageModule {}
diff --git a/src/app/pages/jobactive/jobactive.page.html b/src/app/pages/jobactive/jobactive.page.html
index 3fb022e..21feb91 100644
--- a/src/app/pages/jobactive/jobactive.page.html
+++ b/src/app/pages/jobactive/jobactive.page.html
@@ -91,6 +91,9 @@
           <ion-segment-button value="message">
               <ion-label>Task Updates</ion-label>
           </ion-segment-button>
+          <ion-segment-button value="delivery">
+              <ion-label>Details</ion-label>
+          </ion-segment-button>
           <ion-segment-button value="activities">
               <ion-label>Activities</ion-label>
           </ion-segment-button>
@@ -99,7 +102,9 @@
         <div *ngIf="tabs =='activities'" class="lesson">
 <!--            <app-taskactivities [jobData]="jobData"></app-taskactivities>-->
         </div>
-
+        <div *ngIf="tabs =='delivery'" class="about">
+            <app-job-details  [jobData]="jobData"></app-job-details>
+        </div>
 
         <div *ngIf="tabs =='message'" class="lesson">
             <ion-card>
diff --git a/src/app/pages/jobactive/jobactive.page.ts b/src/app/pages/jobactive/jobactive.page.ts
index 73a3fd9..6b04b82 100644
--- a/src/app/pages/jobactive/jobactive.page.ts
+++ b/src/app/pages/jobactive/jobactive.page.ts
@@ -28,6 +28,7 @@ export class JobactivePage implements OnInit {
   ) {
     this.jobData  =  this.router.getCurrentNavigation().extras.state;
     this.item_banner = this.jobData.banner;
+    //debugger;
   }
 
 
diff --git a/src/app/pages/jobpastdue/jobpastdue.module.ts b/src/app/pages/jobpastdue/jobpastdue.module.ts
index 9f9bb2e..48b9dca 100644
--- a/src/app/pages/jobpastdue/jobpastdue.module.ts
+++ b/src/app/pages/jobpastdue/jobpastdue.module.ts
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { JobpastduePageRoutingModule } from './jobpastdue-routing.module';
 import { JobpastduePage } from './jobpastdue.page';
 import {TaskactivitiesComponent} from "../../components/taskactivities/taskactivities.component";
+import {JobDetailsComponent} from "../../components/job-details/job-details.component";
 
 @NgModule({
   imports: [
@@ -15,6 +16,6 @@ import {TaskactivitiesComponent} from "../../components/taskactivities/taskactiv
     IonicModule,
     JobpastduePageRoutingModule
   ],
-  declarations: [JobpastduePage,TaskactivitiesComponent]
+  declarations: [JobpastduePage,TaskactivitiesComponent,JobDetailsComponent]
 })
 export class JobpastduePageModule {}
diff --git a/src/app/pages/jobpastdue/jobpastdue.page.html b/src/app/pages/jobpastdue/jobpastdue.page.html
index f74c53f..b1c111b 100644
--- a/src/app/pages/jobpastdue/jobpastdue.page.html
+++ b/src/app/pages/jobpastdue/jobpastdue.page.html
@@ -53,17 +53,19 @@
       </div>
 
         <ion-card  style="background-color: #ebebf8; font-weight: bolder; color:darkred">
-            <ion-card-content style="padding: 5px;">
+        <ion-grid>
+            <ion-row>
+                <ion-col><ion-button color="secondary" size="small" shape="round" expand="block" fill="solid" (click)="extendJobDueDate()">Extend Date</ion-button></ion-col>
+                <ion-col></ion-col>
+                <ion-col> <ion-button color="danger" size="small" shape="round" expand="block" fill="solid" (click)="cancelThisJob()">Cancel Task</ion-button></ion-col>
+            </ion-row>
+        </ion-grid>
+
+         <ion-card-content style="padding: 5px; font-size: 14px; text-align: center;">
           This task is already past the due date. You can extend the timeline or cancel the job.
         </ion-card-content>
 
-        <ion-grid>
-          <ion-row>
-            <ion-col><ion-button color="secondary" size="small" shape="round" expand="block" fill="solid" (click)="extendJobDueDate()">Extend Date</ion-button></ion-col>
-            <ion-col></ion-col>
-            <ion-col> <ion-button color="danger" size="small" shape="round" expand="block" fill="solid" (click)="cancelThisJob()">Cancel Task</ion-button></ion-col>
-          </ion-row>
-        </ion-grid>
+
       </ion-card>
 
 <!--      <ion-grid>-->
@@ -99,10 +101,12 @@
           <ion-segment-button value="message">
               <ion-label>Task Updates</ion-label>
           </ion-segment-button>
-
+          <ion-segment-button value="delivery">
+              <ion-label>Details</ion-label>
+          </ion-segment-button>
           <ion-segment-button value="activities">
-          <ion-label>Activities</ion-label>
-        </ion-segment-button>
+              <ion-label>Activities</ion-label>
+          </ion-segment-button>
 <!--        <ion-segment-button value="lesson">-->
 <!--          <ion-label>Show Interest</ion-label>-->
 <!--        </ion-segment-button>-->
@@ -111,6 +115,10 @@
 <!--        </ion-segment-button>-->
       </ion-segment>
 
+        <div *ngIf="tabs =='delivery'" class="about">
+            <app-job-details  [jobData]="jobData"></app-job-details>
+        </div>
+
 <!--      <div *ngIf="tabs =='about'" class="about">-->
 <!--        <ion-label class="head_text">{{jobData.offer_code}}</ion-label>-->
 
diff --git a/src/app/pages/jobreview/jobreview.module.ts b/src/app/pages/jobreview/jobreview.module.ts
index 920f8ef..d63010b 100644
--- a/src/app/pages/jobreview/jobreview.module.ts
+++ b/src/app/pages/jobreview/jobreview.module.ts
@@ -8,6 +8,7 @@ import { JobreviewPageRoutingModule } from './jobreview-routing.module';
 
 import { JobreviewPage } from './jobreview.page';
 import {TaskactivitiesComponent} from "../../components/taskactivities/taskactivities.component";
+import {JobDetailsComponent} from "../../components/job-details/job-details.component";
 
 @NgModule({
   imports: [
@@ -16,6 +17,6 @@ import {TaskactivitiesComponent} from "../../components/taskactivities/taskactiv
     IonicModule,
     JobreviewPageRoutingModule
   ],
-  declarations: [JobreviewPage,TaskactivitiesComponent]
+  declarations: [JobreviewPage,TaskactivitiesComponent,JobDetailsComponent]
 })
 export class JobreviewPageModule {}
diff --git a/src/app/pages/jobreview/jobreview.page.html b/src/app/pages/jobreview/jobreview.page.html
index 384afaa..87a30d7 100644
--- a/src/app/pages/jobreview/jobreview.page.html
+++ b/src/app/pages/jobreview/jobreview.page.html
@@ -51,10 +51,7 @@
       </div>
 
     <div style=" margin-bottom: 30px;">
-        <ion-card  style="background-color: #ebebf8; font-weight: bolder; color:darkgreen">
-            <ion-card-content style="padding: 5px;">
-                This job is in review, you can accept or reject completion.
-            </ion-card-content>
+        <ion-card  style="background-color: #ebebf8; font-weight: bolder; color:darkgreen;">
             <ion-grid>
                 <ion-row>
                     <ion-col> <ion-button color="danger" size="small" shape="round" expand="block" fill="solid" (click)="rejectCompletetion()">Reject</ion-button></ion-col>
@@ -62,6 +59,10 @@
                     <ion-col><ion-button color="secondary" size="small" shape="round" expand="block" fill="solid" (click)="acceptCompletetion()">Accept</ion-button></ion-col>
                 </ion-row>
             </ion-grid>
+            <ion-card-content style="padding: 5px; font-size: 14px; text-align: center;">
+                This job is in review, you can accept or reject completion.
+            </ion-card-content>
+
             <div style="color: red; width: 100%; text-align: center;">{{response_result}}</div>
         </ion-card>
     </div>
@@ -72,6 +73,9 @@
         <ion-segment-button value="message">
           <ion-label>Response</ion-label>
         </ion-segment-button>
+      <ion-segment-button value="delivery">
+          <ion-label>Details</ion-label>
+      </ion-segment-button>
         <ion-segment-button value="activities">
         <ion-label>Activities</ion-label>
         </ion-segment-button>
@@ -80,7 +84,9 @@
       <div *ngIf="tabs =='activities'" class="lesson">
 
       </div>
-
+        <div *ngIf="tabs =='delivery'" class="about">
+            <app-job-details  [jobData]="jobData"></app-job-details>
+        </div>
       <div *ngIf="tabs =='message'" class="lesson">
 
           <ion-card>
diff --git a/src/app/store/REMEMBER.txt b/src/app/store/REMEMBER.txt
index 7a10e34..6b3fc2f 100644
--- a/src/app/store/REMEMBER.txt
+++ b/src/app/store/REMEMBER.txt
@@ -85,6 +85,7 @@ ionic generate service usersoffers-data
 
 ionic generate component market-messages
 ionic generate service help-data
+ionic generate component job-details
 
 https://masteringionic.com/blog/working-with-capacitor-googlemaps-in-ionic
 ionic generate interface interfaces/location