diff --git a/src/app/components/family-connect/family-connect.component.html b/src/app/components/family-connect/family-connect.component.html
index 325f27f..5d5a71c 100644
--- a/src/app/components/family-connect/family-connect.component.html
+++ b/src/app/components/family-connect/family-connect.component.html
@@ -1,5 +1,5 @@
 
-  <ion-card class="connect-invite">
+  <ion-card class="connect-invite" *ngIf="show_invite==true;">
     <ion-card-header>
       <ion-card-subtitle><div>You have an invitation waiting</div></ion-card-subtitle>
     </ion-card-header>
@@ -13,7 +13,7 @@
     </ion-card-content>
   </ion-card>
   <p></p>
-  <ion-card class="connect-card">
+  <ion-card class="connect-card" *ngIf="show_connect == true;">
     <ion-card-header>
       <ion-card-title>Family Connect</ion-card-title>
 <!--      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
diff --git a/src/app/components/family-connect/family-connect.component.ts b/src/app/components/family-connect/family-connect.component.ts
index 0952028..457e0fe 100644
--- a/src/app/components/family-connect/family-connect.component.ts
+++ b/src/app/components/family-connect/family-connect.component.ts
@@ -6,6 +6,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./family-connect.component.scss'],
 })
 export class FamilyConnectComponent implements OnInit {
+show_invite:boolean = false;
+show_connect: boolean = false;
 
   constructor() { }
 
diff --git a/src/app/pages/my-course/my-course.page.html b/src/app/pages/my-course/my-course.page.html
index 0c5a97b..41cf83a 100644
--- a/src/app/pages/my-course/my-course.page.html
+++ b/src/app/pages/my-course/my-course.page.html
@@ -17,12 +17,12 @@
     </ion-segment>
 
     <div *ngIf="tabs =='on'">
-
+      <div class="top_items">
+        <ion-label class="bold">Available Task(s)</ion-label>
+        <ion-icon slot="start" name="options-outline" (click)="toggleFilter()" color="primary"></ion-icon>
+      </div>
       <div class="lesson">
-        <div class="flex">
-          <ion-label class="bold">Available Task(s)</ion-label>
-        </div>
-        <div>
+        <div *ngIf="show_filter==true;">
           <ion-searchbar placeholder="Filter by name"></ion-searchbar>
         </div>
         <div class="video" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">
diff --git a/src/app/pages/my-course/my-course.page.scss b/src/app/pages/my-course/my-course.page.scss
index 96fe9c8..12147c8 100644
--- a/src/app/pages/my-course/my-course.page.scss
+++ b/src/app/pages/my-course/my-course.page.scss
@@ -29,6 +29,7 @@ ion-content {
 
 
 
+
     .flex {
       display: flex;
       align-items: center;
@@ -107,3 +108,28 @@ ion-content {
     }
   }
 }
+
+.top_items {
+  //background-color: rebeccapurple;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid lightgrey;
+  padding-bottom: 10px;
+    .bold{
+      font-weight: bolder;
+    }
+  .stud {
+    display: flex;
+    align-items: center;
+
+    ion-icon {
+      margin-right: 5px;
+    }
+
+    ion-label {
+      color: grey;
+    }
+  }
+}
diff --git a/src/app/pages/my-course/my-course.page.ts b/src/app/pages/my-course/my-course.page.ts
index e02f1fe..77814cb 100644
--- a/src/app/pages/my-course/my-course.page.ts
+++ b/src/app/pages/my-course/my-course.page.ts
@@ -56,4 +56,9 @@ export class MyCoursePage implements OnInit {
       this.session_image_server = this.marketDataService.session_image_server;
     }, 5000);
   }
+
+  show_filter:boolean= false;
+  toggleFilter(){
+   this.show_filter = !this.show_filter;
+  }
 }