diff --git a/src/app/pages/suggestdetails/suggestdetails.page.html b/src/app/pages/suggestdetails/suggestdetails.page.html
index 35c3bf0..9534402 100644
--- a/src/app/pages/suggestdetails/suggestdetails.page.html
+++ b/src/app/pages/suggestdetails/suggestdetails.page.html
@@ -1,6 +1,6 @@
 
 <ion-content>
-  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'">
+  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+suggestData.banner+')'">
     <div class="ion-padding">
       <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
     </div>
@@ -8,7 +8,7 @@
 
   <div class="ion-padding">
     <div class="flex">
-      <ion-label class="bold_text">Intro UI/UX Design</ion-label>
+      <ion-label class="bold_text">{{suggestData.title}}</ion-label>
 <!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
     </div>
 
@@ -24,116 +24,57 @@
 
     <div class="items">
       <div class="stud">
-        <ion-icon slot="start" name="people" color="primary"></ion-icon>
-        <ion-label>9876 Students</ion-label>
+        <ion-label>{{suggestData.description}}</ion-label>
       </div>
     </div>
 
     <div class="items">
       <div class="stud">
         <ion-icon slot="start" name="time" color="primary"></ion-icon>
-        <ion-label>2.5 hours</ion-label>
+        <ion-label>{{suggestData.added |date}}</ion-label>
       </div>
       <div class="stud">
         <ion-icon slot="start" name="document-text" color="primary"></ion-icon>
-        <ion-label>Certificate</ion-label>
+        <ion-label>{{suggestData.status_text}}</ion-label>
       </div>
     </div>
 
     <ion-segment [(ngModel)]="tabs">
       <ion-segment-button value="about">
-        <ion-label>About</ion-label>
+        <ion-label>Actions</ion-label>
       </ion-segment-button>
       <ion-segment-button value="lesson">
-        <ion-label>Lessons</ion-label>
+        <ion-label>History</ion-label>
       </ion-segment-button>
     </ion-segment>
 
     <div *ngIf="tabs =='about'" class="about">
-      <ion-label class="head_text">Mentor</ion-label>
-
-      <div class="mentor" (click)="onMentor()">
-        <div class="left">
-          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p3.jpg)'"></div>
-          <div style="margin-left: 10px;">
-            <ion-label class="bold">Jonathon Williams</ion-label>
-            <ion-label class="grey">Senier UI/UX designer at google</ion-label>
-          </div>
-        </div>
-        <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>
-      </div>
-
-      <ion-label class="head_text">About Course</ion-label>
-
-      <ion-label class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolor, quasi
-        commodi
-      </ion-label>
-
-      <ion-label class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolor, quasi
-        commodi
-      </ion-label>
-
-      <ion-label class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolor, quasi
-        commodi
-      </ion-label>
-
-      <ion-label class="head_text">Tools</ion-label>
-
-      <ion-label>Figma</ion-label>
+      <ion-grid>
+        <ion-row>
+          <ion-col class="mtop">
+            <ion-button expand="block">Send Reminder</ion-button>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col class="mtop">
+            <ion-button color="danger" expand="block">Cancel Request</ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </div>
 
     <div *ngIf="tabs =='lesson'" class="lesson">
-      <div class="flex">
-        <ion-label class="bold">Most Popular Courses</ion-label>
-        <ion-label class="color">See all</ion-label>
-      </div>
+<!--      <div class="flex">-->
+<!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
+<!--        <ion-label class="color">See all</ion-label>-->
+<!--      </div>-->
 
-      <div class="sec">
-        <ion-label class="grey">Section 1 - Introduction</ion-label>
-        <ion-label class="color">15 min</ion-label>
-      </div>
+<!--      <div class="sec">-->
+<!--        <ion-label class="grey">Section 1 - Introduction</ion-label>-->
+<!--        <ion-label class="color">15 min</ion-label>-->
+<!--      </div>-->
 
-      <div class="video" *ngFor="let item of [1,2]">
-        <div class="left">
-          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
-
-          <div class="text">
-            <ion-label class="bold_text">Why Using Figma ?</ion-label>
-            <ion-label class="grey_text">10 mins</ion-label>
-          </div>
-        </div>
-        <div class="right">
-          <ion-icon name="lock-closed-outline"></ion-icon>
-        </div>
-      </div>
-
-      <div class="sec">
-        <ion-label class="grey">Section 2 - Figma Basic</ion-label>
-        <ion-label class="color">60 min</ion-label>
-      </div>
-
-
-      <div class="video" *ngFor="let item of [1,2,3,4,5,6]">
-        <div class="left">
-          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
-
-          <div class="text">
-            <ion-label class="bold_text">Why Using Figma ?</ion-label>
-            <ion-label class="grey_text">10 mins</ion-label>
-          </div>
-        </div>
-        <div class="right">
-          <ion-icon name="lock-closed-outline"></ion-icon>
-        </div>
-      </div>
-
-      <div class="sec">
-        <ion-label class="grey">Section 3 - Let's Practice</ion-label>
-        <ion-label class="color">75 min</ion-label>
-      </div>
-
-
-      <div class="video" *ngFor="let item of [1,2,3,4,5,6]">
+      <div class="video" *ngFor="let item of suggestActionData">
         <div class="left">
           <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
 
diff --git a/src/app/pages/suggestdetails/suggestdetails.page.scss b/src/app/pages/suggestdetails/suggestdetails.page.scss
index 8fd1874..2d2696c 100644
--- a/src/app/pages/suggestdetails/suggestdetails.page.scss
+++ b/src/app/pages/suggestdetails/suggestdetails.page.scss
@@ -2,7 +2,9 @@
 ion-content {
   .back_image {
     width: 100%;
-    height: 130px;
+    height: 160px;
+    background-size: contain;
+    background-repeat: no-repeat;
 
     .back {
       font-size: 25px;
@@ -355,6 +357,9 @@ ion-content {
   }
 }
 
+.mtop{
+  margin-top: 30px;
+}
 
 ion-footer {
   --background: white;
diff --git a/src/app/pages/suggestdetails/suggestdetails.page.ts b/src/app/pages/suggestdetails/suggestdetails.page.ts
index 83b04c6..b915da3 100644
--- a/src/app/pages/suggestdetails/suggestdetails.page.ts
+++ b/src/app/pages/suggestdetails/suggestdetails.page.ts
@@ -11,11 +11,16 @@ export class SuggestdetailsPage implements OnInit {
 
 
   tabs = 'about';
-
+suggestData:any;
+suggestActionData:any;
   constructor(
       private navctr: NavController,
       private router: Router
-  ) { }
+  ) {
+    this.suggestData  =  this.router.getCurrentNavigation().extras.state;
+    console.log("XXXXX 1",   this.router.getCurrentNavigation().extras);
+    console.log("XXXXX 2",   this.router.getCurrentNavigation().extras.state);
+  }
 
   ngOnInit() {
   }