diff --git a/src/app/cart/cart.page.html b/src/app/cart/cart.page.html
index 4067ee8..665b299 100644
--- a/src/app/cart/cart.page.html
+++ b/src/app/cart/cart.page.html
@@ -169,18 +169,20 @@
                 </ion-slides>
             </div>
         </div>
-        <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
-            <div class="continue" (click)="goToPage('productlist')">CONTINUE SHOPING</div>
-            <div class="checkout" (click)="next(1)">CHECKOUT</div>
-        </div>
-        <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
-            PAY
-        </div>
-        <!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
-            FINISH
-        </div> -->
     </div>
 </ion-content>
+<ion-footer>
+    <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
+        <div class="continue" (click)="goToPage('productlist')">CONTINUE SHOPING</div>
+        <div class="checkout" (click)="next(1)">CHECKOUT</div>
+    </div>
+    <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
+        PAY
+    </div>
+    <!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
+        FINISH
+    </div> -->
+</ion-footer>
 <!-- <div class="loader">
     <div class="lds-ripple">
         <div></div>
diff --git a/src/app/cart/cart.page.scss b/src/app/cart/cart.page.scss
index 8be077b..f386736 100644
--- a/src/app/cart/cart.page.scss
+++ b/src/app/cart/cart.page.scss
@@ -49,7 +49,7 @@
         .cart_content {
             width: calc(100% - 40px);
             margin: 0 auto;
-            height: 500px;
+            height: calc(100vh - 220px);
             border-radius: 10px;
             background-color: #fff;
             .checkout_list {
@@ -394,54 +394,52 @@
             }
         }
     }
-    .footer_btn {
-        width: 100%;
-        position: fixed;
-        bottom: 0px;
-        z-index: 999;
-        left: 0px;
-        right: 0px;
-        box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
+}
+
+.footer_btn {
+    width: 100%;
+    z-index: 999;
+    left: 0px;
+    right: 0px;
+    box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
+    background-color: rgba(41, 40, 91, 1);
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+    padding: 15px;
+    font-weight: 300;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+}
+
+.footer_btnbay {
+    width: 100%;
+    box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
+    z-index: 999;
+    left: 0px;
+    right: 0px;
+    border-radius: 15px;
+    .continue {
+        width: 50%;
+        border-top-left-radius: 15px;
+        text-align: center;
+        font-size: 18px;
+        padding: 15px;
+        font-weight: 300;
+        float: left;
+        border-top: 1px solid #d7d5e4;
+        border-left: 1px solid #d7d5e4;
+    }
+    .checkout {
+        width: 50%;
+        border-top-right-radius: 15px;
         background-color: rgba(41, 40, 91, 1);
+        border: 1px solid rgba(41, 40, 91, 1);
         text-align: center;
         color: #fff;
         font-size: 18px;
         padding: 15px;
         font-weight: 300;
-        border-top-left-radius: 15px;
-        border-top-right-radius: 15px;
-    }
-    .footer_btnbay {
-        width: 100%;
-        box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
-        position: fixed;
-        bottom: 0px;
-        z-index: 999;
-        left: 0px;
-        right: 0px;
-        border-radius: 15px;
-        .continue {
-            width: 50%;
-            border-top-left-radius: 15px;
-            text-align: center;
-            font-size: 18px;
-            padding: 15px;
-            font-weight: 300;
-            float: left;
-            border-top: 1px solid #d7d5e4;
-            border-left: 1px solid #d7d5e4;
-        }
-        .checkout {
-            width: 50%;
-            border-top-right-radius: 15px;
-            background-color: rgba(41, 40, 91, 1);
-            border: 1px solid rgba(41, 40, 91, 1);
-            text-align: center;
-            color: #fff;
-            font-size: 18px;
-            padding: 15px;
-            font-weight: 300;
-            float: right;
-        }
+        float: right;
     }
 }
\ No newline at end of file
diff --git a/src/app/productdetail/productdetail.page.html b/src/app/productdetail/productdetail.page.html
index 7abf637..447134d 100644
--- a/src/app/productdetail/productdetail.page.html
+++ b/src/app/productdetail/productdetail.page.html
@@ -4,7 +4,7 @@
     </button>
     <div class="nav_title floatLeft">
     </div>
-    <button class="nav_btn floatRight">
+    <button class="nav_btn nav_cart floatRight">
   </button>
     <div class="clear"></div>
 </div>
@@ -42,7 +42,7 @@
                               </label>
                             </button>
                             </li>
-                        </ion-slide>                        
+                        </ion-slide>
                     </ion-slides>
                 </ul>
             </div>
@@ -170,6 +170,9 @@
             </div>
         </div>
     </div>
+
+</ion-content>
+<ion-footer>
     <div class="footer_div">
         <div class="footer_options">
             <button class="share"></button>
@@ -178,4 +181,4 @@
         </div>
         <div class="footer_btn" (click)="cartService.buyNow(product)">BUY NOW</div>
     </div>
-</ion-content>
\ No newline at end of file
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/productdetail/productdetail.page.scss b/src/app/productdetail/productdetail.page.scss
index fcaf6cb..f94449b 100644
--- a/src/app/productdetail/productdetail.page.scss
+++ b/src/app/productdetail/productdetail.page.scss
@@ -279,7 +279,6 @@
 }
 
 .footer_div {
-    position: fixed;
     bottom: 0px;
     height: 50px;
     left: 0px;
diff --git a/src/app/productlist/productlist.page.html b/src/app/productlist/productlist.page.html
index 905471b..4649655 100644
--- a/src/app/productlist/productlist.page.html
+++ b/src/app/productlist/productlist.page.html
@@ -18,7 +18,6 @@
             </div>
             <div class="viewset floatRight">
                 <div class="grid_view grid_act floatRight" (click)="gridToggle()" [class.line_view]="onGrid">
-
                 </div>
                 <div class="clear"></div>
             </div>
@@ -37,7 +36,7 @@
                 </div>
                 <h5>{{product.prodName}}</h5>
                 <p>A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
-            </li> 
+            </li>
         </ul>
     </div>
     <div class="sort_wrappper" *ngIf="isShow" [@slideInOut]>
diff --git a/src/assets/cart_icon.png b/src/assets/cart_icon.png
new file mode 100644
index 0000000..9228e1f
Binary files /dev/null and b/src/assets/cart_icon.png differ
diff --git a/src/global.scss b/src/global.scss
index 2e41e74..c211491 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -491,6 +491,14 @@ app-deliverypop {
     }
 }
 
+.nav_cart {
+    background-image: url("./assets/cart_icon.png");
+    img {
+        width: 25px;
+        display: none;
+    }
+}
+
 ion-header {
     z-index: 9999 !important;
     order: 0 !important;