diff --git a/REMEMBER.txt b/REMEMBER.txt
index a8b027f..b16507c 100644
--- a/REMEMBER.txt
+++ b/REMEMBER.txt
@@ -18,6 +18,7 @@ ionic generate page jobpastdue
 ionic generate page jobactive
 
 ionic generate component taskactivities
+ionic generate component suggestedlist
 
 npm install angularx-qrcode@14.0.0 --save
 
diff --git a/src/app/components/suggestedlist/suggestedlist.component.html b/src/app/components/suggestedlist/suggestedlist.component.html
new file mode 100644
index 0000000..d37845a
--- /dev/null
+++ b/src/app/components/suggestedlist/suggestedlist.component.html
@@ -0,0 +1,16 @@
+
+  <div class="video" *ngFor="let item of familySuggestData">
+    <div class="left">
+      <div class="bg_image men_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/jobs/'+item.banner+''"></div>
+
+      <div class="text">
+        <ion-label class="bold_text">{{item.title}}</ion-label>
+        <ion-label class="grey_text">{{item.description}}</ion-label>
+      </div>
+    </div>
+    <div class="right">
+      <ion-icon name="chevron-forward-outline"></ion-icon>
+    </div>
+  </div>
+
+
diff --git a/src/app/components/suggestedlist/suggestedlist.component.scss b/src/app/components/suggestedlist/suggestedlist.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/suggestedlist/suggestedlist.component.spec.ts b/src/app/components/suggestedlist/suggestedlist.component.spec.ts
new file mode 100644
index 0000000..d7f7932
--- /dev/null
+++ b/src/app/components/suggestedlist/suggestedlist.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { SuggestedlistComponent } from './suggestedlist.component';
+
+describe('SuggestedlistComponent', () => {
+  let component: SuggestedlistComponent;
+  let fixture: ComponentFixture<SuggestedlistComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SuggestedlistComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SuggestedlistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/suggestedlist/suggestedlist.component.ts b/src/app/components/suggestedlist/suggestedlist.component.ts
new file mode 100644
index 0000000..53a64a6
--- /dev/null
+++ b/src/app/components/suggestedlist/suggestedlist.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import {SessionDataProviderService} from "../../store/session-data-provider.service";
+import {WrenchService} from "../../services/wrench.service";
+
+@Component({
+  selector: 'app-suggestedlist',
+  templateUrl: './suggestedlist.component.html',
+  styleUrls: ['./suggestedlist.component.scss'],
+})
+export class SuggestedlistComponent implements OnInit {
+
+  constructor(public sessionDataProviderService: SessionDataProviderService,
+                    private wrenchService: WrenchService) { }
+
+  ngOnInit() {
+    this.getFamilySuggestList();
+  }
+  usrData: {
+    action:number, member_id: number, uid: string,
+    sessionid: string,
+    'limit': 30,
+    'offset': 0
+  };
+
+  familySuggestResult:any;
+  familySuggestData:any;
+  getFamilySuggestList(){
+    this.usrData = {
+      action:13010,
+      member_id: this.sessionDataProviderService.member_id,
+      uid: this.sessionDataProviderService.member_uid,
+      sessionid: this.sessionDataProviderService.session,
+      'limit': 30,
+      'offset': 0
+    };
+    this.wrenchService.familySuggestList(this.usrData).subscribe(
+        familySuggestResult => {
+          this.familySuggestResult = familySuggestResult;
+          console.log("familySuggestResult RETURN->", this.familySuggestResult);
+          this.familySuggestData = this.familySuggestResult.result_list;
+        }
+    );
+  }
+}
diff --git a/src/app/pages/home/home.module.ts b/src/app/pages/home/home.module.ts
index e54893c..9979548 100644
--- a/src/app/pages/home/home.module.ts
+++ b/src/app/pages/home/home.module.ts
@@ -1,11 +1,3 @@
-/*
-  Authors : initappz (Rahul Jograna)
-  Website : https://initappz.com/
-  App Name : E-Learning App Template
-  This App Template Source code is licensed as per the
-  terms found in the Website https://initappz.com/license
-  Copyright and Good Faith Purchasers © 2021-present initappz.
-*/
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -15,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { HomePageRoutingModule } from './home-routing.module';
 
 import { HomePage } from './home.page';
+import { SuggestedlistComponent } from "../../components/suggestedlist/suggestedlist.component";
 
 @NgModule({
   imports: [
@@ -23,6 +16,6 @@ import { HomePage } from './home.page';
     IonicModule,
     HomePageRoutingModule
   ],
-  declarations: [HomePage]
+  declarations: [HomePage,SuggestedlistComponent]
 })
 export class HomePageModule { }
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index 395c05f..f407620 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -36,19 +36,21 @@
     </ion-grid>
 
     <div class="lesson">
-      <div class="video" *ngFor="let item of familySuggestData">
-        <div class="left">
-          <div class="bg_image men_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/jobs/'+item.banner+''"></div>
+      <app-suggestedlist></app-suggestedlist>
 
-          <div class="text">
-            <ion-label class="bold_text">{{item.title}}</ion-label>
-            <ion-label class="grey_text">{{item.description}}</ion-label>
-          </div>
-        </div>
-        <div class="right">
-          <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
-      </div>
+<!--      <div class="video" *ngFor="let item of familySuggestData">-->
+<!--        <div class="left">-->
+<!--          <div class="bg_image men_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/jobs/'+item.banner+''"></div>-->
+
+<!--          <div class="text">-->
+<!--            <ion-label class="bold_text">{{item.title}}</ion-label>-->
+<!--            <ion-label class="grey_text">{{item.description}}</ion-label>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="right">-->
+<!--          <ion-icon name="chevron-forward-outline"></ion-icon>-->
+<!--        </div>-->
+<!--      </div>-->
     </div>
 
 
diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
index e7fc6cb..45255e9 100644
--- a/src/app/pages/home/home.page.ts
+++ b/src/app/pages/home/home.page.ts
@@ -44,7 +44,7 @@ export class HomePage implements OnInit {
       }
 
       if (this.accountType == 'FAMILY'){
-         this.getFamilySuggestList();
+       // no need moved to components  this.getFamilySuggestList();
       }
 
     }
diff --git a/src/app/pages/jobpastdue/jobpastdue.module.ts b/src/app/pages/jobpastdue/jobpastdue.module.ts
index caae062..9f9bb2e 100644
--- a/src/app/pages/jobpastdue/jobpastdue.module.ts
+++ b/src/app/pages/jobpastdue/jobpastdue.module.ts
@@ -5,7 +5,6 @@ import { FormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
 
 import { JobpastduePageRoutingModule } from './jobpastdue-routing.module';
-
 import { JobpastduePage } from './jobpastdue.page';
 import {TaskactivitiesComponent} from "../../components/taskactivities/taskactivities.component";
 
diff --git a/src/app/pages/suggest/suggest.module.ts b/src/app/pages/suggest/suggest.module.ts
index 60babc8..d380c6e 100644
--- a/src/app/pages/suggest/suggest.module.ts
+++ b/src/app/pages/suggest/suggest.module.ts
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { SuggestPageRoutingModule } from './suggest-routing.module';
 
 import { SuggestPage } from './suggest.page';
+import { SuggestedlistComponent } from "../../components/suggestedlist/suggestedlist.component";
 
 @NgModule({
   imports: [
@@ -15,6 +16,6 @@ import { SuggestPage } from './suggest.page';
     IonicModule,
     SuggestPageRoutingModule
   ],
-  declarations: [SuggestPage]
+  declarations: [SuggestPage,SuggestedlistComponent]
 })
 export class SuggestPageModule {}
diff --git a/src/app/pages/suggest/suggest.page.html b/src/app/pages/suggest/suggest.page.html
index 643cc13..fa9f1c0 100644
--- a/src/app/pages/suggest/suggest.page.html
+++ b/src/app/pages/suggest/suggest.page.html
@@ -59,7 +59,7 @@
                           <ion-card-content class="blog_text">
 
                               <div class="flex">
-                                  <ion-label class="bold_text"> {{item.title}}</ion-label>
+                                  <ion-label class="bold_text_suggest"> {{item.title}}</ion-label>
                                   <ion-icon slot="end" name="caret-forward-circle-outline" color="secondary"></ion-icon>
                               </div>
                           </ion-card-content>
@@ -71,6 +71,7 @@
       </div>
 
       <div *ngIf="tabs =='lesson'" class="lesson">
+<app-suggestedlist></app-suggestedlist>
 
       </div>
 
diff --git a/src/app/pages/suggest/suggest.page.scss b/src/app/pages/suggest/suggest.page.scss
index 829cbce..65a1d48 100644
--- a/src/app/pages/suggest/suggest.page.scss
+++ b/src/app/pages/suggest/suggest.page.scss
@@ -169,6 +169,11 @@ ion-content {
         font-family: 'bold';
       }
 
+
+      .bold_text_suggest {
+        font-size: 12px;
+        font-family: 'bold';
+      }
       .grey_text {
         font-size: 14px;
         color: grey;
@@ -390,7 +395,7 @@ ion-grid{
     margin: 0px;
     ion-card-content{
       padding: 5px;
-      min-height: 60px;
+      min-height: 50px;
       font-size: 14px;
     }
   }