diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ba8361e..6b73509 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -11,7 +11,7 @@ import {Router} from "@angular/router"; // import it to your component
 export class AppComponent {
   constructor(private bnIdle: BnNgIdleService,private sessionDataProviderService : SessionDataProviderService, public router: Router) {
   //  this.OneSignalInit();
-    this.bnIdle.startWatching(300).subscribe((res) => {
+    this.bnIdle.startWatching(2500).subscribe((res) => {
       if(res) {
         console.log("session expired");
        // alert('LOG OUT NOW');
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index 4fc04ab..5b6d3e9 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -48,21 +48,29 @@
 <!--    <div class="lesson">-->
       <app-suggestedlist></app-suggestedlist>
 
-<!--      <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>-->
+      <ion-card>
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+        <ion-card-header>
+<!--          <ion-card-title>Card Title</ion-card-title>-->
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+        </ion-card-header>
 
-<!--          <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>-->
+        <ion-card-content>
+          Here's a small text description for the
+        </ion-card-content>
+      </ion-card>
 
+      <ion-card>
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+        <ion-card-header>
+          <!--          <ion-card-title>Card Title</ion-card-title>-->
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+        </ion-card-header>
+
+        <ion-card-content>
+          Here's a small text description for the
+        </ion-card-content>
+    </ion-card>
 
   </div>
   <ng-template #elseFulltag>
diff --git a/src/app/pages/home/home.page.scss b/src/app/pages/home/home.page.scss
index fa62175..2c2bbf6 100644
--- a/src/app/pages/home/home.page.scss
+++ b/src/app/pages/home/home.page.scss
@@ -38,6 +38,9 @@ ion-header {
     }
   }
 }
+ion-card{
+  margin: 0px 0px 10px 0px;
+}
 .fam1{
   margin:10px 0px 10px 0px;
   background-color: aliceblue;
diff --git a/src/app/pages/suggest/suggest.page.html b/src/app/pages/suggest/suggest.page.html
index 94933b9..3a7e0b0 100644
--- a/src/app/pages/suggest/suggest.page.html
+++ b/src/app/pages/suggest/suggest.page.html
@@ -13,35 +13,11 @@
 <ion-content>
   <div class="ion-padding">
     <div class="boxed_contents">
-      <div class="flex">
-        <ion-label class="bold_text">Suggest Task(s)</ion-label>
-<!--        <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
-      </div>
+<!--      <div class="flex">-->
+<!--        <ion-label class="bold_text">Suggest Task(s)</ion-label>-->
+<!--&lt;!&ndash;        <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>&ndash;&gt;-->
+<!--      </div>-->
 
-      <div class="row">
-<!--        <ion-label class="bg_text">3D Design</ion-label>-->
-<!--        <div class="rate">-->
-<!--          <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
-<!--          <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
-<!--        </div>-->
-      </div>
-
-<!--      <ion-label class="color_text">$40</ion-label>-->
-
-      <div class="items">
-<!--        <div class="stud">-->
-<!--          <ion-icon slot="start" name="people" color="primary"></ion-icon>-->
-<!--          <ion-label>9876 Students</ion-label>-->
-<!--        </div>-->
-<!--        <div class="stud">-->
-<!--          <ion-icon slot="start" name="time" color="primary"></ion-icon>-->
-<!--          <ion-label>2.5 hours</ion-label>-->
-<!--        </div>-->
-<!--        <div class="stud">-->
-<!--          <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
-<!--          <ion-label>Certificate</ion-label>-->
-<!--        </div>-->
-      </div>
 
       <ion-segment [(ngModel)]="tabs">
         <ion-segment-button value="about">
@@ -54,7 +30,9 @@
 <!--          <ion-label>Reviews</ion-label>-->
 <!--        </ion-segment-button>-->
       </ion-segment>
+        <div class="items">
 
+        </div>
       <div *ngIf="tabs =='about'" class="about">
           <ion-grid>
               <ion-row>
@@ -103,10 +81,25 @@
                     <ion-card-header>
 <!--                        <ion-card-title>{{modalSeleted.title}}</ion-card-title>-->
                         <ion-card-subtitle>{{modalSeleted.title}}</ion-card-subtitle>
+
+
                     </ion-card-header>
 
                     <ion-card-content>
-                        {{modalSeleted.description}}
+                        <ion-item>
+                            <ion-textarea
+                                    placeholder="Type something here"
+                                    [autoGrow]="true"
+                                    value= "{{modalSeleted.description}}"
+                            >
+                            </ion-textarea>
+
+                        </ion-item>
+
+<!--                        <ion-textarea label="Description" labelPlacement="floating" fill="outline" placeholder="Enter text">-->
+<!--                            {{modalSeleted.description}}-->
+<!--                        </ion-textarea>-->
+<!--                        {{modalSeleted.description}}-->
 
                         <ion-toolbar>
                             <ion-buttons slot="start">
diff --git a/src/app/pages/suggest/suggest.page.ts b/src/app/pages/suggest/suggest.page.ts
index 2d1962e..be7bd7a 100644
--- a/src/app/pages/suggest/suggest.page.ts
+++ b/src/app/pages/suggest/suggest.page.ts
@@ -95,4 +95,8 @@ modalSeleted:any;
             this.message = `Hello, ${ev.detail.data}!`;
         }
     }
+
+    // customCounterFormatter(inputLength: number, maxLength: number) {
+    //     return `${maxLength - inputLength} characters remaining`;
+    // }
 }