diff --git a/src/components/common/ConfirmationDialog.vue b/src/components/common/ConfirmationDialog.vue
index fd78025..29c5101 100644
--- a/src/components/common/ConfirmationDialog.vue
+++ b/src/components/common/ConfirmationDialog.vue
@@ -26,27 +26,29 @@
         <v-card-actions class="px-4">
           <v-row no-gutters>
             <v-col cols="12">
-              <v-hover v-slot:default="{ hover }">
+              <v-hover v-slot:default="{ isHovering , props}">
                 <v-btn
                   class="text-uppercase body-font ma-2 button-background"
-                  tile
-                  large
-                  depressed
-                  :outlined="hover"
-                  :color="hover?'white':'primary'"
-                  :class="hover?'primary--text':'white--text'"
+                  v-bind="props"
+                  size="large"
+                  rounded="0" 
                   @click="onAction(false)"
+                    :variant="isHovering ? 'outlined' : 'outlined'"
+                  :class="
+                  isHovering ? ' bg-white text-error' : 'bg-error'
+                  "
                 >CANCEL</v-btn>
               </v-hover>
-              <v-hover v-slot:default="{ hover }">
+              <v-hover v-slot:default="{  isHovering , props }">
                 <v-btn
                   class="text-uppercase body-font ma-2 button-background"
-                  :outlined="hover"
-                  :color="hover?'white':'error'"
-                  :class="hover?'error--text':'white--text'"
-                  tile
-                  large
-                  depressed
+                   :variant="isHovering ? 'outlined' : 'outlined'"
+                  :class="
+                  isHovering ? ' bg-white text-primary' : 'bg-primary'
+                  "
+                  v-bind="props"
+                  size="large"
+                  rounded="0" 
                   @click="onAction(true)"
                 >OK</v-btn>
               </v-hover>
diff --git a/src/components/retailer/cart-product/CartProductList.vue b/src/components/retailer/cart-product/CartProductList.vue
index 8f99b0c..35f7559 100644
--- a/src/components/retailer/cart-product/CartProductList.vue
+++ b/src/components/retailer/cart-product/CartProductList.vue
@@ -4,6 +4,7 @@
       <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
     </v-col>-->
     <v-col v-if="cartItems">
+     
       <v-card
         elevation="0"
         class="mb-4"
@@ -279,18 +280,23 @@
           </v-col>
           <!---------------------------cart page--------------------------------------------->
           <v-col cols="8" class="py-0" v-show="cartProductPage">
-            <v-row>
+            <v-row class="my-3">
               <v-col cols="12" sm="6" md="5" lg="6">
                 <v-row>
                   <p
-                    class="fontsize-14 black--text float-left"                    
+                    class=" mt-4
+                      mb-6
+                      fontsize-14
+                      text-black
+                      float-left
+                      cursor-pointer"                    
                   >
-                    {{ product.name }}
+                   {{ product.name }}
                   </p>
                 </v-row>
                 <v-row>
                   <p
-                    class="fontsize-14 text-uppercase"
+                    class="fontsize-14  mb-6 text-uppercase"
                     v-show="cartProductPage"
                   >
                     Sku {{ product.sku }}
@@ -298,7 +304,7 @@
                 </v-row>
                 <v-row>
                   <p
-                    class="fontsize-14 text-uppercase"
+                    class=" fontsize-14  mb-6 text-uppercase"
                     v-show="cartProductPage"
                   >
                     UPC {{ product.customAttributes.upc }}
@@ -322,26 +328,29 @@
                         <p class="fontsize-14 mb-0 pb-10">Qty.</p>
                       </v-col>
                       <v-col class="pl-0 pt-0">
-                        <v-hover v-slot:default="{ hover }">
-                          <v-select
-                            :items="
+                        <v-hover v-slot="{ isHovering, props }">
+                         <v-select
+                             :items="
                               qtyPriceOptions(
                                 product.customAttributes.qtyPrice,
                                 product.qty,
                                 index
                               )
                             "
-                            class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon"
-                            dense
+                            class="fontsize-16
+                              line-height-21
+                              ls-n009
+                              font-weight-400 
+                              cartproductlist-select-button 
+                              "
+      
+                            variant="outlined"
+                            density="compact"
+                            v-bind="props"
                             attach
-                            flat
-                            solo
-                            outlined
-                            :class="hover ? 'primary--text' : 'black--text'"
-                            item-text="price"
-                            item-value="qty"
-                            single-line
-                            @change="
+                            :class="isHovering ? 'text-primary' : 'text-black'"
+                              v-model="selectedQty[index]"
+                            @update:modelValue="
                               updateToCart(
                                 product.name,
                                 product.sku,
@@ -358,26 +367,14 @@
                                 product.parentSku
                               )
                             "
-                            v-model="selectedQty[index]"
-                            ref="selectedCartQty3"
+                           :model-value="selectedQty[index]"
+                            ref="selectedCartQty4"
                             background-color="transparent"
-                            append-icon="mdi-plus"
-                          >
-                            <template v-slot:selection="data">
-                              <span class="pl-1 fontsize-14">{{
-                                data.item.qty
-                              }}</span>
-                            </template>
-                            <template v-slot:item="data">
-                              <template>
-                                <v-list-item-content>
-                                  <v-list-item-title class="text-uppercase">{{
-                                    data.item.qty
-                                  }}</v-list-item-title>
-                                </v-list-item-content>
-                              </template>
-                            </template>
-                          </v-select>
+                            append-inner-icon="mdi-plus"
+                            item-value="qty"
+                            item-title="qty"
+                             item-children="qty"
+                          ></v-select>
                         </v-hover>
                       </v-col>
                     </v-row>
@@ -386,16 +383,8 @@
                         <p class="fontsize-14 mb-0 pb-10">Qty.</p>
                       </v-col>
                       <v-col class="pl-0 pt-0">
-                        <!--<v-select
-                          class="fontsize-14 title-color-black cartproductlist-select-button"
-                          :items="numberOptions(product.customAttributes.baMinSalesQty,product.customAttributes.baQtyIncrements,product.qty,index)"
-                          v-model="selectedQty[index]"
-                          dense
-                          flat
-                          solo
-                          @change="updateToCart(product.sku,product.itemId,index)"
-                        ></v-select>-->
-                        <v-hover v-slot:default="{ hover }">
+                        
+                        <v-hover v-slot:default="{ isHovering, props }">
                           <v-select
                             :items="
                               numberOptions(
@@ -405,15 +394,21 @@
                                 index
                               )
                             "
-                            class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon"
-                            dense
+                            class="                               
+                              fontsize-16
+                              line-height-21
+                              ls-n009
+                              font-weight-400 
+                              cartproductlist-select-button                         
+                              "
+      
+                            variant="outlined"
+                            density="compact"
+                            v-bind="props"
                             attach
-                            flat
-                            solo
-                            outlined
-                            :class="hover ? 'primary--text' : 'black--text'"
-                            single-line
-                            @change="
+                            :class="isHovering ? 'text-primary' : 'text-black'"
+                              v-model="selectedQty[index]"
+                            @update:modelValue="
                               updateToCart(
                                 product.name,
                                 product.sku,
@@ -427,13 +422,13 @@
                                 product.customAttributes.isPersonalize,
                                 product.customAttributes.builderVersion,
                                 product.ccid,
-                                product.parentSku
+                                product.parentSku 
                               )
                             "
-                            v-model="selectedQty[index]"
+                         :model-value="selectedQty[index]"
                             ref="selectedCartQty4"
                             background-color="transparent"
-                            append-icon="mdi-plus"
+                            append-inner-icon="mdi-plus"
                           ></v-select>
                         </v-hover>
                       </v-col>
@@ -479,13 +474,17 @@
               </div>
             </v-row>
           </v-col>
+           
           <!------------------------------------------------------------------------------------->
-          <v-row class="mr-1" v-show="checkOut">
+          <v-row class="ma-0 pb-4 pt-5" v-show="checkOut">
             <v-col align="right">
                
               <a
-                class="fontsize-14 black--text text-uppercase cartproductlist-action-link"
-                @click.stop="
+                class=" fontsize-14
+                  text-black text-uppercase
+                  cartproductlist-action-link
+                  cursor-pointer"
+                 @click.stop="
                   remove(
                     product.name,
                     product.sku,
@@ -500,10 +499,7 @@
           </v-row>
         </v-row>
         <v-row>
-          <v-divider
-            class="primary"
-            v-show="cartProductPage && cartItems.length > 1"
-          ></v-divider>
+          <div class="hr-line" v-show="cartProductPage && cartItems.length > 1"></div> 
         </v-row>
       </v-card>
       <v-col class="text-center mb-12" v-if="isGateModulePage">
@@ -530,11 +526,15 @@
         </v-hover>
       </v-col>
     </v-col>
-    <ConfirmationDialog
-      :confirmationDialog="confirmationDialogFlag"
+    
+     <ConfirmationDialog
+      :key="confirmationDialog"
+      :confirmationDialog="confirmationDialog"
       :confirmationDetails="confirmation"
-      @actionRemove="removeProduct"
+       @actionRemove="removeProduct"
+       v-if="confirmationDialog"
     ></ConfirmationDialog>
+
   </div>
 </template>
 <script>
@@ -567,7 +567,7 @@ export default {
     quantity: "25",
     savFromKey: "Ub07GxNhS3yyoDfO",
     ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
-    confirmationDialogFlag: false,
+    confirmationDialog: false,
     confirmation: {
       confirmationMessage: "",
     },
@@ -750,11 +750,12 @@ export default {
       }
     },
     remove(productName, sku, itemId, parentSku,product) {
-      this.productDetails=product
-      console.log(sku, parentSku);
+     
+      this.productDetails = product;
+     
       this.productId = itemId;
       this.removeProdcutName = productName;
-      (this.confirmationDialogFlag = true),
+      (this.confirmationDialog = true),
         (this.confirmation = {
           confirmationMessage:
             "Are you sure you would like to remove this item from the shopping cart?",
@@ -1110,7 +1111,7 @@ export default {
       //let token = getAuthUser();
       try {
         if (action.submit) {
-          this.confirmationDialogFlag = false;
+          this.confirmationDialog = false;
           if (this.userAuth) {
             try {
               await this.$store.dispatch("userCartProduct/removeCartProduct", {
@@ -1176,7 +1177,7 @@ export default {
           timeout: 3000,
         };
       }
-      this.confirmationDialogFlag = false;
+      this.confirmationDialog = false;
       this.removeProdcutName = "";
       this.confirmation = {
         confirmationMessage: "",
diff --git a/src/components/retailer/retailer-search/RetailerSearchProducts.vue b/src/components/retailer/retailer-search/RetailerSearchProducts.vue
index 25e5a7f..f3db142 100644
--- a/src/components/retailer/retailer-search/RetailerSearchProducts.vue
+++ b/src/components/retailer/retailer-search/RetailerSearchProducts.vue
@@ -1,226 +1,221 @@
-<template> 
-<div>
-      <v-row v-if="searchResults.page.length && !inProgress" class="mx-4"> 
-        <v-col cols="12" lg="12" md="12" sm="12"  >
-          <v-row v-if="inProgress">
-            <v-col
-              v-for="(i, index) in 9"
-              v-bind:key="index"
-              lg="4"
-              md="4"
-              sm="4"
-              cols="12"
-              class=" cursor-pointer"
-            >
-              <v-skeleton-loader type="card"></v-skeleton-loader>
-            </v-col>
-          </v-row>
-          <v-row v-if="searchResults.page.length > 0">
-            <v-col
-              v-for="(product, index) in searchResults.page"
-              v-bind:key="index"
-              lg="4"
-              md="4"
-              sm="4"
-              cols="12"
-              class=" cursor-pointer "
-             
-            >
-              <v-img
-                :src="imageBasePathUrl + product.i + imageBaseParams"
-                width="100%"
-                :alt="product.n"
-                :title="product.n"
-              ></v-img>
-              <v-row   >
-                <v-col cols="12"  >
-                  <h1
-                    class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
-                  >{{ product.n }}
+<template>
+  <div>
+    <v-row v-if="searchResults.page.length && !inProgress" class="mx-4">
+      <v-col cols="12" lg="12" md="12" sm="12">
+        <v-row v-if="inProgress">
+          <v-col
+            v-for="(i, index) in 9"
+            v-bind:key="index"
+            lg="4"
+            md="4"
+            sm="4"
+            cols="12"
+            class="cursor-pointer"
+          >
+            <v-skeleton-loader type="card"></v-skeleton-loader>
+          </v-col>
+        </v-row>
+        <v-row v-if="searchResults.page.length > 0">
+          <v-col
+            v-for="(product, index) in searchResults.page"
+            v-bind:key="index"
+            lg="4"
+            md="4"
+            sm="4"
+            cols="12"
+            class="cursor-pointer"
+          >
+            <v-img
+              :src="imageBasePathUrl + product.i + imageBaseParams"
+              width="100%"
+              :alt="product.n"
+              :title="product.n"
+            ></v-img>
+            <v-row>
+              <v-col cols="12">
+                <h1
+                  class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
+                >
+                  {{ product.n }}
                 </h1>
-                </v-col>
-                <v-col cols="5" class="py-0">
-                  <h1
-                    class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
-                  >
-                   SKU {{product.sku}}</h1>
-                </v-col>
-                <v-col cols="7" class="py-0">
-                  <p
-                    v-if="product.lp"
-                    class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
-                  >
-                    From ${{ product.lp }}
-                    {{ product.u }}
-                  </p>
-                  <div
-                    v-else
-                    class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
-                  >
-                    <span v-if="product.sp">
-                      <s>${{priceFormatter(product.p)}}</s> &nbsp;
-                      <span class="red--text mb-0"> ${{ roundUp(product.sp) }}</span>  / {{ product.u }}
+              </v-col>
+              <v-col cols="5" class="py-0">
+                <h1
+                  class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
+                >
+                  SKU {{ product.sku }}
+                </h1>
+              </v-col>
+              <v-col cols="7" class="py-0">
+                <p
+                  v-if="product.lp"
+                  class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
+                >
+                  From ${{ product.lp }}
+                  {{ product.u }}
+                </p>
+                <div
+                  v-else
+                  class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
+                >
+                  <span v-if="product.sp">
+                    <s>${{ priceFormatter(product.p) }}</s> &nbsp;
+                    <span class="text-red mb-0">
+                      ${{ roundUp(product.sp) }}</span
+                    >
+                    / {{ product.u }}
+                  </span>
+                  <span v-else-if="product.p != 0">
+                    <span>
+                      ${{ priceFormatter(product.p) }} / {{ product.u }}
                     </span>
-                    <span v-else-if="product.p != 0">
-                      <span>
-                        ${{priceFormatter(product.p ) }} /  {{ product.u }}
-                      </span>
-                    </span>
-                    <span v-else>
-                      <p>TBD</p>
-                    </span>
-                  </div>
-                </v-col>
-                <v-col cols="12" class="float-right" >
+                  </span>
+                  <span v-else>
+                    <p>TBD</p>
+                  </span>
+                </div>
+              </v-col>
+              <v-col cols="12" class="float-right">
                 <v-hover v-slot:default="{ isHovering, props }">
-              <v-btn
-                :disabled="inProgress"
-                block
-                x-large
-                 v-bind="props"
-                :outlined="!inProgress ? hover:false"
-                :color="isHovering?'white':'primary'"
-                :class="isHovering?' text-primary':'text-white'"
-                class="text-uppercase ls-0 body productpage-button"
-                tile
-                depressed
-                @click="addToCart(product.sku,product.mq)"
-              >
-                <v-progress-circular
-                  align="center"
-                  :size="40"
-                  block
-                  color="primary"
-                  indeterminate
-                  v-if="inProgress"
-                ></v-progress-circular>
-               <span v-if="!inProgress">ADD TO CART</span>
-              </v-btn>
-            </v-hover>
-                </v-col>
-              </v-row> 
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
-       <v-row v-else class="text-center">
-           <v-col
-            lg="12"
-              md="12"
-              sm="12"
-              cols="12" v-if="inProgress">
-              <v-progress-circular :size="20" color="primary" indeterminate ></v-progress-circular>
-            </v-col>
-            <v-col
-            lg="12"
-              md="12"
-              sm="12"
-              cols="12" v-else>
-             
-              <v-alert small class="ma-0 pa-0" type="error" text >{{
-                noProducts
-              }}</v-alert>
-            </v-col>
-          </v-row> 
- 
-    </div>
+                  <v-btn
+                    :disabled="inProgress"
+                    block
+                    size="x-large"
+                    v-bind="props"
+                    :variant="isHovering ? 'outlined' : 'outlined'"
+                    :class="
+                      isHovering ? ' bg-white text-primary' : 'bg-primary'
+                    "
+                    class="text-uppercase ls-0 body productpage-button"
+                   
+                    @click="addToCart(product.sku, product.mq)"
+                  >
+                    <v-progress-circular
+                      align="center"
+                      :size="40"
+                      block
+                      color="primary"
+                      indeterminate
+                      v-if="inProgress"
+                    ></v-progress-circular>
+                    <span v-if="!inProgress">ADD TO CART</span>
+                  </v-btn>
+                </v-hover>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+    <v-row v-else class="text-center">
+      <v-col lg="12" md="12" sm="12" cols="12" v-if="inProgress">
+        <v-progress-circular
+          :size="20"
+          color="primary"
+          indeterminate
+        ></v-progress-circular>
+      </v-col>
+      <v-col lg="12" md="12" sm="12" cols="12" v-else>
+        <v-alert small class="ma-0 pa-0" type="error" text>{{
+          noProducts
+        }}</v-alert>
+      </v-col>
+    </v-row>
+  </div>
 </template>
 <script>
 /* eslint-disable no-alert, no-console ,  no-debugger */
 //import * as easings from "vuetify/es5/services/goto/easing-patterns";
 import { mapState } from "vuex";
- import { priceFormatter } from "@/services/util.service";
+import { priceFormatter } from "@/services/util.service";
 
 export default {
   name: "RetailerSearchProducts",
-  components: {
-  },
+  components: {},
   props: [
     "criteria",
     "searchPageContent",
     "breadcrumbData",
-    "categoryPageContent"
+    "categoryPageContent",
   ],
   computed: {
     ...mapState({
-      searchResults: state => state.catalogBrowser.searchResults,  
-      inProgress: state => state.catalogBrowser.inProgress,
+      searchResults: (state) => state.catalogBrowser.searchResults,
+      inProgress: (state) => state.catalogBrowser.inProgress,
     }),
-   
+
     imageBasePathUrl() {
       return import.meta.env.VITE_APP_IMAGE_PATH_URL;
     },
     imageBaseParams() {
       return import.meta.env.VITE_APP_IMAGE_CATEGORY_PARAMS;
     },
-    isIpadOrMobile: function() {
+    isIpadOrMobile: function () {
       return this.$vuetify.display.mdAndDown ? true : false;
     },
-    isIpad: function() {
+    isIpad: function () {
       return this.$vuetify.display.smOnly || this.$vuetify.display.mdOnly
         ? true
         : false;
     },
-    isMobile: function() {
+    isMobile: function () {
       return this.$vuetify.display.xs ? true : false;
     },
-     userAuth: function() {
+    userAuth: function () {
       return this.$store.state.auth.userAuth;
     },
   },
-  watch: {
-  },
+  watch: {},
   data: () => ({
-      priceFormatter: priceFormatter,
-    menu: false, 
+    priceFormatter: priceFormatter,
+    menu: false,
     showDrawarFilter: false,
     noProducts: "No products found.",
-     snackbar: {
+    snackbar: {
       show: false,
       message: null,
       color: null,
-      timeout: 0
+      timeout: 0,
     },
   }),
   methods: {
-     roundUp(num) {
+    roundUp(num) {
       var with2Decimals = num.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0];
       return with2Decimals;
     },
-   async  addToCart(sku,qty) {
-      if (sku) {        
+    async addToCart(sku, qty) {
+      if (sku) {
         if (this.userAuth) {
-         await this.$store
+          debugger
+          await this.$store
             .dispatch("userCartProduct/addToCart", {
               sku: sku,
-              qty:qty,
+              qty: qty,
               ccid: null,
               price: null,
-              personalizeDetails: null
+              personalizeDetails: null,
             })
-            .then(() => { 
-               this.snackbar = {
+            .then(() => {
+              this.snackbar = {
                 message: "Product Added Successfully",
                 color: "success",
                 show: true,
-                timeout: 2000
+                timeout: 2000,
               };
               this.$store.dispatch("userCartProduct/cartProductList");
               this.$emit("actionClose", this.snackbar);
-             
             })
-            .catch((error) => {              
-              console.log("error",error)
+            .catch((error) => {
+              console.log("error", error);
               this.snackbar = {
                 message: error.message,
                 color: "error",
                 show: true,
-                timeout: 2000
+                timeout: 2000,
               };
-                 this.$emit("actionClose", this.snackbar);
+              this.$emit("actionClose", this.snackbar);
             });
         }
-        
       } else {
         this.errorMessage = "Please Select Quantity";
       }
@@ -234,8 +229,7 @@ export default {
     },
   },
 
-  created() {
-  }
+  created() {},
 };
 </script>
 <style lang="scss" >
diff --git a/src/routes/retailer/cart_products.scss b/src/routes/retailer/cart_products.scss
index 6413e5f..88e705e 100644
--- a/src/routes/retailer/cart_products.scss
+++ b/src/routes/retailer/cart_products.scss
@@ -1,3 +1,7 @@
 .cart-products-button.v-btn:before{
     background-color: transparent !important;
+}
+.hr-line{
+    background-color: #2850da;
+    height: 1px;
 }
\ No newline at end of file
diff --git a/src/routes/retailer/cart_products.vue b/src/routes/retailer/cart_products.vue
index 36f6e39..1dc630d 100644
--- a/src/routes/retailer/cart_products.vue
+++ b/src/routes/retailer/cart_products.vue
@@ -36,7 +36,7 @@
                 >
                 </v-text-field>
               </template>
-                <v-card tile flat v-if="searchData" max-width="750">
+                <v-card tile flat v-if="searchData"  >
                   <RetailerSearchProducts @actionClose="showSnackBarMessage" />
                 </v-card>
                  <v-card  v-else >
@@ -52,22 +52,7 @@
           <v-alert class="alert-box-outline" type="error" text dense
             >You have no items in your shopping cart.</v-alert
           >
-          <!--  <p>
-            Click
-            <span
-              class="
-                mr-1
-                text-decoration-none
-                fontcolor-black-light
-                fontsize-16
-                guest-shipping-address-login
-              "
-            >
-              <span @click="goToShopping()" class="cursor-pointer"
-                >here</span
-              > </span
-            >to continue shopping.
-          </p>-->
+          
         </v-col>
       </v-row>
 
@@ -76,7 +61,7 @@
           <v-col cols="12" sm="12" md="8">
             <v-col cols="12">
               <p
-                class="h3 body-font text-uppercase primary--text"
+                class="h3 body-font text-uppercase text-primary"
                 v-if="!cartProductsProgress"
               >
                 Your Cart ( {{ cartProductsItem.length }} )
@@ -98,10 +83,10 @@
           <v-col cols="12" sm="12" md="4" class="pb-0 mb-0">
             <v-row>
               <v-col cols="12">
-                <p class="pb-0 mb-0 h2 body-font text-uppercase primary--text">
+                <p class="pb-0 mb-0 h2 body-font text-uppercase text-primary">
                   Summary
                 </p>
-                <v-divider class="primary pb-0 mb-0"></v-divider>
+                <div class="hr-line"></div>
               </v-col>
             </v-row>
             <v-row v-if="!cartTotalAmtProgress && cartProductTotalAmt">
@@ -115,7 +100,7 @@
               <v-col cols="12">
                 <p class="float-left pb-0 mb-0">Shipping</p>
                 <p class="float-right pb-0 mb-0">
-                 <!-- ${{ priceFormatter(cartProductTotalAmt.baseShippingAmount) }}-->
+               
                  TBD
                 </p>
               </v-col>
@@ -123,35 +108,37 @@
                 v-if="stockFlag"
                 cols="12"
                 align="center"
-                class="px-10 my-6"
+               
               >
-                <v-hover v-slot:default="{ hover }">
+                <v-hover v-slot:default="{  isHovering, props }">
                   <v-btn
-                    tile
-                    large
+                  size="large"
+                  rounded="0"
+                  v-bind="props"
+                  class="d-sm-none d-md-block cart-products-button"
+                  :variant="isHovering ? 'outlined' : 'outlined'"
+                  :class="
+                  isHovering ? ' bg-white text-primary' : 'bg-primary'
+                  "
                     block
-                    class="d-sm-none d-md-block cart-products-button"
-                    :outlined="hover"
-                    :color="hover ? 'white' : 'primary'"
-                    :class="hover ? 'primary--text' : 'white--text'"
-                    dark
-                    depressed
                     @click="goToCheckout()"
                     >GO TO CHECKOUT</v-btn
                   >
                 </v-hover>
-                <v-hover v-slot:default="{ hover }">
+                <v-hover v-slot:default="{ isHovering , props}">
                   <v-btn
-                    tile
-                    large
+                     size="large"
+                  rounded="0"
+                  v-bind="props"
                     class="
                       d-none d-sm-flex d-md-none
                       px-12
                       cart-products-button
                     "
-                    :outlined="hover"
-                    :color="hover ? 'white' : 'primary'"
-                    :class="hover ? 'primary--text' : 'white--text'"
+                     :variant="isHovering ? 'outlined' : 'outlined'"
+                  :class="
+                  isHovering ? ' bg-white text-primary' : 'bg-primary'
+                  "
                     dark
                     depressed
                     @click="goToCheckout()"
diff --git a/src/services/user_cart.service.js b/src/services/user_cart.service.js
index af2b8a3..088de39 100644
--- a/src/services/user_cart.service.js
+++ b/src/services/user_cart.service.js
@@ -4,7 +4,29 @@ import { wrapRequest } from './nav';
 const vueAppMagenotApiUrl = import.meta.env.VITE_APP_MAGENTO_API_URL;
 const vueAppNodeslsApiUrl = import.meta.env.VITE_APP_NODESLS_API_URL;
 const retailorId = import.meta.env.VITE_APP_RETAILOR_ID;
- 
+
+export const doPostCartItem = wrapRequest((sku, qty, ccid, price, personalizeDetails,builderId, quoteId) => {
+    const requestOptions = {
+        method: 'POST',
+        headers: {
+            'Content-type': 'application/json',
+            'Access-Control-Allow-Origin': '*',
+            ...authHeader()
+        },
+        body: JSON.stringify({
+            "cartItem": {
+                "quote_id": quoteId,
+                "sku": sku,
+                "qty": qty,
+            },
+            "ccid": ccid,
+            "order_total": price,
+            "personalize_Data": personalizeDetails,
+            "builder_id": builderId
+        })
+    };
+    return fetch(`${vueAppMagenotApiUrl}/rest/crn_retailer/V1/carts/mine/items`, requestOptions)
+});
 
 export const doPostConfiguredCartItem = wrapRequest((itemNumber, quantity, typeId, optionId, optionValue, quoteId) => {
 
diff --git a/src/stores/retailer/user_cart.one.js b/src/stores/retailer/user_cart.one.js
index 5e2027f..a32fd87 100644
--- a/src/stores/retailer/user_cart.one.js
+++ b/src/stores/retailer/user_cart.one.js
@@ -1,4 +1,5 @@
 import {
+    doPostCartItem,
     doFetchQuote,
     doFetchCartProducts,
     doFetchTotalAmt,
@@ -113,6 +114,24 @@ export const userCartProduct = {
         },
     },
     actions: {
+        addToCart: async({ commit, state }, data) => {
+            try {
+                let result;
+                commit('inProgress', true);
+                if (!state.cartProductDetails.length > 0) {
+                    const userQuote = await doFetchQuote();
+                    localStorage.setItem("cr_userQuoteId", userQuote); //no use
+                    result = await doPostCartItem(data.sku, data.qty, data.ccid, data.price, data.personalizeDetails, data.builderId?data.builderId:null, userQuote);
+                } else {
+                    result = await doPostCartItem(data.sku, data.qty, data.ccid, data.price, data.personalizeDetails, data.builderId?data.builderId:null, state.cartProductDetails[0].quoteId);
+                }
+                commit('inProgress', false);
+                return result;
+            } catch (err) {
+                commit('inProgress', false);
+                throw err;
+            }
+        },
         addToConfiguredCart: async({ commit, state }, data) => {
             try {
                 commit('inProgress', true);