diff --git a/src/app/pages/addfamilykid/addfamilykid.page.html b/src/app/pages/addfamilykid/addfamilykid.page.html
index cfc2a89..4b164ca 100644
--- a/src/app/pages/addfamilykid/addfamilykid.page.html
+++ b/src/app/pages/addfamilykid/addfamilykid.page.html
@@ -5,140 +5,151 @@
         <ion-icon name="arrow-back-outline"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ion-title>Add Kid</ion-title>
+    <ion-title>Add kid</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <div>
-    <div
-      style="
-        background-color: aliceblue;
-        border-radius: 10px;
+  <div class="boxed_contents">
+    <ion-card style="margin: 15px 10px 10px 10px; border-radius: 10px;">
+<!--      <ion-card-header>-->
+<!--        <ion-card-title>Add kid</ion-card-title>-->
+<!--      </ion-card-header>-->
+      <ion-card-content>
+        <div
+                style="
         padding: 10px;
         margin-top: 10px;
       "
-    >
-      <ion-item lines="none">
-        <ion-input
-          type="text"
-          maxlength="15"
-          placeholder="Firstname"
-          style="
-            background-color: aliceblue;
-            border-radius: 10px;
-            padding-left: 1px;
-          "
-          (ionChange)="verifyEntry()"
-          [(ngModel)]="firstname"
-        ></ion-input>
-      </ion-item>
-
-      <ion-item lines="none">
-        <ion-input
-          type="text"
-          maxlength="15"
-          placeholder="lastname"
-          style="
-            background-color: aliceblue;
-            border-radius: 10px;
-            padding-left: 1px;
-          "
-          (ionChange)="verifyEntry()"
-          [(ngModel)]="lastname"
-        ></ion-input>
-      </ion-item>
-
-      <ion-item lines="none">
-        <ion-label>Birthday(Year/Month)</ion-label>
-      </ion-item>
-
-      <ion-item lines="none">
-        <ion-grid>
-          <ion-row style="margin: 0px; padding: 0px">
-            <ion-col style="margin: 0px; padding: 4px">
-              <div style="width: 100%; background-color: #8b198e">
-                <div style="width: 30%; float: left">Year</div>
-
-                <div style="width: 70%; float: right">
-                  <ion-select
-                    aria-label="Year"
-                    (ionChange)="verifyEntry()"
-                    [(ngModel)]="year"
+        >
+          <ion-label position="stacked" class="lb-line">Firstname</ion-label>
+          <ion-item lines="none">
+            <ion-input
+                    type="text"
+                    maxlength="15"
+                    placeholder="Firstname"
                     style="
+            background-color: aliceblue;
+            border-radius: 10px;
+            color: black;
+            padding-left: 1px;
+          "
+                    (ionChange)="verifyEntry()"
+                    [(ngModel)]="firstname"
+            ></ion-input>
+          </ion-item>
+          <ion-label position="stacked" class="lb-line">Lastname</ion-label>
+          <ion-item lines="none">
+            <ion-input
+                    type="text"
+                    maxlength="15"
+                    placeholder="lastname"
+                    style="
+            background-color: aliceblue;
+            border-radius: 10px;
+            padding-left: 1px;
+          "
+                    (ionChange)="verifyEntry()"
+                    [(ngModel)]="lastname"
+            ></ion-input>
+          </ion-item>
+
+<!--          <ion-item lines="none">-->
+<!--            -->
+<!--          </ion-item>-->
+          <ion-label  position="stacked" class="lb-line">Birthday(Year/Month)</ion-label>
+          <ion-item lines="none">
+            <ion-grid>
+              <ion-row style="margin: 0px; padding: 0px">
+                <ion-col style="margin: 0px; padding: 4px">
+                  <div style="width: 100%; background-color: #8b198e">
+                    <div style="width: 30%; float: left">Year</div>
+
+                    <div style="width: 70%; float: right">
+                      <ion-select
+                              aria-label="Year"
+                              (ionChange)="verifyEntry()"
+                              [(ngModel)]="year"
+                              style="
                       background-color: aliceblue;
                       border-radius: 10px;
                       font-size: 12px;
                       width: 100%;
                     "
-                  >
-                    <ion-select-option
-                      *ngFor="let item1 of regYear"
-                      value="{{item1}}"
-                      >{{item1}}</ion-select-option
-                    >
-                  </ion-select>
-                </div>
-              </div>
-            </ion-col>
-          </ion-row>
+                      >
+                        <ion-select-option
+                                *ngFor="let item1 of regYear"
+                                value="{{item1}}"
+                        >{{item1}}</ion-select-option
+                        >
+                      </ion-select>
+                    </div>
+                  </div>
+                </ion-col>
+              </ion-row>
 
-          <ion-row style="margin: 0px; padding: 0px">
-            <ion-col style="margin: 0px; padding: 4px">
-              <div style="width: 100%; background-color: #8b198e">
-                <div style="width: 30%; float: left">Month</div>
+              <ion-row style="margin: 0px; padding: 0px">
+                <ion-col style="margin: 0px; padding: 4px">
+                  <div style="width: 100%; background-color: #8b198e">
+                    <div style="width: 30%; float: left">Month</div>
 
-                <div style="width: 70%; float: right">
-                  <ion-select
-                    aria-label="Month"
-                    (ionChange)="verifyEntry()"
-                    [(ngModel)]="month"
-                    expand="block"
-                    style="
+                    <div style="width: 70%; float: right">
+                      <ion-select
+                              aria-label="Month"
+                              (ionChange)="verifyEntry()"
+                              [(ngModel)]="month"
+                              expand="block"
+                              style="
                       background-color: aliceblue;
                       border-radius: 10px;
                       width: 100%;
                       font-size: 12px;
                     "
+                      >
+                        <ion-select-option
+                                *ngFor="let item of regMonth;"
+                                value="{{item[0]}}"
+                        >{{item[1]}}</ion-select-option
+                        >
+                      </ion-select>
+                    </div>
+                  </div>
+                </ion-col>
+              </ion-row>
+            </ion-grid>
+          </ion-item>
+          <ion-grid>
+            <ion-row>
+              <ion-col style="text-align: left">
+                <!--            <ion-button-->
+                <!--              (click)="setCloseModal()"-->
+                <!--              size="small"-->
+                <!--              shape="round"-->
+                <!--              color="danger"-->
+                <!--            >-->
+                <!--              Close-->
+                <!--            </ion-button>-->
+              </ion-col>
+              <ion-col>
+                <div style="text-align: right">
+                  {{addFamilyResult}}
+                  <ion-button
+                          shape="round"
+                          [disabled]="isDisabled"
+                          (click)="addFamilyMember()"
+                  >Add</ion-button
                   >
-                    <ion-select-option
-                      *ngFor="let item of regMonth;"
-                      value="{{item[0]}}"
-                      >{{item[1]}}</ion-select-option
-                    >
-                  </ion-select>
                 </div>
-              </div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-item>
-      <ion-grid>
-        <ion-row>
-          <ion-col style="text-align: left">
-<!--            <ion-button-->
-<!--              (click)="setCloseModal()"-->
-<!--              size="small"-->
-<!--              shape="round"-->
-<!--              color="danger"-->
-<!--            >-->
-<!--              Close-->
-<!--            </ion-button>-->
-          </ion-col>
-          <ion-col>
-            <div style="text-align: right">
-              {{addFamilyResult}}
-              <ion-button
-                shape="round"
-                [disabled]="isDisabled"
-                size="small"
-                (click)="addFamilyMember()"
-                >Add</ion-button
-              >
-            </div>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </div>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </div>
+      </ion-card-content>
+    </ion-card>
   </div>
+
+
+
+
+
 </ion-content>
diff --git a/src/app/pages/addfamilykid/addfamilykid.page.scss b/src/app/pages/addfamilykid/addfamilykid.page.scss
index e69de29..eb82c1a 100644
--- a/src/app/pages/addfamilykid/addfamilykid.page.scss
+++ b/src/app/pages/addfamilykid/addfamilykid.page.scss
@@ -0,0 +1,6 @@
+.lb-line{
+  font-weight: bolder;
+  font-size: 16px;
+  color: #8b198e;
+  margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/app/store/tasks-data.service.ts b/src/app/store/tasks-data.service.ts
index df750dc..d109f52 100644
--- a/src/app/store/tasks-data.service.ts
+++ b/src/app/store/tasks-data.service.ts
@@ -66,12 +66,15 @@ export class TasksDataService {
           this.session_image_server = this.jobsTotalData.session_image_server;
 
           let AllResult = this.jobsTotalData.result_list;
-          this.jobsData = AllResult.filter((item) => item.status_description == 'ACTIVE')
-          this.jobsPastDueData =AllResult.filter((item) => item.status_description == 'PASTDUE')
-          this.jobsInReviewData =AllResult.filter((item) => item.status_description == 'REVIEW')
-          this.active_job_count = this.jobsData?.length;
-          this.review_job_count = this.jobsInReviewData?.length;
-          this.pastdue_job_count = this.jobsPastDueData?.length;
+          if ( AllResult != null ){
+              this.jobsData = AllResult.filter((item) => item.status_description == 'ACTIVE')
+              this.jobsPastDueData =AllResult.filter((item) => item.status_description == 'PASTDUE')
+              this.jobsInReviewData =AllResult.filter((item) => item.status_description == 'REVIEW')
+              this.active_job_count = this.jobsData?.length;
+              this.review_job_count = this.jobsInReviewData?.length;
+              this.pastdue_job_count = this.jobsPastDueData?.length;
+          }
+
           // debugger;
         }
     );