diff --git a/resources/beike/shop/default/css/cart.scss b/resources/beike/shop/default/css/cart.scss
index 882b73cf..9716cacc 100644
--- a/resources/beike/shop/default/css/cart.scss
+++ b/resources/beike/shop/default/css/cart.scss
@@ -8,6 +8,26 @@
  * @LastEditTime  2022-09-16 20:47:16
  */
 
+body.page-checkout, body.page-cart {
+  background-color: #f6f8fa;
+
+  .left-column {
+    @media (min-width: 992px) {
+      width: 70%;
+    }
+  }
+
+  .right-column {
+    @media (min-width: 992px) {
+      width: 30%;
+    }
+
+    @media (max-width: 768px) {
+      margin-top: 1.4rem;
+    }
+  }
+}
+
 body.page-cart {
   .cart-products-wrap {
     .table {
@@ -18,11 +38,11 @@ body.page-cart {
           border-color: #f0f2f4;
         }
 
-        tr {
-          &.active {
-            background-color: #fff6f1;
-          }
-        }
+        // tr {
+        //   &.active {
+        //     background-color: #fff6f1;
+        //   }
+        // }
       }
 
       thead {
@@ -45,9 +65,6 @@ body.page-cart {
   }
 
   .total-wrap {
-    border: none;
-    background-color: #F8F9FA;
-
     &.total-wrap-fixed {
       position: fixed;
       top: 0;
diff --git a/resources/beike/shop/default/css/global.scss b/resources/beike/shop/default/css/global.scss
index 3ef4c04f..194178f9 100644
--- a/resources/beike/shop/default/css/global.scss
+++ b/resources/beike/shop/default/css/global.scss
@@ -165,7 +165,6 @@ body[class^="page-account-"] {
     }
 
     .number-wrap {
-      background-color: #fff;
       padding: 0 4px;
       margin-bottom: .5rem;
     }
diff --git a/resources/beike/shop/default/css/page-checkout.scss b/resources/beike/shop/default/css/page-checkout.scss
index aabf99f4..2e595633 100644
--- a/resources/beike/shop/default/css/page-checkout.scss
+++ b/resources/beike/shop/default/css/page-checkout.scss
@@ -9,6 +9,8 @@
  */
 
 body.page-checkout {
+  background-color: #f6f8fa;
+
   .radio-line-wrap {
     .radio-line-item {
       display: flex;
@@ -95,18 +97,6 @@ body.page-checkout {
         border: none;
       }
     }
-    // .add-addres {
-    //   display: flex;
-    //   align-items: center; // flex-start | center
-    //   justify-content: center; // flex-end | center | space-between
-    //   flex-direction: column;
-    //   font-size: 1rem;
-    //   color: #666;
-
-    //   i {
-    //     font-size: 2rem;
-    //   }
-    // }
   }
 }
 
@@ -115,33 +105,15 @@ body.page-checkout, body.page-bk-stripe {
     margin-bottom: 2.6rem;
   }
 
-  .right-column {
-    position: relative;
-    @media (min-width: 992px) {
-      padding-left: 2rem;
-    }
-  }
-
   .checkout-title {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid #f1f1f1;
     padding-bottom: 16px;
     margin-bottom: 16px;
     position: relative;
-    // padding-left: 10px;
     display: flex;
     align-items: center; // flex-start | center
     justify-content: space-between; // flex-end | center | space-between
 
-    // &:before {
-    //   content: '';
-    //   position: absolute;
-    //   top: 2px;
-    //   left: 0;
-    //   background-color: $primary;
-    //   width: 3px;
-    //   height: 16px;
-    // }
-
     .btn {
       margin-bottom: -10px;
       &.icon {
@@ -151,18 +123,21 @@ body.page-checkout, body.page-bk-stripe {
   }
 
   .total-wrap {
-    padding: 1.4rem;
-    border: 3px solid #efefef;
-
     .card-body {
-      padding: 0;
+      @media (min-width: 768px) {
+        padding: 0;
+      }
     }
 
     .card-header {
       background-color: #fff;
-      padding: 0 0 .8rem;
       margin-bottom: 1rem;
       border-bottom: 1px solid #E6E6E6;
+
+      @media (min-width: 768px) {
+        padding: 0 0 .8rem;
+      }
+
       h5 {
         font-weight: bold;
       }
@@ -222,7 +197,6 @@ body.page-checkout, body.page-bk-stripe {
         align-items: center; // flex-start | center
         justify-content: space-between; // flex-end | center | space-between
         margin-bottom: 14px;
-        // flex-wrap: wrap;
         &:last-of-type {
           font-weight: bold;
 
@@ -232,16 +206,10 @@ body.page-checkout, body.page-bk-stripe {
             }
           }
         }
-        > span {
-          // font-weight: bold;
 
+        > span {
           &:first-of-type {
             font-size: .8rem;
-            // color: #3f3f3f;
-          }
-
-          &:last-of-type {
-            // color: #dc3545;
           }
         }
       }
diff --git a/themes/default/cart/cart.blade.php b/themes/default/cart/cart.blade.php
index 3c115bf4..8a29e87c 100644
--- a/themes/default/cart/cart.blade.php
+++ b/themes/default/cart/cart.blade.php
@@ -22,69 +22,77 @@
     @endif
 
     <div class="row mt-5" v-if="products.length">
-      <div class="col-12 col-md-9">
-        <div class="cart-products-wrap table-responsive">
-          <table class="table">
-            <thead>
-              <tr>
-                <th width="130">
-                  <input class="form-check-input" type="checkbox" value="" id="check-all" v-model="allSelected">
-                  <label class="form-check-label ms-1" for="check-all">
-                    {{ __('shop/carts.select_all') }}
-                  </label>
-                </th>
-                <th width="40%">{{ __('shop/carts.index') }}</th>
-                <th width="170">{{ __('shop/carts.commodity') }}</th>
-                <th width="170">{{ __('shop/carts.subtotal') }}</th>
-                <th width="100" class="text-end">{{ __('common.action') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="product, index in products" :key="index" :class="product.selected ? 'active' : ''">
-                <td>
-                  <div class="d-flex align-items-center p-image">
-                    <input class="form-check-input" type="checkbox" @change="checkedCartTr(index)" v-model="product.selected">
-                    <div class="border d-flex align-items-center justify-content-between wh-80 ms-3"><img :src="product.image" class="img-fluid"></div>
-                  </div>
-                </td>
-                <td>
-                  <div class="name text-truncate-2 mb-1 fw-bold" v-text="product.name"></div>
-                  <div class="text-size-min text-muted mb-1">@{{ product.variant_labels }}</div>
-                  <div class="price text-muted">@{{ product.price_format }}</div>
-                </td>
-                <td>
-                  <div class="quantity-wrap">
-                    <input type="text" class="form-control" @input="quantityChange(product.quantity, product.cart_id, product.sku_id)" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model.number="product.quantity" name="quantity" minimum="1">
-                    <div class="right">
-                      <i class="bi bi-chevron-up"></i>
-                      <i class="bi bi-chevron-down"></i>
-                    </div>
-                  </div>
-                </td>
-                <td>@{{ product.subtotal_format }}</td>
-                <td class="text-end">
-                  <button type="button" class="btn text-danger btn-sm px-0" @click.stop="checkedBtnDelete(product.cart_id)">
-                    <i class="bi bi-x-lg"></i> {{ __('common.delete') }}
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+      <div class="col-12 col-md-9 left-column">
+        <div class="card shadow-sm">
+          <div class="card-body p-lg-4">
+            <div class="p-lg-0"><h5 class="mb-3">{{ __('shop/carts.commodity') }}</h5></div>
+            <div class="cart-products-wrap table-responsive">
+              <table class="table">
+                <thead>
+                  <tr>
+                    <th width="130">
+                      <input class="form-check-input" type="checkbox" value="" id="check-all" v-model="allSelected">
+                      <label class="form-check-label ms-1" for="check-all">
+                        {{ __('shop/carts.select_all') }}
+                      </label>
+                    </th>
+                    <th width="40%">{{ __('shop/carts.index') }}</th>
+                    <th width="170">{{ __('shop/carts.commodity') }}</th>
+                    <th width="170">{{ __('shop/carts.subtotal') }}</th>
+                    <th width="100" class="text-end">{{ __('common.action') }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="product, index in products" :key="index" :class="product.selected ? 'active' : ''">
+                    <td>
+                      <div class="d-flex align-items-center p-image">
+                        <input class="form-check-input" type="checkbox" @change="checkedCartTr(index)" v-model="product.selected">
+                        <div class="border d-flex align-items-center justify-content-between wh-80 ms-3"><img :src="product.image" class="img-fluid"></div>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="name text-truncate-2 mb-1 fw-bold" v-text="product.name"></div>
+                      <div class="text-size-min text-muted mb-1">@{{ product.variant_labels }}</div>
+                      <div class="price text-muted">@{{ product.price_format }}</div>
+                    </td>
+                    <td>
+                      <div class="quantity-wrap">
+                        <input type="text" class="form-control" @input="quantityChange(product.quantity, product.cart_id, product.sku_id)" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model.number="product.quantity" name="quantity" minimum="1">
+                        <div class="right">
+                          <i class="bi bi-chevron-up"></i>
+                          <i class="bi bi-chevron-down"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td>@{{ product.subtotal_format }}</td>
+                    <td class="text-end">
+                      <button type="button" class="btn text-danger btn-sm px-0" @click.stop="checkedBtnDelete(product.cart_id)">
+                        <i class="bi bi-x-lg"></i> {{ __('common.delete') }}
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="col-12 col-md-3">
-        <div class="card total-wrap fixed-top-line">
-          <div class="card-header"><h5 class="mb-0">{{ __('shop/carts.product_total') }}</h5></div>
-          <div class="card-body">
-            <ul class="list-group list-group-flush">
-              <li class="list-group-item"><span>{{ __('shop/carts.all') }}</span><span>@{{ allProduct }}</span></li>
-              <li class="list-group-item"><span>{{ __('shop/carts.selected') }}</span><span>@{{ total_quantity }}</span></li>
-              <li class="list-group-item border-bottom-0"><span>{{ __('shop/carts.product_total') }}</span><span class="total-price">@{{ amount_format }}</span></li>
-              <li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
-                {{-- <a href="{{ shop_route('checkout.index', 'checkout') }}" class="btn btn-primary">去结账</a> --}}
-                <button type="button" class="btn btn-primary" @click="checkedBtnToCheckout">{{ __('shop/carts.to_checkout') }}</button>
-              </li>
-            </ul>
+      <div class="col-12 col-md-3 right-column">
+        <div class="card shadow-sm">
+          <div class="card-body p-lg-4">
+            <div class="card total-wrap fixed-top-line">
+              <div class="p-lg-0"><h5 class="mb-3">{{ __('shop/carts.product_total') }}</h5></div>
+              <div class="card-body p-lg-0">
+                <ul class="list-group list-group-flush">
+                  <li class="list-group-item"><span>{{ __('shop/carts.all') }}</span><span>@{{ allProduct }}</span></li>
+                  <li class="list-group-item"><span>{{ __('shop/carts.selected') }}</span><span>@{{ total_quantity }}</span></li>
+                  <li class="list-group-item border-bottom-0"><span>{{ __('shop/carts.product_total') }}</span><span class="total-price">@{{ amount_format }}</span></li>
+                  <li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
+                    <button type="button" class="btn btn-primary fw-bold" @click="checkedBtnToCheckout">{{ __('shop/carts.to_checkout') }}</button>
+                  </li>
+                </ul>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/themes/default/checkout.blade.php b/themes/default/checkout.blade.php
index cc0ecd78..b9af5e01 100644
--- a/themes/default/checkout.blade.php
+++ b/themes/default/checkout.blade.php
@@ -19,199 +19,214 @@
 
     <div class="row mt-5">
       <div class="col-12 col-md-8 left-column">
-        <div id="checkout-app" v-cloak>
-          <div class="checkout-black">
-            <div class="checkout-title">
-              <div class="d-flex">
-                <h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
-                <el-checkbox v-model="same_as_shipping_address">{{ __('shop/checkout.same_as_shipping_address') }}
-                </el-checkbox>
-              </div>
-              <button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i
-                  class="bi bi-x-lg"></i></button>
-            </div>
-            <div class="addresses-wrap">
-              <div class="row">
-                <template v-if="source.isLogin">
-                  <div class="col-6" v-for="address, index in source.addresses" :key="index"
-                    v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
-                    <div :class="['item', address.id == form.shipping_address_id ? 'active' : '']"
-                      @click="updateCheckout(address.id, 'shipping_address_id')">
-                      <div class="name-wrap">
-                        <span class="name">@{{ address.name }}</span>
-                        <span class="phone">@{{ address.phone }}</span>
-                      </div>
-                      <div class="zipcode">@{{ address.zipcode }}</div>
-                      <div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
-                        @{{ address.address_1 }}</div>
-                      <div class="address-bottom">
-                        <div>
-                          <span class="badge bg-success"
-                            v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
+        <div class="card shadow-sm">
+          <div class="card-body p-lg-4">
+            <div id="checkout-app" v-cloak>
+              <div class="checkout-black">
+                <div class="checkout-title">
+                  <div class="d-flex">
+                    <h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
+                    <el-checkbox v-model="same_as_shipping_address">{{ __('shop/checkout.same_as_shipping_address') }}
+                    </el-checkbox>
+                  </div>
+                  <button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i
+                      class="bi bi-x-lg"></i></button>
+                </div>
+                <div class="addresses-wrap">
+                  <div class="row">
+                    <template v-if="source.isLogin">
+                      <div class="col-6" v-for="address, index in source.addresses" :key="index"
+                        v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
+                        <div :class="['item', address.id == form.shipping_address_id ? 'active' : '']"
+                          @click="updateCheckout(address.id, 'shipping_address_id')">
+                          <div class="name-wrap">
+                            <span class="name">@{{ address.name }}</span>
+                            <span class="phone">@{{ address.phone }}</span>
+                          </div>
+                          <div class="zipcode">@{{ address.zipcode }}</div>
+                          <div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
+                            @{{ address.address_1 }}</div>
+                          <div class="address-bottom">
+                            <div>
+                              <span class="badge bg-success"
+                                v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
+                            </div>
+                            <a href="javascript:void(0)" class=""
+                              @click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
+                          </div>
                         </div>
-                        <a href="javascript:void(0)" class=""
-                          @click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
                       </div>
-                    </div>
-                  </div>
-                  <div class="col-6" v-if="!isAllAddress">
-                    <div class="item address-right">
-                      <button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
-                        @click="isAllAddress = true">{{ __('shop/checkout.choose_another_address') }}</button>
-                      <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'shipping_address_id')"><i
-                          class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
-                    </div>
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="col-6" v-if="source.guest_shipping_address">
-                    <div class="item active">
-                      <div class="name-wrap">
-                        <span class="name">@{{ source.guest_shipping_address.name }}</span>
-                        <span class="phone">@{{ source.guest_shipping_address.phone }}</span>
-                      </div>
-                      <div class="zipcode">
-                        <span>@{{ source.guest_shipping_address.zipcode }}</span>
-                        <span class="ms-1">@{{ source.guest_shipping_address.email }}</span>
-                      </div>
-                      <div class="address-info">@{{ source.guest_shipping_address.country }} @{{ source.guest_shipping_address.zone }} @{{ source.guest_shipping_address.city }}
-                        @{{ source.guest_shipping_address.address_1 }}</div>
-                      <div class="address-bottom">
-                        <div>
-                          <span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
+                      <div class="col-6" v-if="!isAllAddress">
+                        <div class="item address-right">
+                          <button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
+                            @click="isAllAddress = true">{{ __('shop/checkout.choose_another_address') }}</button>
+                          <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'shipping_address_id')"><i
+                              class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
                         </div>
-                        <a class="javascript:void(0)"
-                          @click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
                       </div>
-                    </div>
+                    </template>
+                    <template v-else>
+                      <div class="col-6" v-if="source.guest_shipping_address">
+                        <div class="item active">
+                          <div class="name-wrap">
+                            <span class="name">@{{ source.guest_shipping_address.name }}</span>
+                            <span class="phone">@{{ source.guest_shipping_address.phone }}</span>
+                          </div>
+                          <div class="zipcode">
+                            <span>@{{ source.guest_shipping_address.zipcode }}</span>
+                            <span class="ms-1">@{{ source.guest_shipping_address.email }}</span>
+                          </div>
+                          <div class="address-info">@{{ source.guest_shipping_address.country }} @{{ source.guest_shipping_address.zone }} @{{ source.guest_shipping_address.city }}
+                            @{{ source.guest_shipping_address.address_1 }}</div>
+                          <div class="address-bottom">
+                            <div>
+                              <span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
+                            </div>
+                            <a class="javascript:void(0)"
+                              @click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-6" v-if="!source.guest_shipping_address">
+                        <div class="item address-right">
+                          <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_shipping_address')"><i
+                              class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
+                        </div>
+                      </div>
+                    </template>
                   </div>
-                  <div class="col-6" v-if="!source.guest_shipping_address">
-                    <div class="item address-right">
-                      <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_shipping_address')"><i
-                          class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
-                    </div>
-                  </div>
-                </template>
+                </div>
               </div>
-            </div>
-          </div>
 
-          <div class="checkout-black" v-if='!same_as_shipping_address'>
-            <div class="checkout-title">
-              <div class="d-flex">
-                <h5 class="mb-0 me-4">{{ __('shop/checkout.payment_address') }}</h5>
-              </div>
-              <button class="btn btn-sm icon" v-if="isAllAddressPayment" @click="isAllAddressPayment = false"><i
-                  class="bi bi-x-lg"></i></button>
-            </div>
-            <div class="addresses-wrap">
-              <div class="row">
-                <template v-if="source.isLogin">
-                  <div class="col-6" v-for="address, index in source.addresses" :key="index"
-                    v-if="source.addresses.length && (form.payment_address_id == '' || address.id == form.payment_address_id || isAllAddressPayment)">
-                    <div :class="['item', address.id == form.payment_address_id ? 'active' : '']"
-                      @click="updateCheckout(address.id, 'payment_address_id')">
-                      <div class="name-wrap">
-                        <span class="name">@{{ address.name }}</span>
-                        <span class="phone">@{{ address.phone }}</span>
-                      </div>
-                      <div class="zipcode">@{{ address.zipcode }}</div>
-                      <div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
-                        @{{ address.address_1 }}</div>
-                      <div class="address-bottom">
-                        <div>
-                          <span class="badge bg-success"
-                            v-if="form.payment_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
+              <div class="checkout-black" v-if='!same_as_shipping_address'>
+                <div class="checkout-title">
+                  <div class="d-flex">
+                    <h5 class="mb-0 me-4">{{ __('shop/checkout.payment_address') }}</h5>
+                  </div>
+                  <button class="btn btn-sm icon" v-if="isAllAddressPayment" @click="isAllAddressPayment = false"><i
+                      class="bi bi-x-lg"></i></button>
+                </div>
+                <div class="addresses-wrap">
+                  <div class="row">
+                    <template v-if="source.isLogin">
+                      <div class="col-6" v-for="address, index in source.addresses" :key="index"
+                        v-if="source.addresses.length && (form.payment_address_id == '' || address.id == form.payment_address_id || isAllAddressPayment)">
+                        <div :class="['item', address.id == form.payment_address_id ? 'active' : '']"
+                          @click="updateCheckout(address.id, 'payment_address_id')">
+                          <div class="name-wrap">
+                            <span class="name">@{{ address.name }}</span>
+                            <span class="phone">@{{ address.phone }}</span>
+                          </div>
+                          <div class="zipcode">@{{ address.zipcode }}</div>
+                          <div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
+                            @{{ address.address_1 }}</div>
+                          <div class="address-bottom">
+                            <div>
+                              <span class="badge bg-success"
+                                v-if="form.payment_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
+                            </div>
+                            <a class="javascript:void(0)"
+                              @click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
+                          </div>
                         </div>
-                        <a class="javascript:void(0)"
-                          @click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
                       </div>
-                    </div>
-                  </div>
-                  <div class="col-6" v-if="!isAllAddressPayment">
-                    <div class="item address-right">
-                      <button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
-                        @click="isAllAddressPayment = true">{{ __('shop/checkout.choose_another_address') }}</button>
-                      <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'payment_address_id')"><i
-                          class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
-                    </div>
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="col-6" v-if="source.guest_payment_address">
-                    <div class="item active">
-                      <div class="name-wrap">
-                        <span class="name">@{{ source.guest_payment_address.name }}</span>
-                        <span class="phone">@{{ source.guest_payment_address.phone }}</span>
-                      </div>
-                      <div class="zipcode">@{{ source.guest_payment_address.zipcode }}</div>
-                      <div class="address-info">@{{ source.guest_payment_address.country }} @{{ source.guest_payment_address.zone }} @{{ source.guest_payment_address.city }}
-                        @{{ source.guest_payment_address.address_1 }}</div>
-                      <div class="address-bottom">
-                        <div>
-                          <span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
+                      <div class="col-6" v-if="!isAllAddressPayment">
+                        <div class="item address-right">
+                          <button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
+                            @click="isAllAddressPayment = true">{{ __('shop/checkout.choose_another_address') }}</button>
+                          <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'payment_address_id')"><i
+                              class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
                         </div>
-                        <a class="javascript:void(0)"
-                          @click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
                       </div>
-                    </div>
+                    </template>
+                    <template v-else>
+                      <div class="col-6" v-if="source.guest_payment_address">
+                        <div class="item active">
+                          <div class="name-wrap">
+                            <span class="name">@{{ source.guest_payment_address.name }}</span>
+                            <span class="phone">@{{ source.guest_payment_address.phone }}</span>
+                          </div>
+                          <div class="zipcode">@{{ source.guest_payment_address.zipcode }}</div>
+                          <div class="address-info">@{{ source.guest_payment_address.country }} @{{ source.guest_payment_address.zone }} @{{ source.guest_payment_address.city }}
+                            @{{ source.guest_payment_address.address_1 }}</div>
+                          <div class="address-bottom">
+                            <div>
+                              <span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
+                            </div>
+                            <a class="javascript:void(0)"
+                              @click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-6" v-if="!source.guest_payment_address">
+                        <div class="item address-right">
+                          <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_payment_address')"><i
+                              class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
+                        </div>
+                      </div>
+                    </template>
                   </div>
-                  <div class="col-6" v-if="!source.guest_payment_address">
-                    <div class="item address-right">
-                      <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_payment_address')"><i
-                          class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
-                    </div>
-                  </div>
-                </template>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
 
-        <div class="checkout-black">
-          <h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
-          <div class="radio-line-wrap">
-            @foreach ($payment_methods as $payment)
-              <div class="radio-line-item {{ $payment['code'] == $current['payment_method_code'] ? 'active' : '' }}" data-key="payment_method_code" data-value="{{ $payment['code'] }}">
-                <div class="left">
-                  <span class="radio"></span>
-                  {{-- <input name="payment" type="radio" {{ $payment['code'] == $current['payment_method_code'] ? 'checked' : ''  }} value="{{ $payment['code'] }}" class="form-check-input"> --}}
-                  <img src="{{ $payment['icon'] }}" class="img-fluid">
-                </div>
-                <div class="right ms-3">
-                  <div class="title">{{ $payment['name'] }}</div>
-                  <div class="sub-title">{!! $payment['description'] !!}</div>
-                </div>
+            <div class="checkout-black">
+              <h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
+              <div class="radio-line-wrap">
+                @foreach ($payment_methods as $payment)
+                  <div class="radio-line-item {{ $payment['code'] == $current['payment_method_code'] ? 'active' : '' }}" data-key="payment_method_code" data-value="{{ $payment['code'] }}">
+                    <div class="left">
+                      <span class="radio"></span>
+                      {{-- <input name="payment" type="radio" {{ $payment['code'] == $current['payment_method_code'] ? 'checked' : ''  }} value="{{ $payment['code'] }}" class="form-check-input"> --}}
+                      <img src="{{ $payment['icon'] }}" class="img-fluid">
+                    </div>
+                    <div class="right ms-3">
+                      <div class="title">{{ $payment['name'] }}</div>
+                      <div class="sub-title">{!! $payment['description'] !!}</div>
+                    </div>
+                  </div>
+                @endforeach
               </div>
-            @endforeach
-          </div>
-        </div>
+            </div>
 
-        <div class="checkout-black">
-          <h5 class="checkout-title">{{ __('shop/checkout.delivery_method') }}</h5>
-          <div class="radio-line-wrap">
-            @foreach ($shipping_methods as $methods)
-              @foreach ($methods['quotes'] as $shipping)
-              <div class="radio-line-item {{ $shipping['code'] == $current['shipping_method_code'] ? 'active':'' }}" data-key="shipping_method_code" data-value="{{ $shipping['code'] }}">
-                <div class="left">
-                  {{-- <input name="shipping" {{ $shipping['code'] == $current['shipping_method_code'] ? 'checked' : ''  }} type="radio" value="{{ $shipping['code'] }}" class="form-check-input"> --}}
-                  <span class="radio"></span>
-                  <img src="{{ $shipping['icon'] }}" class="img-fluid">
-                </div>
-                <div class="right ms-3">
-                  <div class="title">{{ $shipping['name'] }}</div>
-                  <div class="sub-title">{!! $shipping['description'] !!}</div>
-                  <div class="mt-2">{!! $shipping['html'] ?? '' !!}</div>
-                </div>
+            <div class="checkout-black">
+              <h5 class="checkout-title">{{ __('shop/checkout.delivery_method') }}</h5>
+              <div class="radio-line-wrap">
+                @foreach ($shipping_methods as $methods)
+                  @foreach ($methods['quotes'] as $shipping)
+                  <div class="radio-line-item {{ $shipping['code'] == $current['shipping_method_code'] ? 'active':'' }}" data-key="shipping_method_code" data-value="{{ $shipping['code'] }}">
+                    <div class="left">
+                      {{-- <input name="shipping" {{ $shipping['code'] == $current['shipping_method_code'] ? 'checked' : ''  }} type="radio" value="{{ $shipping['code'] }}" class="form-check-input"> --}}
+                      <span class="radio"></span>
+                      <img src="{{ $shipping['icon'] }}" class="img-fluid">
+                    </div>
+                    <div class="right ms-3">
+                      <div class="title">{{ $shipping['name'] }}</div>
+                      <div class="sub-title">{!! $shipping['description'] !!}</div>
+                      <div class="mt-2">{!! $shipping['html'] ?? '' !!}</div>
+                    </div>
+                  </div>
+                  @endforeach
+                @endforeach
               </div>
-              @endforeach
-            @endforeach
+            </div>
           </div>
         </div>
       </div>
 
       <div class="col-12 col-md-4 right-column">
-        <div class="card total-wrap fixed-top-line">
+        @if (!current_customer())
+          <div class="card total-wrap mb-4 fixed-top-line p-lg-4 shadow-sm">
+            <div class="card-header">
+              <h5 class="mb-0">{{ __('shop/login.login_and_sign') }}</h5>
+            </div>
+            <div class="card-body">
+              <button class="btn btn-outline-dark guest-checkout-login"><i class="bi bi-box-arrow-in-right me-2"></i>{{ __('shop/login.login_and_sign') }}</button>
+            </div>
+          </div>
+        @endif
+
+        <div class="card total-wrap fixed-top-line p-lg-4 shadow-sm">
           <div class="card-header d-flex align-items-center justify-content-between">
             <h5 class="mb-0">{{ __('shop/checkout.cart_totals') }}</h5>
             <span class="rounded-circle bg-primary">{{ $carts['quantity'] }}</span>
@@ -242,7 +257,7 @@
               @endforeach
             </ul>
             <div class="d-grid gap-2 mt-3">
-              <button class="btn btn-primary" type="button" id="submit-checkout">{{ __('shop/checkout.submit_order') }}</button>
+              <button class="btn btn-primary fw-bold" type="button" id="submit-checkout">{{ __('shop/checkout.submit_order') }}</button>
             </div>
           </div>
         </div>
@@ -269,6 +284,10 @@
     $('#submit-checkout').click(function(event) {
       app.checkedBtnCheckoutConfirm();
     });
+
+    $('.guest-checkout-login').click(function(event) {
+      bk.openLogin();
+    });
   });
 
   var app = new Vue({