diff --git a/src/app/accounts/addcredit/addcredit.page.html b/src/app/accounts/addcredit/addcredit.page.html
index ab99385..3019d8b 100644
--- a/src/app/accounts/addcredit/addcredit.page.html
+++ b/src/app/accounts/addcredit/addcredit.page.html
@@ -6,66 +6,77 @@
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="end">
-      <!--      <ion-button>-->
-      <!--        <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
-      <!--      </ion-button>-->
     </ion-buttons>
     <ion-title>Add Credit</ion-title>
   </ion-toolbar>
 </ion-header>
-<!--<ion-header>-->
-<!--  <ion-toolbar>-->
-<!--    <ion-title>{{currency_description}} Wallet</ion-title>-->
-<!--  </ion-toolbar>-->
-<!--</ion-header>-->
 <ion-content>
-<!--  <div class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/redeem.jpg)'">-->
-<!--    <div class="ion-padding">-->
-<!--      &lt;!&ndash;      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>&ndash;&gt;-->
-<!--    </div>-->
-<!--  </div>-->
-
   <div class="ion-padding">
     <div class="boxed_contents">
-      <ion-label class="color_text">Current Balance: {{curr_balance| number : '1.2-2'}} {{currency_description}}</ion-label>
-      <div class="items">
-      </div>
+      <ion-label class="color_text"
+        >Current Balance: {{curr_balance| number : '1.2-2'}}
+        {{currency_description}}</ion-label
+      >
+      <div class="items"></div>
       <div class="about">
-        <div *ngIf="curr_page =='redeem_start'" >
+        <div *ngIf="curr_page =='redeem_start'">
           <ion-card>
             <ion-card-header>
-              <ion-card-title>Credit {{currency_code}} Wallet</ion-card-title>
+              <ion-card-title class="top-text">Credit {{currency_code}} Wallet</ion-card-title>
               <!--                <ion-card-subtitle>Redeem from {{currency_code}} Wallet</ion-card-subtitle>-->
             </ion-card-header>
 
             <ion-card-content>
-
               <div *ngIf="processor == 3030">
                 <ion-grid class="send-grid">
                   <ion-row>
                     <ion-col class="intr">Amount({{currency_code}}) :</ion-col>
                     <ion-col>
-                      <ion-input (ionChange)="refreshFee()"  type="number" label="Amount(ggg)" placeholder="Enter Amount"  [(ngModel)]='amount'></ion-input>
+                      <ion-input
+                        (ionChange)="refreshFee()"
+                        type="number"
+                        label="Amount(ggg)"
+                        placeholder="Enter Amount"
+                        [(ngModel)]="amount"
+                      ></ion-input>
                     </ion-col>
                   </ion-row>
                   <ion-row>
                     <ion-col class="intr">Fee :</ion-col>
                     <ion-col>
-                      <ion-input label="Fee"    type="number" placeholder="0"  [(ngModel)]='fee_display' [readonly]="true"></ion-input>
+                      <ion-input
+                        label="Fee"
+                        type="number"
+                        placeholder="0"
+                        [(ngModel)]="fee_display"
+                        [readonly]="true"
+                      ></ion-input>
                     </ion-col>
                   </ion-row>
                   <ion-row>
                     <ion-col class="intr">Total :</ion-col>
                     <ion-col>
-                      <ion-input label="Total"    type="number" placeholder="0"  [(ngModel)]='total_display' [readonly]="true"></ion-input>
+                      <ion-input
+                        label="Total"
+                        type="number"
+                        placeholder="0"
+                        [(ngModel)]="total_display"
+                        [readonly]="true"
+                      ></ion-input>
                     </ion-col>
                   </ion-row>
                   <ion-row>
                     <ion-col>
-                      <ion-button expand="block" shape="round" [disabled]="isDisabled" color="secondary" (click)="contineAddCredit(processor)">Continue</ion-button>
+                      <ion-button
+                        expand="block"
+                        shape="round"
+                        [disabled]="isDisabled"
+                        color="secondary"
+                        (click)="contineAddCredit(processor)"
+                        >Continue</ion-button
+                      >
                     </ion-col>
                   </ion-row>
-
                 </ion-grid>
               </div>
 
@@ -74,158 +85,153 @@
                   <ion-row>
                     <ion-col class="intr">Amount({{currency_code}}) :</ion-col>
                     <ion-col>
-                      <ion-input (ionChange)="refreshFee()"  type="number" label="Amount(ggg)" placeholder="Enter Amount"  [(ngModel)]='amount'></ion-input>
+                      <ion-input
+                        (ionChange)="refreshFee()"
+                        type="number"
+                        label="Amount(ggg)"
+                        placeholder="Enter Amount"
+                        [(ngModel)]="amount"
+                      ></ion-input>
                     </ion-col>
                   </ion-row>
                   <ion-row>
                     <ion-col class="intr">Fee :</ion-col>
                     <ion-col>
-                      <ion-input label="Fee"    type="number" placeholder="0"  [(ngModel)]='fee_display' [readonly]="true"></ion-input>
+                      <ion-input
+                        label="Fee"
+                        type="number"
+                        placeholder="0"
+                        [(ngModel)]="fee_display"
+                        [readonly]="true"
+                      ></ion-input>
                     </ion-col>
                   </ion-row>
                   <ion-row>
                     <ion-col class="intr">Total :</ion-col>
                     <ion-col>
-                      <ion-input label="Total"    type="number" placeholder="0"  [(ngModel)]='total_display' [readonly]="true"></ion-input>
+                      <ion-input
+                        label="Total"
+                        type="number"
+                        placeholder="0"
+                        [(ngModel)]="total_display"
+                        [readonly]="true"
+                      ></ion-input>
                     </ion-col>
                   </ion-row>
-<!--                  <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-row>
-                    <ion-col>Payment
+                    <ion-col
+                      >
+                      <span class="top-text">Payment</span>
                       <ion-toolbar>
-                        <ion-buttons slot="secondary">
-                          <ion-button fill="outline" size="small" shape="round" (click)="setCcType(200)">
-                            <ion-icon slot="start" name="card" ></ion-icon>
-                             Cards
+                        <ion-buttons slot="secondary" *ngIf="card_count >  0;">
+                          <ion-button
+                            fill="outline"
+                            size="small"
+                            shape="round"
+                            (click)="setCcType(200)"
+                          >
+                            <ion-icon slot="start" name="card"></ion-icon>
+                            Cards
                           </ion-button>
                         </ion-buttons>
 
                         <ion-buttons slot="secondary">
-                          <ion-button fill="outline" size="small"  shape="round" (click)="setCcType(400)">
-                            <ion-icon slot="start" name="add-circle" ></ion-icon>
+                          <ion-button
+                            fill="outline"
+                            size="small"
+                            shape="round"
+                            (click)="setCcType(400)"
+                          >
+                            <ion-icon slot="start" name="add-circle"></ion-icon>
                             New Card
                           </ion-button>
                         </ion-buttons>
                       </ion-toolbar>
-
-<!--                      <div class="row">-->
-<!--                        <ion-radio-group value="custom-checked" style="margin-left: 20px; font-size: 12px; color: #1e2023;">-->
-<!--                          Previous : <ion-radio value="custom-checked" aria-label="Custom checkbox"></ion-radio>-->
-<!--                          New Card: <ion-radio value="custom" aria-label="Custom checkbox that is checked"></ion-radio>-->
-<!--                        </ion-radio-group>-->
-
-<!--&lt;!&ndash;                        <ion-label class="bg_text">3D Design</ion-label>&ndash;&gt;-->
-<!--&lt;!&ndash;                        <div class="rate">&ndash;&gt;-->
-<!--&lt;!&ndash;                       &ndash;&gt;-->
-
-<!--&lt;!&ndash;                          <ion-icon name="star-half-outline" color="warning"></ion-icon>&ndash;&gt;-->
-<!--&lt;!&ndash;                          <ion-label class="review">4.8 (4478 reviews)</ion-label>&ndash;&gt;-->
-<!--&lt;!&ndash;                        </div>&ndash;&gt;-->
-<!--                      </div>-->
                     </ion-col>
                   </ion-row>
                   <ion-row *ngIf="card_level==200">
                     <ion-col>
-                      <ion-select  (ionChange)="refreshFee()" placeholder="Select Payment Card"  [(ngModel)]='payment_card' size="block">
-                        <ion-select-option value="{{item.card_uid}}"  *ngFor="let item of usersCardsData">{{item.description}} **** **** **** {{item.digits}}</ion-select-option>
+                      <ion-select
+                        (ionChange)="refreshFee()"
+                        placeholder="Select Payment Card"
+                        [(ngModel)]="payment_card"
+                        size="block"
+                      >
+                        <ion-select-option
+                          value="{{item.card_uid}}"
+                          *ngFor="let item of usersCardsData"
+                          >{{item.description}} **** **** ****
+                          {{item.digits}}</ion-select-option
+                        >
                       </ion-select>
                     </ion-col>
                   </ion-row>
                   <ion-row *ngIf="card_level==400">
                     <ion-col>
-
                       <ion-item lines="none">
-                        <ion-input type="text" placeholder="Card Holder"></ion-input>
+                        <ion-input
+                          type="text"
+                          placeholder="Card Holder"
+                        ></ion-input>
                       </ion-item>
 
                       <ion-item lines="none">
-                        <ion-input type="number" placeholder="Card Number"></ion-input>
+                        <ion-input
+                          type="number"
+                          placeholder="Card Number"
+                          maxlength="16"
+                        ></ion-input>
                       </ion-item>
 
                       <ion-item lines="none">
-                        <ion-input type="number" placeholder="Expiry Date"></ion-input>
+                        <ion-input
+                          type="number"
+                          placeholder="Expiry Date"
+                        ></ion-input>
                       </ion-item>
 
                       <ion-item lines="none">
                         <ion-input type="number" placeholder="CVV"></ion-input>
                       </ion-item>
-
                     </ion-col>
                   </ion-row>
 
                   <ion-row>
                     <ion-col>
-                      <ion-button expand="block" shape="round" [disabled]="isDisabled" color="secondary" (click)="contineAddCredit(processor)">Continue</ion-button>
+                      <ion-button
+                        expand="block"
+                        shape="round"
+                        [disabled]="isDisabled"
+                        color="secondary"
+                        (click)="contineAddCredit(processor)"
+                        >Continue</ion-button
+                      >
                     </ion-col>
                   </ion-row>
-
                 </ion-grid>
               </div>
-
-
-
-
-
-              <!--                    <ion-list>-->
-              <!--                        <ion-item>-->
-              <!--                            <ion-label>Amount({{currency_code}})</ion-label>-->
-              <!--                            <ion-input (ionChange)="refreshFee()"  type="number" label="Amount(ggg)" placeholder="Enter Amount"  [(ngModel)]='amount'></ion-input>-->
-              <!--                        </ion-item>-->
-
-              <!--                        <ion-item>-->
-              <!--                            <ion-label >Fee</ion-label>-->
-              <!--                            <ion-input label="Fee"    type="number" placeholder="0"  [(ngModel)]='fee_display' [readonly]="true"></ion-input>-->
-              <!--                        </ion-item>-->
-
-              <!--                        <ion-item>-->
-              <!--                            <ion-label>Total</ion-label>-->
-              <!--                            <ion-input label="Total"    type="number" placeholder="0"  [(ngModel)]='total_display' [readonly]="true"></ion-input>-->
-              <!--                        </ion-item>-->
-
-              <!--&lt;!&ndash;                        <ion-item>&ndash;&gt;-->
-              <!--&lt;!&ndash;                            <ion-select-option value="" >Select Recipient</ion-select-option>&ndash;&gt;-->
-              <!--&lt;!&ndash;&lt;!&ndash;                            <ion-select  placeholder="Select Recipient"  [(ngModel)]='recipient' size="block">&ndash;&gt;&ndash;&gt;-->
-              <!--&lt;!&ndash;&lt;!&ndash;&lt;!&ndash;                                <ion-select-option value="" >Select Recipient</ion-select-option>&ndash;&gt;&ndash;&gt;&ndash;&gt;-->
-              <!--&lt;!&ndash;&lt;!&ndash;                                <ion-select-option value="{{item.recipient_uid}}"  *ngFor="let item of myRecipientsData">{{item.recipient}}</ion-select-option>&ndash;&gt;&ndash;&gt;-->
-              <!--&lt;!&ndash;&lt;!&ndash;                            </ion-select>&ndash;&gt;&ndash;&gt;-->
-              <!--&lt;!&ndash;&lt;!&ndash;                            <ion-label>{{recipient_name}}</ion-label>&ndash;&gt;&ndash;&gt;-->
-              <!--&lt;!&ndash;                        </ion-item>&ndash;&gt;-->
-
-              <!--                        <div>-->
-              <!--                            <ion-select  placeholder="Select Recipient"  [(ngModel)]='recipient' size="block">-->
-              <!--                                &lt;!&ndash;                                <ion-select-option value="" >Select Recipient</ion-select-option>&ndash;&gt;-->
-              <!--                                <ion-select-option value="{{item.recipient_uid}}"  *ngFor="let item of myRecipientsData">{{item.recipient}}</ion-select-option>-->
-              <!--                            </ion-select>-->
-              <!--                            <ion-label>{{recipient_name}}</ion-label>-->
-              <!--                        </div>-->
-
-              <!--                    </ion-list>-->
-
-
             </ion-card-content>
           </ion-card>
+
+<!--          <ion-card>-->
+<!--            <ion-card-header>-->
+<!--              <ion-card-title class="top-text">Payment</ion-card-title>-->
+<!--            </ion-card-header>-->
+<!--            <ion-card-content>-->
+<!--              -->
+<!--            </ion-card-content>-->
+<!--          </ion-card>-->
+
         </div>
-
-
-
       </div>
     </div>
-
   </div>
 </ion-content>
 
 <div *ngIf="isModalOpenBackdrop==true">
   <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
   <ion-modal class="common_modal" [isOpen]="isModalOpen">
-
     <ng-template>
-
       <ion-header>
         <ion-toolbar>
           <ion-title>Confirm Payment</ion-title>
@@ -235,7 +241,6 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
-
         <ion-list class="pop_list">
           <ion-list-header>
             <ion-label>Credit {{currency_code}} Wallet</ion-label>
@@ -254,26 +259,30 @@
           </ion-item>
           <ion-item *ngIf="startCreditResult.card_uid !='' ">
             <ion-label>Payment: </ion-label>
-            <div>{{selPaymentCard.description}} **** **** {{selPaymentCard.digits}}</div>
+            <div>
+              {{selPaymentCard.description}} **** **** {{selPaymentCard.digits}}
+            </div>
           </ion-item>
-
         </ion-list>
 
         <ion-list class="pop_list" lines="none">
-          <ion-item  >
+          <ion-item>
             <ion-label>Ref Number: </ion-label>
           </ion-item>
           <ion-item>
             <div>{{startCreditResult.credit_reference}}</div>
           </ion-item>
 
-<!--          <ion-item style="background-color: #d9f3d9;" *ngIf="credit_confirmation !='' ">-->
-<!--            <ion-label>Confirmation: </ion-label>-->
-<!--            <div>{{credit_confirmation}}</div>-->
-<!--          </ion-item>-->
+          <!--          <ion-item style="background-color: #d9f3d9;" *ngIf="credit_confirmation !='' ">-->
+          <!--            <ion-label>Confirmation: </ion-label>-->
+          <!--            <div>{{credit_confirmation}}</div>-->
+          <!--          </ion-item>-->
         </ion-list>
 
-        <div style="background-color: #d9f3d9;"  *ngIf="credit_confirmation !='' ">
+        <div
+          style="background-color: #d9f3d9"
+          *ngIf="credit_confirmation !='' "
+        >
           <ion-list class="pop_list" lines="none">
             <ion-item>
               <div>Credit is Successful</div>
@@ -285,13 +294,14 @@
             </ion-item>
           </ion-list>
         </div>
-
-
-
       </ion-content>
       <ion-footer>
         <ion-toolbar>
-          <ion-button  [disabled]="isProcessDisabled"       (click)="processPayment(processor)">Complete</ion-button>
+          <ion-button
+            [disabled]="isProcessDisabled"
+            (click)="processPayment(processor)"
+            >Complete</ion-button
+          >
         </ion-toolbar>
       </ion-footer>
     </ng-template>
diff --git a/src/app/accounts/addcredit/addcredit.page.scss b/src/app/accounts/addcredit/addcredit.page.scss
index 6437622..5e76bc2 100644
--- a/src/app/accounts/addcredit/addcredit.page.scss
+++ b/src/app/accounts/addcredit/addcredit.page.scss
@@ -10,6 +10,10 @@ ion-content {
   ion-card-title{
     font-size: 18px;
   }
+  .top-text{
+    font-weight: bolder;
+    color: #8b198e;
+  }
   .back_image {
     width: 100%;
     height: 80px;
diff --git a/src/app/accounts/addcredit/addcredit.page.ts b/src/app/accounts/addcredit/addcredit.page.ts
index 0d93678..8e304f7 100644
--- a/src/app/accounts/addcredit/addcredit.page.ts
+++ b/src/app/accounts/addcredit/addcredit.page.ts
@@ -29,7 +29,7 @@ export class AddcreditPage implements OnInit {
     card_level:number=200;
     flutterwave_key:string='';
 
-
+    card_count:number = 0;
 
     publicKey = "FLWPUBK_TEST-XXXXXXXXX";
 
@@ -110,6 +110,10 @@ export class AddcreditPage implements OnInit {
           this.usersCardsData = this.usersCardsTotalData.result_list;
           // debugger;
           console.log("usersCardsData RETURN DATA->", this.usersCardsData);
+          this.card_count = this.usersCardsData.length;
+          if (this.card_count == 0 ){
+              this.setCcType(400);
+          }
           //this.total_family = this.familyData.length;
         }
     );