diff --git a/src/app/pages/transaction/transaction.page.html b/src/app/pages/transaction/transaction.page.html
index 938a304..371cc91 100644
--- a/src/app/pages/transaction/transaction.page.html
+++ b/src/app/pages/transaction/transaction.page.html
@@ -6,30 +6,47 @@
 
 <ion-content class="ion-padding">
 
-<div class="wallet_panel" *ngFor="let item of walletData; let i = index">
-  <ion-grid>
-    <ion-row>
-      <ion-col>
-       <div class="currency">{{item.description}} </div>
-        Balance {{item.amount*0.01}}
-      </ion-col>
-      <ion-col>
-        <ion-grid>
-          <ion-row>
-            <ion-col>
-             <ion-button shape="round" expand="block">+ Credit</ion-button>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col>
-               <ion-button shape="round" expand="block">WithDraw</ion-button>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-</div>
+    <ion-card *ngFor="let item of walletData; let i = index">
+        <ion-card-header>
+            <ion-card-title>{{item.description}}</ion-card-title>
+            <ion-card-subtitle> Balance {{item.amount*0.01}}</ion-card-subtitle>
+        </ion-card-header>
+
+        <ion-card-content>
+            <ion-grid>
+                <ion-row>
+                    <ion-col> <ion-button shape="round" expand="block">WithDraw</ion-button></ion-col>
+                    <ion-col></ion-col>
+                    <ion-col><ion-button shape="round" expand="block">+ Credit</ion-button></ion-col>
+                </ion-row>
+            </ion-grid>
+        </ion-card-content>
+    </ion-card>
+
+<!--<div class="wallet_panel" *ngFor="let item of walletData; let i = index">-->
+<!--  <ion-grid>-->
+<!--    <ion-row>-->
+<!--      <ion-col>-->
+<!--       <div class="currency">{{item.description}} </div>-->
+<!--        Balance {{item.amount*0.01}}-->
+<!--      </ion-col>-->
+<!--      <ion-col>-->
+<!--        <ion-grid>-->
+<!--          <ion-row>-->
+<!--            <ion-col>-->
+<!--             <ion-button shape="round" expand="block">+ Credit</ion-button>-->
+<!--            </ion-col>-->
+<!--          </ion-row>-->
+<!--          <ion-row>-->
+<!--            <ion-col>-->
+<!--               <ion-button shape="round" expand="block">WithDraw</ion-button>-->
+<!--            </ion-col>-->
+<!--          </ion-row>-->
+<!--        </ion-grid>-->
+<!--      </ion-col>-->
+<!--    </ion-row>-->
+<!--  </ion-grid>-->
+<!--</div>-->
 
   <ion-list>
     <ion-list-header>